VS Code の設定

VS Code のプラグインのおすすめ、ショートカット、カーソル移動キーのカスタマイズ、@types によるコード補完。

約16分で読めます

このページの内容

VS Code の紹介やインストール方法については、ここで長々と話すのはやめておきます。とにかく使い始めてしまえばいいんです！

あれこれおすすめ情報を読むより、他の人の設定をそのままインポートして、手元で動かしてみるほうが早いです。以下は私の VS Code の設定ファイル一式です。必要であればダウンロードしてインポートしてください（手元の VS Code の対応する設定ファイルを置き換えるだけで大丈夫です）。

ダウンロード先 https://pan.kuizuo.cn/s/RgiP パスワード kuizuo

#はじめに

vscode は私が一番よく使うテキストエディターで、今まで使ったエディターの中でも最高のものです。この一年ずっと VS Code と付き合ってきましたが、やっぱりマイクロソフトはすごい、と言わざるを得ません！

ここでは、私のコーディング効率を実際に上げてくれた VS Code の設定や、よく使う操作をいくつか紹介します（ごく普通の操作は省きます）。

#プラグインのおすすめ

#GitHub Copilot

AI がコードを書いてくれます。使った人は皆「いい」と言っています。

公式サイト：GitHub Copilot · Your AI pair programmer

#Bracket Pair Colorizer 2

コードが真っ白な文字の塊に見えるのが嫌だったり、括弧をもう少しきれいに見せたかったりするなら、このプラグインを強くおすすめします。また、コードを書きすぎて入れ子になった括弧を削除したいときも、色が付いていれば見つけやすくなります。

今の VS Code には標準機能として備わっているので、プラグインのインストールは不要です。設定で Bracket Pair Colorization を検索して、チェックを入れるだけです。

#indent-rainbow

名前のとおり、インデントを虹色にするプラグインです。インデントの階層ごとに色が変わります（上のコードにも、わずかに色の違いが出ています）。インデントが深くなったときにとくに役立ちます。VS Code のショートカット `Ctrl + Shift + ` と組み合わせれば、次の括弧の位置へすぐ移動できます。

#Prettier

まず、VS Code のフォーマットのショートカットは Shift + Alt + F です。ただし、VS Code 標準のフォーマッターでは、vue などの一部のファイルは整形できません。そんなときは、このプラグインを入れると Vue のコードも整形できるようになります。

このすばらしい整形プラグインを知ったのは、VS Code を半年ほど使ってからでした。それまでは Beautify を使っていましたが、結果にあまり満足できず、整形できないファイルもありました。今もまだ Beautify を使っているなら、Prettier に切り替えて損はありません。

Vue 2 を使っている人には、Vetur は必須のプラグインです。整形だけでなく、補完のヒントも表示してくれます。Vue 3 に移行するなら、選ぶべきは Volar です。

#ESLint

フロントエンドの開発でコードの規約を守るための必須プラグインです。言うことはありません。

#Turbo Console Log

これは絶対に紹介しておきたいプラグインです。JS のテストでは、ちゃんとデバッグするほどでもなく、ただ結果を出力して確かめたいだけ、という場面がよくあります。そのたびに console.log() を何度も打ち込むのは面倒ですよね。このプラグインなら、ワンキーで出力できます。すべての console.log をまとめてコメントアウト、有効化、削除することもできます。私が一番よく使うプラグインの一つです。

使うショートカットは次のとおりです。

ctrl + alt + l：変数を選択してから、このショートカットを押すと console.log が生成されます
alt + shift + c：すべての console.log をコメントアウトします
alt + shift + u：すべての console.log を有効にします
alt + shift + d：すべての console.log を削除します

出力内容には、現在のファイル、行番号、スコープ、変数名が含まれます（先頭には小さなロケット 🚀 も付きます）。たとえば変数 a を出力すると、次のようになります。

console.log('🚀 ~ file: demo.ts ~ line 111 test ~ a', a)

残念な点は、このプラグインではショートカットをカスタマイズできないことです。

#Live Server

このプラグインを入れると、右下に Go Live ボタンが表示されます。クリックすると、現在のルートディレクトリに index.html があれば、ローカルサーバー（デフォルトではポート 5500）を立ち上げてブラウザーで書いた HTML を表示します。index.html がなければ、ディレクトリの一覧が表示されます。ファイルを右クリックして Open with Live Server を選ぶこともできます。

注意点として、VS Code で開いているのは単独のファイルではなくフォルダーである必要があります。そうでないと Go Live ボタンは表示されません。Web サーバー経由でないと正しく開けない静的ページを確認するときに、このプラグインは非常に便利です。

ご注意ください。名前は似ていますが、上のプラグインとはまったく別物です。こちらはリアルタイムの共同作業のためのプラグインです。GitHub か Microsoft のアカウントでサインインするだけで、自分のローカルのコードをほかの人とリアルタイムに共有できます。相手のカーソルがどこにあるかも表示され、メッセージも送れます。リモートでの共同作業には、まさに救世主のようなプラグインです。

#REST Client

VS Code の中で HTTP リクエストを送り、レスポンスを確認できるプラグインです。私はプロトコル解析をするときによく使っています。どれくらい便利かというと、パケットキャプチャから HTTP リクエストの部分をコピーして、VS Code の一時ファイルに貼り付けるだけでOKです。必要になったら .http ファイルとして保存すれば、ずっと使えます。右クリックして Generate Code Snippet を選ぶか、Ctrl + Alt + C を押せば、同じ HTTP リクエストを送るコードを各種プログラミング言語で生成してくれます。正直なところ、専用の HTTP ツールにも引けを取りません（PostMan さん、あなたのことですよ）。

caution 左上にあるグレーの Send Request をクリックしてください。Code Runner を入れている人は、右上の再生ボタンを間違えて押しやすいので注意しましょう。

#Thunder Client

VS Code の中で Postman や ApiPost のような API デバッグをしたいなら、このプラグインを試してみてください。コレクションや環境変数に対応しています。個人でテストするだけで、API を共有する必要がないなら、日々の API デバッグのほとんどはこれで十分まかなえます。

#CSS Peek

CSS のクラスがどこで定義されているかを素早く確認できます。使い方も簡単です。Ctrl を押したまま、確認したいスタイルのクラス名にカーソルを合わせ、マウスの左ボタンをクリックすると、その定義にすぐ飛べます。Ctrl を押しながらの操作は、関数や変数など、ほかの定義にも使えます。

#Project Manager

よく使うプロジェクトは、このプラグインで VS Code に登録しておけます。登録したプロジェクトは、左側のプロジェクトマネージャーからそのまま開けます。

まだ紹介していないプラグインもたくさんあります。個人的なおすすめは、私の設定ファイルをダウンロードしてインポートすることです。プラグイン、テーマ、ショートカット、レイアウトなどがすべて含まれています。

#ショートカット

#よく使うショートカット

Ctrl + C や Ctrl + V などの説明は省きます。主に、知らないかもしれないけれど、マウスでやってしまいがちな操作を紹介します。

Shift+Alt+F コードを整形
Shift+Alt+R エクスプローラーで表示（右クリックしてファイルを探すのは疲れますよね）
Shift+Alt+A ブロックコメント
Shift+Alt+下矢印 現在の行を次の行にコピー
Ctrl+D 次の一致する箇所も選択
Ctrl+F2 現在選択しているテキストと一致するものをすべて選択
Ctrl+Shift+L 現在選択している内容の一致箇所をすべて取得して、まとめて修正・削除（前の操作の上位版です）
Ctrl+Alt+下矢印 カーソルをまとめて追加（下方向に追加するのと同じ要領で、上方向も可能です）
Ctrl+~ ターミナルを開く
Ctrl+Shift+[ コードを折りたたむ
Ctrl+Shift+] コードを展開する
Ctrl+K Ctrl+0 すべて折りたたむ
Ctrl+K Ctrl+J すべて展開する
Ctrl+Backspace 前の単語を削除（とても便利です）
Ctrl+Alt+右矢印 現在のファイルを右側の独立したタブグループに素早く移動（分割ボタンをクリックする必要がありません）
Ctrl+Shift+右矢印 テキストを一単語ずつ選択できて便利です
できるなら、Ctrl+X で行を切り取るのではなく、Ctrl + Shift + K で行を削除しましょう

次の機能は、ショートカットがあるならマウスを使わないようにしましょう。

Ctrl+E/P 最近開いたファイルへ移動（もう一度押すと次のファイルに切り替わり、Shift を加えると前のファイルになります）
Ctrl+Tab タブを切り替え（Windows の Alt+Tab に相当します）。すでに開いているタブの切り替えは、上のものより使いやすいです
Ctrl+G 指定の行へ移動（もうマウスでスクロールしなくていいですよ）
Ctrl+Shift+O 現在のファイル内の関数を選んで移動（一覧表示）
Ctrl+T プロジェクト全体から関数を検索（Markdown の場合は見出しを検索します）
Ctrl+N 一時ファイルを作成（タブバーをダブルクリックするのはもうやめましょう）
Ctrl+W 現在のタブを閉じる（ブラウザーと同じ感覚で使えます。Shift は付けないこと。閉じるボタンをクリックするのもやめましょう）
Ctrl+Shift+T 直前に閉じたタブを開き直す（指が不器用な人には必須です。ブラウザーでも使えます）
Ctrl+B 左側のナビゲーションバーを切り替え

以上が、私が普段よく使うショートカットです。ショートカットのおかげで、コードを書く効率が確実に上がりました。ぜひ今すぐ VS Code を開いて、マウスを使わずにこれらのショートカットを試してみてください。思わぬ使い心地に驚くはずです！

#ショートカットのカスタマイズ

VS Code では、開発者が自分でショートカットを設定することもできます。主な用途はカーソル移動です。コードを書いていると、カーソルを特定の場所まで何度も動かす必要があります。そのたびに右手がマウスや矢印キーに移動するのは面倒ですよね。手を動かさずにカーソルを移動する方法はないのでしょうか。もちろんあります。大きく分けて二つです。

専用のキーボード、またはマクロキーを設定できるキーボード。一例として HHKB があります。「プログラマーが夢見る神器」として神格化されたキーボードです。興味があれば検索してみてください。
ショートカットのカスタマイズ

実際のところ、多くの場合はショートカットを自分で設定する必要はありません。これは一部の人のニーズに応えるためのものです。たとえば私は、次の六つだけを設定しています。

Shift+Alt+J カーソルを左へ移動
Shift+Alt+K カーソルを下へ移動
Shift+Alt+L カーソルを右へ移動
Shift+Alt+I カーソルを上へ移動
Shift+Alt+; カーソルを行末へ移動（End キーと同じ）
Shift+Alt+H カーソルを行頭へ移動（Home キーと同じ）
Shift+Alt+U コードの断片を選択すると、一行にまとめられます

設定もとても簡単です。設定を開いてキーボードショートカットを選び、カーソル移動のショートカットを探します。または keybindings.json ファイルを開いて、下のコードを追加します。

[
  {
    "key": "shift+alt+j",
    "command": "cursorLeft",
    "when": "textInputFocus"
  },
  {
    "key": "shift+alt+l",
    "command": "cursorRight",
    "when": "textInputFocus"
  },
  {
    "key": "shift+alt+i",
    "command": "cursorUp",
    "when": "textInputFocus"
  },
  {
    "key": "shift+alt+k",
    "command": "cursorDown",
    "when": "textInputFocus"
  },
  {
    "key": "shift+alt+h",
    "command": "cursorHome",
    "when": "textInputFocus"
  },
  {
    "key": "shift+alt+oem_1",
    "command": "cursorEnd",
    "when": "textInputFocus"
  },
  {
    "key": "shift+alt+u",
    "command": "editor.action.joinLines"
  }
]

ショートカットのカスタマイズは人それぞれで、誰にでも合うわけではありません。キーボードは便利ですが、直接的という点ではマウスにはかないません。ここでは、私が VS Code で使っているショートカット設定の一部を紹介しただけです。

ほかにも一つ設定しています。空白部分をダブルクリックして新しいファイルを作ると、デフォルトではプレーンテキストになります。JS などほかの形式にするには、毎回右下の小さな部分をクリックして切り替える必要があって、とても面倒でした。そこで、そのためのショートカットを自分で作りました。

まず、ショートカットの設定から「言語固有の設定を構成」を探します。

これを Ctrl + i Ctrl + k に設定しました。好みは人によって違うと思います。

#コードの補完

VS Code を使っていて、こんな経験はありませんか。ローカルのモジュールを読み込んでいるのに、コードの補完がきいたりきかなかったりする、という問題です。次の図のようなケースです。

たとえばローカルモジュールの fs を読み込んだのに、補完が出てこない場合です。ローカルモジュールの補完を出す一番手っ取り早い方法は、次の一行を実行することです。

npm install @types/node

ただし、上のようにして package.json ファイルのないディレクトリで実行すると、インストールは必ず失敗します。その場合は、先にプロジェクトの構造を初期化する必要があります。次のコマンドを実行します。

npm init
または
npm init -y

これでディレクトリに node_modules が表示されます。その中に @types というフォルダーがあり、今後のコード補完ファイルはここに保存されます。今の @types には node フォルダーがあります。これは先ほど実行した npm install @types/node の結果です。試してみると、確かにコードの補完が出るようになっています。しかも、おすすめ度を示す星マークまで付いています。

さて、私のコードには jQuery が使われています。手元には jquery.js ファイルがすでにあり、jQuery のモジュールはインストールしたくないのに、jQuery の補完だけは欲しい、という場合があります。そんなときは、次のコマンドを入力すると補完が表示されます。

npm install @types/jquery

ライブラリによっては、インストールしても補完が付いてこないものがあります。たとえば express です。その場合も、上と同じ方法で補完が表示されます。

express のインストール手順は省略します。まずは画像をご覧ください。

このアプリの補完は、なぜ JS 標準の候補ばかりなのでしょう。

では node_modules\@types の中を見てみると、どうして先ほどインストールしたものしかないのでしょう。

では試しに、次を実行してみましょう。

npm install @types/express

すると node_modules\@types にフォルダーがいくつか増えて、その中に express という名前のものも含まれます。これで express の補完も出るはずです。

案の定、VS Code にも正しくコード補完が出るようになりました。

info 注意してほしいのは、読み込むライブラリが TypeScript で書かれている場合は、@types/xxx を参照する必要はないということです。昔の JavaScript で書かれたライブラリには、もともと補完がないため、TypeScript 公式が提供している @types/xxx パッケージを借りる必要があります。

上の例からわかるように、@types フォルダーには、現在の VS Code ワークスペースで使うコード補完ファイルが入っています。補完が欲しいモジュールがあれば、npm i @types/モジュール名 を実行すればいいのです。現在のワークスペースで補完が出ないなら、たいていこれが原因です。

#独自の補完とスニペット

もう一つ補足します。自分で補完を定義したいことがあります。方法はあるのでしょうか。もちろんあります。Java を学んだことがあれば、System.out.println と毎回入力するのにうんざりした経験があるかもしれません。そういうときは、次のようにします。

.vscode フォルダーを作成し、その中に kuizuo.code-snippets という名前のファイルを作成します（拡張子が code-snippets であれば、名前は何でもかまいません）
そのファイルに次のコードを書きます

{
  "System.out.println": {
    "scope": "java",
    "prefix": "syso",
    "body": ["System.out.println($1);"],
    "description": "コンソールに出力し、改行を付ける"
  }
}

System.out.println はスニペットの名前です。厳密に一致させる必要はありません。
prefix：スニペットを呼び出す文字列
body：Tab を押したときに挿入される内容です。配列になっていて、各行はダブルクォーテーションで囲む必要があります。テンプレート文字列は使えません。
description：補完の候補に表示される説明文
scope：対象となる言語です。「javascript,c」のように複数指定もできます
$ に続く数字：カーソルの位置です。複数ある場合は、Tab を押すたびに次のカーソル位置へ移動します

このコードの意味は、prefix の syso を入力して Tab を押すと、body の System.out.println($1); が表示される、ということです。$1 がカーソルの位置になります。次の図のとおりです。

ただ、スニペットを使う場面はあまり多くありません。たいていのコード補完は、既成のプラグインで十分まかなえます。それでも、スニペットのほうが便利な場合はあります。

プラグインに含まれている補完候補を「拝借」することもできます。ここでは例として autoJS_pro を使います（知らない人は読み飛ばしても大丈夫です）。

まず autoJS_pro プラグインをインストールし、C:\Users\Administrato\.vscode\extensions\hyb1996.auto-js-pro-ext.... に移動します（Administrator はユーザー名です）
名前が snippets で終わるファイルを探して開き、中身をすべて選択してコピーします。
VS Code を開き、上と同じように .vscode フォルダーを作成します。以下同様です。
コピーしたスニペットのコードを、先ほど作成した snippets ファイルに貼り付けます。その後、auto.js-pro プラグインをアンインストールして、VS Code を再起動します。