VSCodeのショートカット一覧!開発作業を効率化する秘訣を解説
thumb_vscodeshort_01
VSCodeのショートカット一覧!開発作業を効率化する秘訣を解説
基礎知識
アンドエンジニア編集部
2022.08.10
この記事でわかること
Visual Studio Code(VSCode)は、キーボードショートカット機能に特長があります
多くの操作をキーボードのみで行なうことができ、カスタマイズ性が高いことが特長です
他のキーマップに差し替えることも可能で、高い開発生産性が期待できます

VSCodeのショートカット

img_vscodeshort_01

Visual Studio Code(VSCode)は、キーボードショートカット機能を持ち、ほとんどの操作をキーボード操作のみで行うことができます。ショートカットの変更や、希望のショートカット設定を導入することも可能であり、キーマップのカスタマイズ性が高いことが特長として挙げられます。

Visual Studio Code概要

Visual Studio Codeは、マイクロソフト社が開発提供しているソースコードエディタです。Windows・Linux・macOSで利用可能です。フリーのオープンソースソフトウェアであることや、キー操作のカスタマイズを柔軟に行えることから、クロスプラットフォーム利用が進んでいます。

【参考】:Microsoft Visual Studio Code 【参考】:Visual Studio Code

Visual Studio Codeのキーバインディング

img_vscodeshort_02

Visual Studio Codeでは、ほとんどの操作をキーボードで行うことができます。デフォルトキーバインディングが設定されていますが、キーボードショートカットエディタで簡単に確認・変更することができます。また、あらかじめ決められたキーボードショートカットをマーケットプレイスから取り込むこともできます。

Visual Studio Codeの利用

Visual Studio Codeの利用には、モジュールのダウンロードとインストールが必要です。ショートカットの確認の際に、実行できるよう事前に準備しておきましょう。なお、Web版もプレビュー提供されており、インストールせずにソフトウェアを開発することもできます。

【参考】:Download Visual Studio Code 【参考】:Visual Studio Code Webプレビュー

キーボードショートカットエディタの利用

キーボードショートカットエディタは、Windowsの場合はアプリ左下の「管理アイコン」をクリックし「キーボード ショートカット」を選択します。

macOSでは「コード」「環境設定」「キーボードショートカット」をクリックします。Windowsでは、Ctrl+K Ctrl+Sのキーボードショートカットで表示させることもできます。

img_vscodeshort_03

 【図】:管理アイコンのメニュー表示

管理アイコンのメニューで「キーボード ショートカット」をクリックすると、以下のようにキーボードショートカットエディタが立ち上がります。

img_vscodeshort_04

 【図】:キーボードショートカットエディタの起動

キーバインドの変更を行う場合は、検索キーで該当部分を表示しダブルクリックで編集します。また、エディタの上部右端の「・・・」アイコンをクリックすると「既定のキーバインドを表示」「拡張機能のキー バインドを表示する」「ユーザーのキーバインドを表示」のメニューが表示されます。

このメニューから表示内容を選択することもできます。

img_vscodeshort_05

 【図】:キーボードショートカットエディタのサブメニュー

キーボードショートカットの設定ファイル

デフォルト設定のキーボードショートカットを変更した場合、変更した設定内容がJSONファイルとして格納されます。JSONファイルはエディタで編集することが可能です。

格納ファイルは、”C:\Users\ユーザー名\AppData\Roaming\Code\User\keybindings.json”です。

使い方は、上部右から3番目のアイコンにカーソルを合わせると、「キーボードショートカットを開く(JSON)」の吹き出しが表示されます。そのままクリックすると、 “keybindings.json”がエディタに表示されます。もう1度、今のアイコンをクリックすると、通常のキーボードショートカットエディタに戻ります。

img_vscodeshort_06

 【図】:キーボードショートカットエディタからJSONファイルを表示・編集する 

すでにショートカットのカスタマイズがされている場合は、このJSONファイルに登録されています。デフォルトでは何も登録されていません。

ショートカットが効かない場合

キーバインディングのコンフリクトや解釈の優先順位の問題で、ショートカットが効かないことや正常動作しないことがあります。その場合は、設定状況を確認して正しい設定に置き換える必要があります。

確認するには、”Developer:Toggle Keyboard Shortcuts Troubleshooting” を実行しログファイルを調べることも可能です。Windowsで実行するには、「表示」「コマンド パレット…」またはCtrl+Shift+Pで検索し、実行します。

【参考】:Visual Studio Code Detecting keybinding conflicts

キーボードショートカットの切り替え

Visual Studio Codeでは、キーマップ拡張が可能ですのでマーケットプレイスから希望するキーマップを取り込み、キーボードショートカットを変更することができます。例えば、VimやSublime Text・Atomなどのキーマップに置き換えることができます。

【参考】:Visual Studio Marketplace

具体的には、管理アイコンのメニューで「キーボード ショートカットを移行する...」をクリックすると、以下のようにマーケットプレイスからキーボードマップ変更のエミュレーションや設定のアプリが表示されます。

img_vscodeshort_07

 【図】:マーケットプレイスのキーボート変更のアプリや設定

キーボードショートカット一覧表

キーボードショートカットは、Windows・macOS・Linuxそれぞれ公式サイトに一覧掲載されておりPDFファイルをダウンロードすることができます。チートシートというわけでもありませんが、キーボード横に準備しておくと編集効率が上がりますので、大変おすすめです。

【参考】:Visual Studio Code Keyboard Shortcuts Reference - Windows 【参考】:Visual Studio Code Keyboard Shortcuts Reference - macOS 【参考】:Visual Studio Code Keyboard Shortcuts Reference - Linux

このリンクは事前準備せずとも、アプリの「ヘルプ」「キーボードショートカットの参照」からも表示させることができます。キーボードショートカットで、Ctrl+K Ctrl+Rを使っても表示可能です。

デフォルトのキーバインディング

img_vscodeshort_08

デフォルトのキーバインディングですが、「Basic Editing」「Rich Languages Editing」「Navigation」「Editor/Window Management」「File Management」「Display」「Search」「Search Editor」「Preferences」「Debug」「Tasks」「Extensions」など、カテゴリー別に多岐に渡ってあらかじめ設定されています。

【参考】:Visual Studio Code Default Keyboard Shortcuts

使用しないものも多いと思いますが、事前に理解しておくのが良いでしょう。以降では、使用頻度が高いショートカットについて解説します。macOSについては、WindowsのCtrlキーをCmdキーに置き換えてご理解ください。

基本操作のキーバインディング

基本操作で用いるキーバインディングは、以下の通りです。WindowsとLinuxは同一です。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・コマンドパレットを表示する:Ctrl+Shift+P、F1 ・クイックオープン、ファイルへ移動:Ctrl+P ・新しいウィンドウ/インスタンスを作成する:Ctrl+Shift+N ・ウィンドウ/インスタンスを閉じる:Ctrl+Shift+W  macOSでは、Cmd+Wとなります。 ・キーボードショートカットエディタの表示:Ctrl+K Ctrl+S 

位置の移動とスクロール操作のキーバインディング

位置の移動とスクロール操作のキーバインディングは、以下の通りです。上記同様、WindowsとLinuxは同一で、macOSはWindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・行を上下に移動する:Alt+ ↑ / ↓ ・一致する括弧にジャンプする:Ctrl+Shift+\ ・行をインデント/アウトデントする:Ctrl+] / [ ・行頭/行末に移動する:Home / End ・ファイルの先頭に移動する:Ctrl+Home  macOSでは、Cmd+↑となります。 ・ファイルの末尾に移動する:Ctrl+End  macOSでは、Cmd+↓となります。 ・行を上下にスクロールする:Ctrl+↑ / ↓  macOSでは、Ctrl+PgUp / PgDnとなります。 ・ページを上下にスクロールする:Alt+PgUp / PgDown  macOSでは、Cmd+PgUp / PgDownとなります。

コピー・削除操作のキーバインディング

コピー・削除操作のキーバインディングは、以下の通りです。Windowsを基準にしており、Linuxの差分とmacOSについても記載します。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・ラインをカットする(選択範囲が空白の場合):Ctrl+X ・線をコピーする(選択範囲が空白の場合):Ctrl+C ・行を上下にコピーする:Shift+Alt + ↑ / ↓  Linuxでは、キーバインドがマルチカーソルで使用されるため、該当ショートカットはありません。 ・行を削除する:Ctrl+Shift+K ・下の行を挿入する:Ctrl+Enter ・上の行を挿入する:Ctrl+Shift+Enter

コメントとコメントアウト操作のキーバインディング

コメントとコメントアウト操作のキーバインディングは、以下の通りです。Windowsを基準にしており、Linuxの差分についても記載します。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・行コメントを追加する:Ctrl+K Ctrl+C ・行コメントを削除する:Ctrl+K Ctrl+U ・行コメントとコメントアウトのトグル切り替え:Ctrl+/ ・ブロックコメントとコメントアウトのトグル切り替え:Shift+Alt+A  Linuxでは、Ctrl+Shift+Aとなります。

検索と置換のキーバインディング

検索と置換のキーバインディングは、以下の通りです。WindowsとLinuxは同一です。macOSは、WindowsのCtrlキーをCmdキーに置き換えて動作する場合は記載を省略します。

・検索:Ctrl+F ・置換:Ctrl+H  macOSでは、Cmd+Alt+Fとなります。 ・次を検索/前を検索:F3 / Shift+F3  macOSでは、Cmd+G /Shift+Cmd+Gとなります。 ・一致した検索結果の全出現箇所を選択する:Alt+Enter ・選択を次の検索一致に追加する:Ctrl+D ・最後の選択部分を次の検索マッチに移動する:Ctrl+K Ctrl+D

慣れ親しんだキーバインディングで開発効率を高めましょう

img_vscodeshort_09

Visual Studio Codeは、クロスプラットフォーム開発で用いられるソースコードエディタです。キーバインディングのカスタマイズ性が高く、人気の理由の1つになっています。職場と自宅、あるいは異なるプラットフォームで作業する場合には、開発環境の操作性を近づけるのが有効です。

キーバインディングのカスタマイズ機能を有効活用し、ソフトウェア開発の効率向上を図りましょう。

気になる人のTwitterをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

はじめて転職される方へ
IT・Webエンジニアの「よくある転職活動のお悩み」や「転職活動の流れ」とは?
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
エンジニア求人

編集部おすすめコンテンツ

はじめて転職される方へ
IT・Webエンジニアの「よくある転職活動のお悩み」や「転職活動の流れ」とは?
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT