Published at Apr 09, 2020 by aakashns
..unless you love typing dots and slashes
If you’re working on a large single-page application, chances are you have a deeply nested folder hierarchy (depth > 2), thanks to which most of your
import
statements look like the image on the left. And that’s clearly not ideal, for several reasons, including:../
over and over and over can get on your nerves and frustrate you. That’s not too good for your productivity (or temper).import
s in a whole bunch of files. Just the thought of having to fix all those dot-dot-slashes can convince you to give up the idea of refactoring entirely.Fortunately, there’s a simple enough solution to avoid this: Use absolute imports!
If you’re using
, all you need to do is add a file called create-react-app
.env
in the project root with the following contents:NODE_PATH=src/
That’s it! Now you can write your
import
s like this:import { provideUser } from "auth/wrappers";
import * as util from "shared/util";
import RadioButton from "shared/components/RadioButton";
import { setLoader } from "app/actions/LoaderActions";
import { OptionsContainer } from "shared/containers/";
import JobDescription from "../components/JobDescription";
Any time you need to go all the way up to
src/
, you can skip the ../
s and directly start with the folder name. You can still use relative imports where it makes sense (see the last import above).If you’re using Visual Studio Code, and want code completion and other Intellisense goodies to work with absolute imports, just create a file called
jsconfig.json
with the following contents:{
"compilerOptions": {
"baseUrl": "src"
}
}
That’s all there is to it. Now go ahead and get rid of those nasty
../
s!