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

Question

这是我的项目结构:

-src

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

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

我厌倦了:

从 '../../../../../components/SomeComponent' 导入 SomeComponent；

我想做的是:

从“@components/SomeComponent”导入 SomeComponent；

所以我在 SO 上看到了这个问题:

VSCode Intellisense does not work with webpack + alias

我得到了它:

jsconfig.json

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

但是现在 eslint 提示它没有解决，即使它编译得很好。

eslint 错误:

Unable to resolve path to module '@components/SocialMedia'.eslint(import/no-unresolved)

注意:

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

Answer 1

另一种方法，假设您安装了 eslint-plugin-import(在您的 devDependencies 中)。只需在您的 .eslintrc.json 文件中添加此“设置”即可。

.eslintrc.json

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

jsconfig.json

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

然后你就可以调用

import SomeComponent from 'components/SomeComponent';`