テック動向

VS Code のコード補完の設定を3つ変えて、候補の出方を前後で比べた

VS Code でコードを書いていると、文字列の中でも同じファイルの変数名を補完したい、ファイルの単語から集めた候補を減らしたい、for と打ったら for 文のひな形を先に選びたい、と思うことがあります。どれも、コード補完の設定で変えられます。VS Code 1.146.0 で補完の設定を3つ変え、同じファイルで同じ文字を打って、変える前と後の候補を画面で比べました。

3つの設定を変えた結果は次のとおりです。単語の候補を切っても、文字列やコメントの外、つまりふつうにコードを書く場所で見えている候補の並びは変わりませんでした。

設定と変えた値候補の変わり方
editor.quickSuggestions の strings"off" → "on"文字列の中で、候補が0件から3件になった
editor.wordBasedSuggestions"offWithInlineSuggestions" → "off"文字列の中の3件が0件になった(strings は on のまま)。コードを書く場所で見えている12行は変わらなかった
editor.snippetSuggestions"inline" → "top"スニペット5件が先頭にまとまった

試した環境と手順

試したのは、macOS の VS Code 1.146.0 です。ほかの拡張機能の候補が混ざらないように、日本語化パックと、入力と記録のための自作の拡張機能(候補は出さない)だけを入れた検証用のプロファイルで開きました。AI の機能は chat.disableAIFeatures を true にして切り、AI のインラインの候補(カーソルの先に灰色で出る続きの文)は出ない状態にしました。

設定は、検証用フォルダの .vscode/settings.json に書きました。このファイルの設定は、そのフォルダを開いたときだけ効きます。すべてのプロジェクトで使う場合は、コマンドパレットの「基本設定: ユーザー設定を開く (JSON)」で開くユーザー設定に、同じ行を書きます。

打ったファイルは、次の JavaScript です。

const userName = "hanako";
const userEmail = "hanako@example.com";
const orderStatus = "pending";

function showUser() {
  console.log("");
}

打つ場所は3つです。6行目の "" の中に us、ファイル末尾の空行に us、関数の中の新しい行に for です。文字は、自作の拡張機能から VS Code の type コマンドを呼んで1文字ずつ入れ、1.5秒待ってから画面を撮りました。

文字列の中で候補を出す: editor.quickSuggestions

editor.quickSuggestions は、打っている途中で候補の欄を自動で出すかを、場所ごとに決める設定です。場所は、コード(other)、コメント(comments)、文字列(strings)の3つです。1.146.0 の既定値は次のとおりでした。

"editor.quickSuggestions": {
  "other": "offWhenInlineCompletions",
  "comments": "off",
  "strings": "off"
}

文字列の中は off なので、"" の中に us と打っても候補の欄は出ません。strings だけを on にしました。

{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}
上は変更前で、console.log の文字列の中に us と打っても候補が出ない。下は strings を on にした変更後で、userEmail、userName、showUser の3つが abc の印付きで出ている

変える前は、us と打っても何も出ませんでした。変えたあとは、userEmail、userName、showUser の3つが出ました。左の abc の印は、開いているファイルに書かれた単語から集めた候補に付きます。今回開いていたのは、このファイルだけです。showUser は、途中の「Us」が打った文字と合ったので並びました。

コードを書く場所の other の既定値は offWhenInlineCompletions です。今回は AI のインラインの候補が出ない状態で、ファイル末尾で us と打つと候補の欄が出ました。AI の候補が出る状態で同じになるかは、試していません。

単語から集める候補を止める: editor.wordBasedSuggestions

文字列の中に出た3つが、本当に単語から集めた候補かを確かめました。strings を on にしたまま、editor.wordBasedSuggestions を off にしています。この設定の既定値は offWithInlineSuggestions です。名前に off が入っていますが、今回の状態では、変える前に abc の候補が出ていました。

{
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "editor.wordBasedSuggestions": "off"
}
上は変更前で、文字列の中の us に userEmail、userName、showUser の3つの候補が出ている。下は wordBasedSuggestions を off にした変更後で、候補が出ていない

上は、前の画像の変更後と同じ画面です。下では3つが消え、候補の欄は出なくなりました。文字列の中に出ていた候補は、どれも単語から集めたものでした。

次に、ファイル末尾の空行に us と打ちました。上は設定を何も書いていない状態、下は直前の2つ(strings を on、editor.wordBasedSuggestions を off)を書いた状態です。

上は設定なし、下は strings を on、wordBasedSuggestions を off にしたとき。どちらもファイル末尾の us に、userEmail、userName、using、use、useActionState などが同じ順に並んでいる

こちらは変わりませんでした。上も下も、userEmail、userName、using、use… と同じ順に並んでいます。見えている12行に abc の印の候補はなく、変数、関数、キーワードの印の候補だけでした。13行目より下は比べていません。右端に react と出ている行もあり、この検証用フォルダに react は入れていませんが、候補には出ました。これらの候補をどの仕組みが出しているかと、react の候補がどこから来たかは、確かめていません。

スニペットを先頭に並べる: editor.snippetSuggestions

関数の中で for と打つと、キーワードの for と、for 文のひな形(スニペット)が混ざって並びます。スニペットは、for (…) { } のような決まった形をまとめて入れる候補です。既定の並びでは先頭がキーワードなので、ひな形を選ぶには下へ移る必要があります。editor.snippetSuggestions は、スニペットを候補のどこに並べるかを決める設定で、既定値は inline(ほかの候補と混ぜる)です。これを top にしました。

{
  "editor.snippetSuggestions": "top"
}
上は inline の変更前で、1行目がキーワードの for、2行目が for(For Loop)、3行目が forwardRef。下は top の変更後で、for(For Loop)、forawaitof、foreach =>、forin、forof の5つのスニペットが上にまとまり、キーワードの for は6行目にある

変える前は、キーワードの for が1行目で、5つのスニペットは2行目と4〜7行目に分かれていました。3行目は forwardRef です。変えたあとは、5つのスニペットが1〜5行目にまとまり、キーワードの for は6行目に下がりました。候補の欄で最初に選ばれている1行目も、キーワードからスニペットに変わっています。

どの設定を変えるか

同じファイルにある変数名や関数名を文字列の中で打つことが多いなら、editor.quickSuggestions の strings を on にすると候補が出ます。

editor.wordBasedSuggestions を off にすると、今回の JavaScript では、文字列の中の候補は消え、コードを書く場所で見えている候補の並びは変わりませんでした。

for 文をひな形から書くことが多いなら editor.snippetSuggestions を top に、キーワードだけを入れることが多いなら inline のままでよさそうです。

今回試していないのは、AI のインラインの候補が出る状態、コメントの中、JavaScript 以外の言語です。

※ 執筆支援に AI を使用しています。事実確認・コード検証・構成の最終判断は著者が行っています。