在WebStorm中使用Webpack别名导致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'，因此我在.eslint.js文件中添加了一个import/resolver来进行配置：

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

现在所有编辑器（如VSCode等）都能正常工作，但是只有在WebStorm中我看到下面的情况：

这很奇怪，因为即使运行eslint .命令也不会返回ESLint规则错误，但是在WebStorm中仅对import显示红色下划线。这很奇怪，因为VSCode没有任何问题并且可以正常工作。

我该如何解决？

- user10516706

Answer 1

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

- lena

---

感谢您的回答并尝试帮助我。但是我之前阅读了这个链接，它对我没有帮助，您的回答也一样。问题肯定是由ESlint而不是WebStorm引起的，因此联系支持团队并不是一个好决定。当no-extraneous-dependencies规则被关闭时，会考虑ESlint解析器。 - user10516706

我怀疑 "no-extraneous-dependencies": "off" 不是一个正确的答案，但是当我在 ESlint 规则中使用它时，红色下划线消失了。这是一个好的解决方案吗？这是一个合适的方式吗？ - user10516706