Поиск по метке: vscode
How to use babel-module-resolver with vsCode and ESLint
4 декабря 2018
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 the plugins section. E.g.:
plugins:
[
// ...
[
"babel-plugin-module-resolver",
{
"alias": {
"^com(.+)": "./src/com/\\1"
}
}
],
// ...
]
- Then install npm i -D eslint-import-resolver-babel-module package for ESLint. It allows ESLint to check your rewrited imports, It assumes that you already use eslint-plugin-import package. If you don't I recommend you to start using it. This package checks your import/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 from parseOptions to the root of the .eslintrc.
- babel-module part in .babelrc section is just {}, it's okay.
- Install ESLint plugin in vsCode
- Probably you'll need to write in your .vcode/settings.json something like next lines. They force vscode to change CWD (current directory) in the deamon of eslint 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 :(