Tag: vscode

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 :(

Tag: vscode

How to use babel-module-resolver with vsCode and ESLint