Webstorm ES6命名导入获取无法解析符号错误答案

【问题标题】：Webstorm ES6 named import getting cannot resolve symbol errorWebstorm ES6命名导入获取无法解析符号错误
【发布时间】：2015-10-15 22:55:00
【问题描述】：

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

import { nodes } from 'utils/dom';

我在“节点”上收到“无法解析符号”错误

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

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 解析器一起使用吗？

任何建议将不胜感激

【问题讨论】：

您的导出是错误的，这不是导出的工作方式。不过不确定是否可以导入。在这种情况下，utils 是什么？这不是标准路径，因为它不是相对文件路径。你在某处有自定义模块解析逻辑吗？
你可以导出对象，然后 import { property } from 'path' 局部变量属性将被赋予导出属性的值。语法没有错。它工作得很好。它不应该是相对文件路径。我使用 webpack 和 babel 加载器。我不需要相对文件路径，因为我在 webpack 配置中使用 moduleDirectories 来搜索一组文件夹。所以底线是它有效。正确的问题是为什么 webstorm 显示它不正确
@VladimirNovick 那你是怎么解决这个问题的？

标签： javascript frontend webstorm ecmascript-6 babeljs

【解决方案1】：

我在“节点”上收到“无法解析符号”错误

是因为utils/dom 在标准 Node 代码中的意思是“在一个名为 'utils' 的模块中查找 dom.js。你已经通过使用 webpack 的 moduleDirectories 属性覆盖了这种行为，但 WebStorm 不知道那是什么。对于WebStorm 要正确解析utils/dom，您需要将utils 文件夹作为库添加到您的webstorm 项目配置中。

您的export 语法不正确。 ES6 导入/导出语法 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};

【讨论】：

【解决方案2】：

很难说这是否直接相关，但要让 Webstorm 知道如何解析您的导入，您也可以转到 Preferences > Directories 并将文件夹设置为 Resource Root （或右/上下文-点击一个文件夹并设置它）

这可能需要完成，例如，当您配置 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'

参考：Path aliases for imports in Webstorm

【讨论】：