在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'，因此我向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中看到该错误。我建议就此联系支持人员