在WebStorm中导入的path别名

我使用webpackpath别名来加载ES6模块。

例如，如果我为utils定义一个别名而不是类似的东西
import Foo from "../../../utils/foo" ，我可以做
import Foo from "utils/foo"

问题是，一旦我开始使用别名，WebStorm失去了对导入的跟踪，我留下了警告，并没有自动完成。

有没有办法指示WebStorm使用这些别名？

Answer 1

[弃用答案。 自WS2017.2开始Webstorm自动parsing并应用Webpackconfiguration（请参阅@anstarovoyt评论）]

就在这里。

实际上，Webstorm不能自动parsing和应用Webpackconfiguration，但可以用同样的方法设置别名。

您只需将“utils”的父文件夹（在您的示例中）标记为资源根目录（右键单击，将目录标记为/ resource root）即可。

我们只是设法做到以下结构：

 /src /A /B /C 

我们有AB和C文件夹在Webpack中声明为别名。 在Webstorm中，我们将“src”标记为“Resource Root”。

现在我们可以简单地导入：

 import A/path/to/any/file.js 

代替

 import ../../../../../A/path/to/any/file.js 

同时仍然有Webstorm正确parsing和索引所有代码，链接到文件，自动完成等…

Answer 2

我设法在webpack中为WebStorm 2017.2设置别名，如下所示：

Answer 3

不是现在 ，我们还在我们的反应项目中使用path别名。 导入名称较短，但是我们在webstorm的静态检查以及完成function上损失了很多。

我们后来想出了一个决定，把代码只减less到3个深度，对于公共部分来说只有一个级别。 webstom (ctrl + space)的path完成function甚至有助于减less打字的开销。 生产版本不使用更长的名称，所以在最终代码中几乎没有任何区别。

我会build议请重新考虑你的别名的决定。 你松散的来自node_modules的模块的语义和你自己的代码，以及一遍又一遍地引用别名文件来理解你的代码，是一个更大的开销。

Answer 4

在PHPStorm（目前使用2017.2）中，我无法使webpackconfiguration在别名方面正常工作。

我的修复涉及使用主要设置的“目录”部分。 我只需要将每个被别名引用的文件夹标记为一个源根目录，然后点击每个文件夹的属性下拉列表，并将别名指定为“软件包前缀”。 这使一切都为我联系起来。

不知道目录部分是否存在于WebStorm中，但是如果是这样的话，这似乎是一个用于获取导入别名的傻瓜式方法。