【Visual Studio Code】ファイルパスを補完候補を表示してくれるPath Autocompleteでルートの位置を変える方法

ツール

ファイルパスを補完候補を表示してくれる拡張機能「Path Autocomplete」

HTMLやCSS等で画像のファイルパスの候補を出してくれる拡張の「Path Autocomplete」を便利で使っているのですが、開発用ディレクトリ(Sass等の納品しないファイルを置く)と確認用ディレクトリ(HTML含む納品するファイル置く)が置いてある箇所を分けている場合があります。

そして、ワークスペースのルートを開発・納品ディレクトリがある箇所にしていると確認用ディレクトリにあるHTMLでの「Path Autocomplete」補完機能のルートが開発と納品ディレクトリがある箇所になり、コードに記述したいルートと異なります。

/*ディレクトリ構造*/

/dev //開発用ディレクトリ
/dist //確認用ディレクトリ
特に設定しないとHTML等に記述したいルートの一つ上のディレクトリが示される

ルートの位置を変更する

このままだと不便なので調べたところ、拡張機能のページに変更方法が書いてありました。

Path Autocomplete - Visual Studio Marketplace
Extension for Visual Studio Code - Provides path completion for visual studio code and VS Code for Web.

このページのpath-autocomplete.pathMappingsという箇所の記述を参考に以下のように、ワークスペースの設定ファイル(.code-workspace)に追加しました。

今回はxammpでローカルサーバーを作成していたので、/xampp/からの記述になっています。

"path-autocomplete.pathMappings": {
	"/": "/xampp/htdocs/フォルダ名/dist/"
}

そうするとルートの位置を変更できます。

初期のdev/distも残ってしまってますが・・。

これで作業が便利になりました。

コメント

タイトルとURLをコピーしました