WebStorm中导入的路径别名 [英] Path aliases for imports in WebStorm

问题描述

我使用webpack路径别名来加载ES6模块。

I use webpack path aliases for ES6 module loading.

例如如果我为 utils 定义别名而不是像


从../../../ utils / foo导入Foo，我可以做 -
从utils / foo导入Foo

E.g. If I define an alias for utils instead of something like
import Foo from "../../../utils/foo", I can do
import Foo from "utils/foo"

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

The problem is that once I start using aliases, WebStorm looses track of the import and I'm left with warnings and no auto-completion.

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

Is there a way to instruct WebStorm to use such aliases?

推荐答案

[已弃用的答案。从WS2017.2开始，Webstorm自动解析并应用Webpack配置（参见@anstarovoyt评论）]

是的，有。

事实上，Webstorm无法自动解析和应用Webpack配置，但您可以以相同的方式设置别名。

In fact, Webstorm can't automatically parse and apply Webpack config, but you can set up aliases the same way.

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

You just have to mark the parent folder of "utils" (in your example) as a resource root (right-click, mark directory as / resource root).

我们刚刚设法完成了以下结构：

We just managed to do with the following structure :

/src
    /A
    /B
    /C

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

We have A B and C folders declared as alias in Webpack. And in Webstorm we marked "src" as "Resource Root".

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

And now we can simply import :

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

而不是

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

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

while still having Webstorm correctly parsing and indexing all code, link to files, autocompleting and so on ...

这篇关于WebStorm中导入的路径别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！