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

Question

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

import { nodes } from 'utils/dom';

我在"节点"上得到"无法解决符号"错误

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

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

我在"节点"上得到"无法解决符号"错误

是因为utils/dom在标准节点代码中意味着"在名为'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};

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'

参考:Webstorm中导入的路径别名