CODEWITHSUNDEEP
javascriptexpresseslintvscode-jsconfig
natikos
natikos

Reputation: 111

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.

Upvotes: 3

Views: 1837

Answers (2)

natikos
natikos

Reputation: 111

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.

Upvotes: 3

ale917k
ale917k

Reputation: 1768

To achieve the above I use the module-alias package.

After installing it as a normal dependency, npm i --save module-alias, add the following to your package.json:

"_moduleAliases": {
  "@modules": "./src/modules"
}

That will basically define the mappings for all the aliases you want to define.

To make it work, you will now need to import the following on top of your application under index.js:

require("module-alias/register"); // If using commonJS
// or
import "module-alias/register"; // If transpiling es6

You are now all set and should be able to import your files with absolute paths looking as:

const authRoutes = require("@modules/auth/auth.routes")
// or
import authRoutes from "@modules/auth/auth.routes";

In case eslint still flags the unresolved path, you may need to update your jsconfig.json or tsconfig.json to contain the below:

"paths": {
   "@modules/*": ["src/modules/*"]
}

You can find the package documentation and read more about its usage here.

Upvotes: 0

Related Questions