[解決済み] WebStormのインポート用パスエイリアス

質問

ES6モジュールの読み込みにwebpackのパスエイリアスを使用しています。

例 の別名を定義すると utils のようなものでなく

import Foo from "../../../utils/foo" のようにすることができます。

import Foo from "utils/foo"

問題は、エイリアスを使い始めると、WebStormがインポートを見失い、警告が表示されたまま、自動補完ができなくなることです。

WebStormにそのようなエイリアスを使用するように指示する方法はありますか？

どのように解決するのですか？

はい、あります。

実はWebstormはWebpackの設定を自動で解析して適用することができないのですが、同じようにエイリアスを設定することができます。

をマークすればいいだけです。 親 フォルダーを リソースルート (を追加します（右クリックし、ディレクトリを / リソースルートとしてマークします）。

以下のような構造でなんとかなったところです。

/src
    /A
    /B
    /C

Webpackでは、A,B,Cフォルダをaliasとして宣言しています。 また、Webstorm では "src" を "Resource Root" としてマークしています。

そして、単純にインポートすることができます。

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

の代わりに

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

Webstormがすべてのコードを正しく解析してインデックスを作成し、ファイルへのリンク、オートコンプリートなどを行いながら