javascript - 使用 Webpack 别名会导致在 WebStorm 中导入别名时出现 ESLint 错误

Question

我通过以下代码设置别名 Webpack 配置:

module: {
...
resolve: {
  alias: {
    utils: path.resolve(__dirname, 'src/utils/'),
    '@SharedBlocks': path.resolve(__dirname, 'src/application/shared-blocks'),
  },
  extensions: ['.js', '.json', '.jsx', '.scss'],
},
...

然后我在 WebStorm 中发现了 ESLint 错误，如下所示:

显然，ESLint 无法解析 '@SharedBlocks/explorer' 所以我将 import/resolver 添加到 .eslint.js 文件中配置它:

settings: {
  "import/resolver": {
    webpack: {
      config: "webpack.template.js",
    }
  }
},

现在一切都在所有编辑器中运行良好，例如 VSCode 等。但是只是在 WebStorm 中，我看到如下:

这太奇怪了，因为即使运行 eslint . 命令也不会返回 ESLint 规则错误，但只是在 WebStorm 中，我看到 import 的红色下划线也能正常工作，但显示为红色import 的下划线。太奇怪了，VSCode没有任何问题，运行良好

我该如何解决？

Answer 1

no-extraneous-dependencies ESLint 规则不考虑 EsLint 解析器，参见 https://github.com/benmosher/eslint-plugin-import/issues/496 .我不确定为什么只能在 WebStorm 中看到错误。我建议就此联系支持人员