BLOG

WebStorm で public なファイルのパスを補完させる

# WebStorm# TypeScript# JavaScript
WebStorm で public なファイルのパスを補完させる

結論

WebStorm 上で目的(public等)のディレクトリを右クリック
Mark Directory as > Resource Root

経緯

Next.js でいう public ディレクトリに画像とか配置してると思う。
CSS とか Markdown ファイルからその画像ファイルを参照する時は例えば /images/hoge.png みたいなパスを記述することになる。

エディタ上ではプロジェクトルートからの補完が前提になっているので /public/images/hoge.png とか ../../images/hoge.png とか /Users/{username}/path/to/project/public/images/hoge.png とかじゃないと、反応しない。
/images/hoge.png だとパスが見つからずエラー表示みたいになる。

でもでも実装上は /images/hoge.png が正解で、要はプロジェクトルートと別にドキュメントルートを別でエディタに認識させたいというわけ。

JetBrains 製 IDE なら同じ手順でOK。
ただ IntelliJ IDEA とかサーバー系のだとちょっと話変わってきそうなので悪しからず。

VSCode だとどうすればいいかって?
JetBrains にお賽銭するんだよ。

SHARE

新着記事