Question

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

import { nodes } from 'utils/dom';

我得到＆＃34;无法解析符号＆＃34; ＆＃34;节点＆＃34;

上的错误

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

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

我也有错误。我使用带有babel-eslint解析器的eslint。事情是，这在Sublime Text 3中作为魅力，但由于某种原因，在Webstorm中无法进行错误检查。

我认为这是因为除了Eslint webstorm正在进行其他代码检查。

任何想法我怎么能压制它并且只使用带有babel-eslint解析器的eslint？

任何建议将不胜感激

Answer 1

我得到＆＃34;无法解析符号＆＃34; ＆＃34;节点＆＃34;
上的错误

是因为标准节点代码中的utils/dom表示＆＃34;在名为＆＃39; utils＆＃39;的模块中找到dom.js。您已使用webpack的moduleDirectories属性覆盖了此行为，但WebStorm并不知道这是什么。要使WebStorm正确解析utils/dom，您需要在您的webstorm项目配置中将utils文件夹添加为库。

您的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};

Answer 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

Webstorm ES6命名导入获取无法解决符号错误

2 个答案: