コンテンツにスキップ

VS Codeの生産性向上のためのTips集

VS Code をテキストエディタとして使っている人は多いですが、Terraform や Node.js、Go などの開発で IDE として使う場合は、ショートカットや便利な操作を覚えることで作業効率が大きく向上します。本記事では、Preview Mode、画面分割、マルチカーソルなど、VS Code の生産性を高める便利な操作を整理して紹介します。

プログラマーではありませんが、VS Codeを使う場面は少なくありません。Markdownはもちろん、AWSでよく使われるJSONやYAMLファイルも、ちょっとしたシェルスクリプトもVS Codeの一択です。（一方メモ代わりになっているのは、Notepad++です）

そのため、IDEというよりもテキストエディタに近い使い方をしてきました。しかし最近業務でTerraformやNode.js、Goの開発を少し触ることになりました。

テキストエディタとして使うならあまり必要かもしれませんが、IDEとして使うなら、生産性向上のためにHot Keyや便利な操作方法を覚えなければなりません。例えば定義済み変数の一括の名称変更や、一括コメントイン・コメントアウトなどです。そして、自分なりに整理してみました。

Preview Mode & Edit Mode

基本中の基本ですが、VS Codeでファイルを開く際に「Preview Mode」と「Edit Mode」があります。タブにあるファイル名が斜体になっていればPreview Modeということになります。

Preview Modeでも編集はできます。正確に言うとPreview Modeで編集すると自動的にEdit Modeに切り替わります。2つのモードの違いは、Preview Modeの場合次々とファイルを開く場合、前のファイルが閉じられ、新しいファイルが同じタブで表示されます。

![](images/preview-mode.png)
Preview Mode
![](images/edit-mode.png)
Edit Mode

VS CodeのExplorerよりファイルを開く際に、シングルクリックだとPreview Mode、ダブルクリックだとEdit Modeでファイルが開きます。

便利なショートカット（Hot Key）

他のエディタなどと共通するHot Key（Ctrl + C / Ctrl + V / Ctrl + X / Ctrl + A / Ctrl + S / Ctrl + Nなどなど）は、ここで割愛します。

Ctrl + Shift + P / F1 コマンドパレット
Ctrl + Space Intellisense補完（サジェストを表示）
Shift + Alt + F フォーマットを整える
F12 変数などの定義に飛ぶ
F2 シンボルを名前変更
Shift + クリック Ctrl + Shift + [ Ctrl + Shift + ] 対象ソースコード部分の折り畳みと展開
Ctrl + K, M 言語モードの変更（ステータスバーの右下に表示されている言語をクリックしてもよい）
Ctrl + / Ctrl + K, Ctrl + C Ctrl + K, Ctrl + U コメントアウト・コメントイン
Ctrl + [ Ctrl + ] 行のインデントの追加・削除
Ctrl + @ Ctrl + Shift + @ ターミナルを開く（Ctrl + Shiftの場合は、新しいターミナルを開く）

画面の分割

生産性を上げるには、画面を複数に分割する機能は不可欠です。VS Codeの画面分割機能の利用方法を紹介します。

ファイルを右側の新規画面（Editor Group）で開くには、Alt + クリック（Preview Mode）もしくはAlt + ダブルクリック（Edit Mode）を使用します。

また、現在のタブを異なるEditor Groupに移動するには、Ctrl + Alt + ←/→を使用します。

現在表示中のファイルを、分割画面にクローンするには、Ctrl + \（円マーク）を使用します。

マルチカーソル

マルチカーソルは、とても便利な機能です。複数の場所にカーソルを表示させ、キーを押すと同時に複数個所への変更ができます。もちろん、複数個所での選択やコピペもできます。

  • 手動でのマルチカーソル設置
    Alt + クリックを使います。Altを押しながらクリックすると、2個所目、3個所目とカーソルを追加することができます。

  • 複数行の同一位置のマルチカーソル設置
    Ctrl + Alt + ↑/↓を使います。

  • 同一文字列にマルチカーソルを設置

    • 対象となる文字列をクリックします（選択ではなく、カーソルを移動するのみ）

    • 対象文字列の背景色が薄っすらと変わるのを確認（【注意】スコープ内のシンボルのみ色が変わりますが、すべての文字列が編集対象となります）

    • Ctrl + Shift + LもしくはCtrl + F2を押します

また、マルチカーソルモードを解除するには、ESCキーを押します。