This article is a small guide about how to configure an enviroment for babel-plugin-module-resolver
. This plugin allows you use custom prefixes for import/export
declarations in JS files. E.g. import A from ‘com/A’
can be treated as import A from …/…/components/A
.
- At first you should install the package
npm i -D babel-plugin-module-resolver
. - Then add your
map-config
to your.babelrc
file into theplugins
section. E.g.:plugins: [ // ... [ "babel-plugin-module-resolver", { "alias": { "^com(.+)": "./src/com/\\1" } } ], // ... ]
- Then install
npm i -D eslint-import-resolver-babel-module
package forESLint
. It allowsESLint
to check your rewrited imports, It assumes that you already useeslint-plugin-import
package. If you don’t I recommend you to start using it. This package checks yourimport/export
declarations, it’s very convinient. - Then change in your
.eslint
file:{ "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "settings": { "import/resolver": { "babel-module": {} } }, "plugins": [ // ... "import" ], // ... }
- You also need to install
babel-eslint
if you didn’t do it yet. And move its declaration fromparseOptions
to the root of the.eslintrc
. babel-module
part in.babelrc
section is just{}
, it’s okay.- Install
ESLint
plugin invsCode
- Probably you’ll need to write in your
.vcode/settings.json
something like next lines. They forcevscode
to changeCWD
(current directory) in the deamon ofeslint plugin
:"eslint.workingDirectories": [ { "directory": "./client", "changeProcessCWD": true } ],
- If you use
path-intellisense
plugin, you should consider configurate your mapping in.vscode/settings.json
too. - If you have any troubles, something doesn’t work properly or doesn’t work at all:
Use force, Luke
. Set vscode setting“eslint.trace.server”: “verbose”
and debug, debug, debug. I’ve spent on it several hours :(