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

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

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

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

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

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

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

他のエディタなどと共通する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キーを押します。

Related Posts