VSCodeショートカット一覧｜4つのカテゴリで効率UP！

はじめに

Visual Studio Code（VSCode）は、多くの開発者に愛用されている高機能なコードエディタです。普段使用している中で、次のように感じている方もいるのではないでしょうか。

• 基本的な操作しか知らず、もっと便利に使いたい

• ショートカットを活用して作業スピードを上げたい

• 先輩のようにスムーズに使いこなしたい

Visual Studio Codeではさまざまなショートカットが使用でき、使いこなせるようになると作業の効率化が可能です。多くのショートカットを習得すると、時間のかかるマウス操作を減らし、目的のツールをすぐに表示できるため、作業スピードが向上します。

本記事では、Visual Studio Codeをより快適に使うためのショートカットを図と共に分かりやすく解説していきます。この記事を読み終わるころには、いくつかのショートカットを使えるようになることが目標です。それでは、一緒に学んでいきましょう。

Visual Studio Codeとは

Visual Studio CodeとはMicrosoft社が提供するコードエディターで、通称「VSCode」と呼ばれています。

VSCodeはオープンソースのソフトウェアで、誰でも無料で利用できます。多言語対応、OSを問わず使用可能、多彩な拡張機能といった特徴を持ち、多くの現役エンジニアから支持されています。日本語対応もしているため、初心者でも扱いやすいエディターです。

VSCodeは以下のサイトからダウンロードでき、Mac、Windows、Linuxに対応しています。

Visual Studio Code 公式サイト

https://code.visualstudio.com/download

導入方法や基本操作については、以下の記事で詳しく解説しているので、ぜひ参考にしてください。

初心者にもわかる「VSCode」の導入から基本操作まで解説

https://envader.plus/article/118

VSCodeでショートカットを使うメリット

「ショートカットは便利だけど、覚えるのが大変」と考えている方もいるかと思います。しかし、ショートカットを活用することで、作業効率を大幅に向上させることができます。

例えば、新規ファイルを作成する場合は以下の手順となります。

• マウス操作

  ファイルメニュー→新規ファイル作成を選択→ファイル名入力

• ショートカット使用（Windowsの場合）

  ctrl + N→ファイル名入力

時間にしたら数秒の差ですが、細かな時間短縮が積み重なることで、長期間で見ると大きな効率化が実現します。ショートカットは覚えるまで手間がかかりますが、その手間は後から取り返せるため、メリットは大きいといえるでしょう。

VSCodeショートカット4選

VSCodeの操作をスムーズにし、コード記述を効率化するためのショートカットを、以下の4つのカテゴリに分けて紹介します。まずは基本的な操作から試してみましょう。

• 基本操作のショートカット
• ファイル操作のショートカット
• カーソル移動のショートカット
• 知っていると便利なショートカット

基本操作のショートカット

VSCodeを使う上で最初に覚えておくと便利なショートカットです。

紹介したすべてのショートカットを図と共に補足説明します。

ファイルをクイックオープン

作業中のディレクトリ内のファイルや最近開いたファイルを一覧表示し、矢印キー ↓ または ↑ でファイルを選択し開くことができます。

コマンドパレットの表示

VSCodeの機能やコマンドを検索し、素早く実行できます。設定変更や拡張機能の操作にも便利です。

サイドバーの表示/非表示

サイドバーをワンタッチで表示・非表示できます。

ターミナルの表示/非表示

内蔵ターミナルを簡単に表示・非表示できます。

エディタを横に分割

画面を左右に分割し、複数のファイルを並べて表示できます。

画面の拡大/縮小

画面の表示サイズを拡大・縮小できます。

VSCodeの設定を開く

VSCodeの設定を開き、フォントサイズや自動保存などのカスタマイズができます。

ファイル操作のショートカット

VSCodeだけでなく、PCの基本操作として共通しているショートカットもあります。特に新規作成や保存などは、日々の作業で頻繁に利用します。

カーソル移動のショートカット

コードを素早く編集するために、目的の位置へ迅速に移動できるショートカットです。長いファイルの編集が格段に楽になります。

ここでは、行を指定して移動を図と共に補足説明します。

行を指定して移動

指定した行番号へ素早く移動できます。トラブル対応時など、エラーが発生している箇所を素早く表示する際に便利です。

知っていると便利なショートカット

以下のショートカットを活用すると、コードの記述スピードが向上し、作業効率が大幅にアップします。

紹介したすべてのショートカットを図と共に補足説明します。

行の移動

カーソル行や選択行を上下に移動し、コードの順序を調整します。

行の複製

カーソル行や選択行を上下に複製します。

行の途中で下に改行

カーソル位置の直下に新しい行を挿入します。

行を全て削除（切り取る）

カーソル行を全て削除（切り取る）します。

行のコメントアウト

カーソル行や選択行をコメントアウトします。

同じ内容のテキストを選択

一致するテキストをCtrl + DまたはCmd + Dを入力するたびに順に選択します。選択した部分は同時に編集が可能です。

ファイル内の記述を検索

クラス・関数などをリスト表示し、選択した項目にジャンプします。

変更を取り消し

変更した内容をもと状態にしたい際に使用します。このショートカットはVSCode以外の基本PC操作でも使用できる便利なショートカットです。

まとめ

VSCodeのショートカットを活用することで、マウス操作の手間を減らし、よりスムーズにコーディングを進めることができます。最初はすべてを覚える必要はありません。まずはこの記事で紹介したショートカットの中から、特に自分の作業に役立ちそうなものを試してみましょう。

少しずつ使いこなしていくうちに、自然と手が覚えていき、作業効率が格段に向上します。慣れてきたら、自分に合ったカスタマイズや、より高度なショートカットにも挑戦してみるのもおすすめです。

VSCodeにはまだまだ便利な機能がたくさんあります。ぜひ、ショートカットを活用しながら、快適な開発環境を作り上げていってください。

参照資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご覧ください。

• Visual Studio Code - Keyboard shortcuts for macOS

  https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

• Visual Studio Code - Keyboard shortcuts for Windows

  https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf