eslint 使用配置了 jsconfig.json 的路径映射解决导入错误

这是我的项目结构：

-src

--assets
--components
--constants
--helpers
--pages
--routes

eslintrc.json
jsconfig.json
App.js
index.js

我厌倦了：

import SomeComponent from '../../../../../components/SomeComponent';

我想做：

import SomeComponent from '@components/SomeComponent';

所以我在这里看到了这个问题：

VSCode Intellisense 不适用于 webpack + 别名 https://stackoverflow.com/questions/47181037/vscode-intellisense-does-not-work-with-webpack-alias

我让它可以使用：

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "module": "commonjs",
    "paths": {
      "@components/*": ["./src/components/*"]
     }
  }
}

但是 eslint 现在抱怨它没有解决，尽管它编译得很好。

eslint错误：

无法解析模块“@components/SocialMedia”的路径。eslint(import/no-unresolved)

NOTE:

我不想禁用 eslint。我也想让它理解这种路径。

另一种方法，假设你有eslint-plugin-import安装（在您的 devDependency 中）。只需将这个“设置”添加到您的.eslintrc.json file.

.eslintrc.json

{
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

然后你就可以调用

import SomeComponent from 'components/SomeComponent';`