Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
[ad_1]
Using absolute imports to better organize your React project is a great way. Relative imports are hard to follow and break during refactoring. Absolute imports manage your project easier as it grows. Forget long relative imports after this article. This is my 40th Medium article.
What if your project’s folder structure is complex, and you need to go up in it? Inside of your components, you have imports that look like the below example with relative imports.
import {MyComponent} from ‘../../../../components/MyComponent’;
You can break the above import by changing the path of the component from which you are importing your MyComponent
. Let’s assume you decide to move MyComponent
into its own folder. Then you would need to update all of your imports in your project and add one extra ../
to all of your imports. Relative imports has some more problems.
By using absolute imports, you can alias some folders to a name like below:
import {MyComponent} from ‘components/MyComponent’;
Absolute imports have some advantages.
../../../../hell
. Therefore easier to type out the imports.The below example is a file with Relative imports.
Make the imports in the above file prettier.
Therefore, how can you use absolute imports with ReactJs?
If you need to set up absolute imports in your Typescript application add/update your tsconfig.json
file in the root directory of the project. Then you need to update the compiler option baseUrl
in the file.
Setting up absolute imports to Typescript and setting up absolute imports to JavaScript is pretty much the same process. Create the jsconfig.json
file in the root directory of the project. Then you need to update the following snippet.
Now you can import your components like this.
import {MyComponent} from ‘components/MyComponent’;
You can also use the compiler option paths
as well. Perhaps you want to alias your component
folder. For that, you need to set up your tsconfig.json
, or jsconfig.json
as shown in below:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@component/*": ["src/components/*"],
}
}
}
Now you can import the components from your component folder like this:
import {MyComponent} from ‘@component/MyComponent’;
is that enough?
Well, no… You need to make your IDE smart to understand absolute imports in your files. Here I am going to mention the progress for the top 2 IDEs. Those are VS Code and WebStrom.
VS Code is smart enough to understand the tsconfig.json
, or jsconfig.json
file. Intellisense and jump-to-source are just working fine with absolute imports.
Therefore, you can follow the above process.
Select the src folder in the project window and right-click on it. Select the option Mark Directory as and then select the Resources Root option.
Now go to Settings -> Editor –> Code Style -> JavaScript and select the Imports tab. Then check the Use paths relative to the project, resource or sources roots.
Now WebStrom knows where the absolute imports are pointing. There won’t no warnings and autocomplete/ jump-to-source will work. This means the auto-import mechanism uses absolute imports.
If you are a strict developer like me, use something like Airbnb’s ESLint config.
Create React App also has an ESLint setup but it has a minimal set of rules. eslint-plugin-import is used by Airbnb and this plugin checks undefined imports. When you are going to use Airbnb’s ESLint config it will give you the error shown below:
You can fix the error by add settings
prop in your ESLint config. That setting prop point that your imports might be relative to src
folder. Therefore, you need to add update your ESLint config in .eslintrc
file like this:
You don’t need to install any NPM modules to avoid the ESLint error, add the settings
prop is enough.
Absolute imports have been possible for a long time with Webpack. When you are naming your aliased folder, you need to use PascalCase/CamelCase because it is the convention follow in the Webpack.
[ad_2]