Visual Studio Codeのショートカットと便利機能とは？
Visual Studio Code（VS Code）は、多くのショートカットキーや便利な編集機能を備えた、人気の高いソースコードエディターです。
ショートカットを覚えることで、マウス操作を減らし、コード編集やファイル操作を素早く行えるようになります。また、自動フォーマットやマルチカーソルなどの機能を活用すると、JavaScript開発の効率をさらに向上させることができます。
ここでは、特にJavaScript開発で役立つショートカットや便利機能を紹介します。
よく使われるショートカット一覧
以下は、VS Codeでよく使われる代表的なショートカットです。
| 操作 | Windows / Linux | Mac |
|---|---|---|
| コードフォーマット | Shift + Alt + F |
Shift + Option + F |
| 行コメント | Ctrl + / |
Cmd + / |
| ブロックコメント | Shift + Alt + A |
Shift + Option + A |
| クイックオープン | Ctrl + P |
Cmd + P |
| ファイルを保存 | Ctrl + S |
Cmd + S |
| サイドバー表示／非表示 | Ctrl + B |
Cmd + B |
| 同じ単語を追加選択 | Ctrl + D |
Cmd + D |
| ファイル内検索 | Ctrl + F |
Cmd + F |
| プロジェクト全体を検索 | Ctrl + Shift + F |
Cmd + Shift + F |
| 置換 | Ctrl + H |
Cmd + Option + F |
| コマンドパレット | Ctrl + Shift + P |
Cmd + Shift + P |
| コードの折りたたみ | Ctrl + Shift + [ |
Cmd + Option + [ |
| コードの展開 | Ctrl + Shift + ] |
Cmd + Option + ] |
最初からすべて覚える必要はありませんが、保存・検索・コメントアウト・フォーマット・Ctrl + Dあたりは特によく使われます。
Visual Studio Codeの便利機能
ショートカット以外にも、VS Codeには多くの便利機能があります。
マルチカーソル機能
マルチカーソル機能を使うと、複数の場所を同時に編集できます。
例えば、同じ変数名を複数箇所で一度に変更したい場合などに便利です。
Ctrl + D（MacはCmd + D）で同じ単語を順番に追加選択する。Alt + クリック（MacはOption + クリック）で任意の位置へカーソルを追加する。
同じようなコードを何度も入力する場面では、大幅な時間短縮になります。
コードフォーマットの自動適用
コードフォーマットを利用すると、インデントや改行位置などを自動的に整えることができます。
JavaScriptでは、Prettierなどのフォーマッターを利用するケースが一般的です。
自動フォーマットの設定方法
- 「File」→「Preferences」→「Settings」を開きます。
- 検索欄に「format on save」と入力します。
Editor: Format On Save（editor.formatOnSave）を有効にします。
保存するたびに自動整形されるため、コードスタイルを統一しやすくなります。
Zen Mode（集中モード）
Zen Modeでは、サイドバーやタブなどを非表示にして、コードだけに集中できます。
長時間コーディングするときや、集中してバグ修正を行いたいときに便利です。
Zen Modeの起動方法
Ctrl + Kを押してからZを押します。（MacはCmd + K→Z）- 元に戻すには、
Escキーを2回押します。
ファイル比較機能
VS Codeには、2つのファイルの違いを比較する機能があります。
Gitを利用している場合だけでなく、設定ファイルやコードの変更点を確認したい場合にも役立ちます。
ファイル比較の使い方
- 比較元のファイルを右クリックし、「Select for Compare」を選択します。
- 比較先のファイルを右クリックし、「Compare with Selected」を選択します。
左右にファイルが表示され、追加・削除・変更された部分が色分けされて表示されます。
IntelliSense（コード補完）
VS CodeにはIntelliSenseというコード補完機能があります。
変数名やメソッド名を入力すると候補が表示されるため、入力ミスを減らしながら効率よくコーディングできます。
- 入力候補の表示
- 関数の引数の説明表示
- オブジェクトのプロパティ候補表示
- 型情報の表示（TypeScript対応時）
JavaScriptでも非常に便利な機能なので、積極的に活用しましょう。
リネーム機能
変数名や関数名を安全に変更したい場合は、リネーム機能が便利です。
単純な検索・置換とは異なり、同じ識別子だけをまとめて変更できます。
| 操作 | Windows / Linux | Mac |
|---|---|---|
| シンボルの名前変更 | F2 |
F2 |
JavaScriptやTypeScriptでは、リファクタリング時によく利用されます。
統合ターミナル
VS Codeには、ターミナルが標準で組み込まれています。
Node.jsの実行やnpmコマンドの実行などを、エディターを離れずに行えます。
| 操作 | Windows / Linux | Mac |
|---|---|---|
| ターミナル表示 | Ctrl + ` |
Ctrl + ` |
JavaScript開発では頻繁に使用するため、覚えておくと便利です。
拡張機能（Extensions）
VS Codeの大きな特徴の一つが、豊富な拡張機能です。
JavaScript開発では、次のような拡張機能がよく利用されます。
- Prettier：コードフォーマット
- ESLint：コード品質のチェック
- Error Lens：エラーをコード上に分かりやすく表示
- GitLens：Gitの履歴を見やすく表示
必要に応じて導入すると、開発効率をさらに高められます。
まとめ
- VS Codeには、多くのショートカットや便利機能が用意されています。
- コードフォーマットやマルチカーソルを活用すると、編集作業を効率化できます。
- Zen Modeを使うと、コードに集中しやすい画面になります。
- ファイル比較機能は、変更点の確認やレビューに役立ちます。
- IntelliSenseやリネーム機能を使うと、安全で効率的にコーディングできます。
- PrettierやESLintなどの拡張機能を導入すると、JavaScript開発がさらに快適になります。