Visual Studio Codeでパス補完機能を細かく設定して自分好みにできる拡張機能「Path Autocomplete」

Visual Studio Codeではデフォルトの状態でも、ある程度パスの入力補助がついていますが、拡張機能を使うことでさらに細かい設定ができて便利になります。

今回はパス入力を効率化する「Path Autocomplete」についてまとめておきます。

Path Autocomplete

marketplace.visualstudio.com

Path Autocomplete - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

Path Autocompleteはsrcやhref属性のパス候補を表示してくれる拡張機能です。

他に似た有名な拡張機能に「Path Intellisense」がありますが、Path Autocompleteは候補に表示したくないファイルを、いま開いているファイルの拡張子に合わせて条件を細かく設定できます。

Path Intellisenseも候補に表示するファイルの設定はできますが、全ファイル共通の設定になってしまいます。
たとえば、.scssファイルを開いているときは.scssファイルもインポートするために使いますが、.htmlを開いているときは.scssファイルは候補に出したくないなどの細かい設定ができます。

フォルダ分けしておけばあまり困ることはありませんが、条件設定の細かさからPath Autocompleteを使っています。
ただし、Path Intellisenseの方がインストール数は断然多いので、とりあえずメジャーな方を使っておくという意味ではPath Intellisenseの方が良いかもしれません。

基本的な使い方

拡張機能を有効化後は、デフォルトの自動補完機能を無効化するために、下記設定を追加します。

{
  "javascript.suggest.paths": false,
  "typescript.suggest.paths": false,
}

あとはパスを入力しようとすると自動で候補が表示されます。

Visual Studio Codeデフォルトの補完機能には「~/」でのユーザーディレクトリからの候補選択ができないので、これを入力することで拡張機能がインストールされているかどうか判断できます。

もしくは、「Path Autocomplete」で補完されるサジェストの項目がアクティブになったときに、フォルダ・ファイル名の右隣にパスが表示されます。

設定の変更

候補に表示しないファイルを指定する

デフォルトの状態だと、すべてのファイルが候補として表示されてしまうため、表示したくないファイルは「”path-autocomplete.excludedItems”」に設定しておくことで非表示にできます。

*（アスタリスク）を使いながら、どの拡張子やフォルダを候補に表示しないか入力します。

そして、{ "when": "" }の中に条件を適用するファイルを指定します。
**を指定すると全ファイルになりますし、**/*.htmlとすると.htmlファイルのみで条件が適用されます。

{
  "path-autocomplete.excludedItems": {
    "**/.*un~": { "when": "**" },
    "**/*.js": { "when": "**/*.ts" },
    "**/*.map": { "when": "**" },
    "**/{.git,node_modules}": { "when": "**" }
  }
}

フォルダ補完後の自動スラッシュ入力

デフォルトだとフォルダ補完後に自動でスラッシュは入力されないので、自分で入力する必要がありますが「”path-autocomplete.enableFolderTrailingSlashboolean”」を「true」にするとスラッシュが自動で入力されるようになります。

{
  "path-autocomplete.enableFolderTrailingSlashboolean": true,
}

Markdownやプレーンテキストでも補完できるようにする

Markdownやプレーンテキスト以外でも補完機能を使えるようにするためには「”path-autocomplete.triggerOutsideStrings”」を「true」にすると補完できるようになります。

{
  "path-autocomplete.triggerOutsideStrings": true
}

引用符の外側でも補完できるようにする

デフォルトだと””の中でのみ発火しますが、「”path-autocomplete.triggerOutsideStrings”」を「true」にするとどこでも補完できるようになります。

{
  "path-autocomplete.triggerOutsideStrings": true
}

どこでも発火されてしまうと逆に邪魔になることの方が多いですし、引用符外で使うこともないので基本的にはデフォルトのままで良さそうです。

絶対パスの設定

デフォルトだと絶対パスはワークスペースのルートパス内にされます。
基本的にはこの設定の方が便利だと思いますが、ディスクルートパスへの絶対パスに変更するためには、「”path-intellisense.absolutePathToWorkspace”」を「false」に設定します。

{
  "path-intellisense.absolutePathToWorkspace": false,
}

マッピング設定

特定フォルダを絶対パスのルートに設定したい場合や、Webpackでパスを使用したい場合は「”path-intellisense.mappings”」でマッピング設定ができます。

"path-autocomplete.pathMappings": {
  "/": "${folder}/src",
  "/test": "${folder}/src/Actions/test",
  "$root": ${folder}/src
}

「${folder}」を使うと、ワークスペースのトップのパスが指定されます。

Visual Studio Codeのデフォルト機能だとこの辺りの設定ができないので、この辺の設定ができるのが補完機能の拡張機能を使うメリットです。