Question

这是我的项目结构：

-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';

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

VSCode Intellisense does not work with webpack + alias

我可以使用它：

jsconfig.json

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

但是现在大声疾呼，尽管它可以很好地编译，但它仍未解决。

取消错误：

无法解析模块'@ components / SocialMedia'.eslint（import / no-unresolved）的路径

注意：

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

Answer 1

另一种方法，假设您已安装eslint-plugin-import（在您的属地中）。只需在您的.eslintrc.json文件中添加此“设置”即可。

.eslintrc.json

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

jsconfig.json

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

然后您可以致电

import SomeComponent from 'components/SomeComponent';`

Answer 2

我已经安装：

npm install -D eslint-import-resolver-alias

然后我将其添加到我的eslint配置文件中：

eslintrc.json

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

现在它正在工作，并且eslint不再显示错误。

编辑：

我正在使用webpack，还需要这样做：

webpack.config.js

resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }

在配置了路径映射jsconfig.json

2 个答案: