在 WebStorm 中使用 Webpack 别名导致 ESLint 错误导入别名答案

【问题标题】：Using Webpack alias cause to ESLint error on import alias in WebStorm在 WebStorm 中使用 Webpack 别名导致 ESLint 错误导入别名
【发布时间】：2019-03-24 20:07:29
【问题描述】：

我通过以下代码设置别名 Webpack config：

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 的红色下划线也可以正常工作，但 import 显示红色下划线。奇怪的是VSCode没有任何问题并且运行良好

我该如何解决？

【问题讨论】：

标签： javascript reactjs webpack webstorm eslint

【解决方案1】：

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

【讨论】：

感谢您的回答并试图帮助我。但我之前读过这个link。它对我和你的回答也没有帮助。绝对问题出在ESlint 而不是WebStorm，因此联系支持不是一个好的决定。 no-extraneous-dependencies 规则何时是 off 考虑 ESlint 解析器。
我怀疑"no-extraneous-dependencies": "off" 是一个真实的答案，但是当我在ESlint 规则中使用它时，红色下划线消失了。这是一个好的解决方案吗？这是正确的方法吗？