Search code examples
javascriptexpresseslintvscode-jsconfig

Eslint doesn't respect jsconfig paths


I have my express.js project in monorepo. I want to add custom path alias to it. The directory structure is:

./
server/
----> jsconfig.json
----> .eslintrc.js
----> src/
--------> index.js
--------> modules/auth
-------------> auth.controller.js

jsconfig.json

{
  "compilerOptions": {
    "module": "ES6",
    "baseUrl": "./",
    "paths": {
      "@modules/*": [
        "src/modules/*"
      ]
    }
  },
  "exclude": ["node_modules"]
}

.eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'no-console': 'error',
    'no-debugger': 'error',
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@modules/*', 'src/modules/*'],
        ],
        extensions: ['.js', '.json'],
      },
    },
  },
};

Simply, I just tried to import auth controller in my index.js file.

import authRoutes from '@modules/auth/auth.routes';

but I get the following error: Unable to resolve path to module '@modules/auth/auth.controller' .eslint import/no-unresolved

please, don't suggest to turn off the rule. I've alreadyy tried eslint-import-resolver-jsconfig, but I got Cannot resolve jsConfig, SyntaxError } on 150.


Solution

  • Because I used monorepo, there was a problem for ESLint or even lint-staged. So now I have only one project per repository and:

    1. Added custom paths in jsconfig.json:
    "paths": {
          "@modules/*": [
            "./src/modules/*"
          ]
        }
    
    1. Installed eslint-import-resolver-jsconfig and added the following configuration to the eslint.json:
    "extends": [
        "airbnb-base",
        "eslint:recommended"
      ],
     "plugins": ["import"],
     "settings": {
        "import/resolver": {
          "jsconfig": {
            "config": "jsconfig.json"
          }
        }
      }
    
    1. Installed the Babel plugin babel-plugin-module-resolver and added the following settings to the .babelrc:
     "plugins": [
        [
          "module-resolver",
          {
            "alias": {
              "@modules": "./src/modules"
            }
          }
        ]
      ]
    

    But, again: This only works if you have one project per repository and all your configuration files (.*rc, package.json, etc) are in the root level.