Webstorm ES6 named import getting cannot resolve symbol 错误

Question

我在 Webstorm 中使用 ES6 命名导入声明时出现错误：

import { nodes } from 'utils/dom';

我在 "nodes"

上收到 "cannot resolve symbol" 错误

另外，当我尝试像这样导出为命名导出时：

export {
  write: document.write.bind(document),
  node: document.querySelector.bind(document),
  nodes: document.querySelectorAll.bind(document)
};

我也遇到错误。我将 eslint 与 babel-eslint 解析器一起使用。问题是这在 Sublime Text 3 中很有用，但由于某种原因在 Webstorm 中无法进行错误检查。

我假设这是因为除了 Eslint webstorm 正在做其他代码检查。

知道如何抑制它并仅将 eslint 与 babel-eslint 解析器一起使用吗？

如有任何建议，我们将不胜感激

Answer 1

I get "cannot resolve symbol" error on "nodes"

是因为标准 Node 代码中的 utils/dom 表示“在名为 'utils' 的模块中找到 dom.js”。您已使用 webpack 的 moduleDirectories [=33] 覆盖了此行为=]，但 WebStorm 不知道那是什么。要使 WebStorm 正确解析 utils/dom，您需要在 webstorm 项目配置中添加 utils 文件夹作为库。

您的 export 语法不正确。 ES6 import/export 语法与对象 100% 无关，在您的示例导出中，您使用的是对象语法。 import { nodes } 正在请求名为 nodes 的导出。您可以通过多种方式编写您拥有的导出文件：

export const write = document.write.bind(document);
export const node = document.querySelector.bind(document);
export const nodes = document.querySelectorAll.bind(document);

或者如果你喜欢多行，你可以折叠它们 var/let/const

export const write = document.write.bind(document),
    node = document.querySelector.bind(document),
    nodes = document.querySelectorAll.bind(document);

甚至

const write = document.write.bind(document);
const node = document.querySelector.bind(document);
const nodes = document.querySelectorAll.bind(document);


export {write, node, nodes};

Answer 2

很难说这是否直接相关，但要让 Webstorm 知道如何解决您的导入问题，您还可以转到 Preferences > Directories 并将文件夹设置为 Resource Root（或文件夹上的 right/context-click 并按此方式设置）

这可能需要完成，例如，当您配置 Webpack 来解析某些子目录时，您的项目结构可能是：

/
  /docs
  /src
    /containers
      /app
        App.js
    /components
      /header
        Header.js

在这种情况下，Webstorm 会期望 App.js 中的导入如下所示：

import Header from '../../../components/header/Header'

而对于 Webpack，如果您添加了 src 作为要解析的模块，您可以执行以下操作，Webstorm 目前无法理解，因此将其添加为资源根 解决了 问题

import Header from 'components/header/Header'

参考：

Webstorm ES6 named import getting cannot resolve symbol 错误

Webstorm ES6 named import getting cannot resolve symbol error

javascript

frontend

webstorm

ecmascript-6

babeljs