【VSCode】まずはこれを覚えよう！初心者のためのショートカット２９選！【Mac/Win】

Visual Studio Code（以下、VSCode）では、作業を効率化できるショートカットが多数用意されています。ここでは、VSCodeのよく使うショートカットキーをご紹介します。どのソフトでもいえる事ですが、ショートカットキーを覚えると作業効率が一気に上がりますので、ぜひ覚えて使ってみてくださいね！最後に一覧を用意していますので、一気に確認したい方はそちらもご参照ください。

• 基本操作
• コーディング
• 文字の置き換え、検索
• 指定の場所へカーソルを移動
• 選択（複数選択・矩形選択）
• 基本ショートカット一覧

基本操作

まずは基本操作に関するショートカットをご紹介します。コーディングをしていると、タブの移動、ファイルの移動などが頻繁に行われます。基本操作のショートカットを覚えるだけでも、作業がかなりはかどりますよ。

ファイルを開く

• Mac : Cmd + O
• Win : Ctrl + O
  

新しいファイルを開く

• Mac : Cmd + N
• Win : Ctrl + N

エクスプローラーを開く

• Mac : Shift + Cmd + E
• Win : Ctrl + Shift + E
  

エクスプローラーとは、画面左にあるアクティビティバーの一番上のアイコンを開くとサイドバーに表示される項目で、現在開いているフォルダーや、ファイルを確認する事が出来ます。

ファイルの保存

• Mac : Cmd + S
• Win : Ctrl + S

名前を付けてファイルを保存

• Mac : Shift + Cmd + S
• Win : Ctrl + Shift + S

クイックオープンウィンドウ

• Mac : Cmd + P
• Win : Ctrl + P
  

クイックオープンウィンドウは、画面上部に開く入力窓でファイルを開いたり、指定した行にジャンプしたりする事が出来きます。ここで>と入力すると、コマンドパレットのようにVSCodeの機能を検索する事が出来ます。使い方はクイックオープンウィンドウで?を入力すると表示されます。

コマンドパレットを開く

• Mac : Cmd + Shift + P
• Win : Ctrl + Shift + P

クイックオープンウィンドウに>が表示された状態で入力窓が開きます。機能の検索やショートカットキーの確認をする場合は、こちらで開いて検索した方が早いです。

サイドバーの開閉

• Mac : Cmd + B
• Win : Ctrl + B

エディターの分割

Mac : Cmd + \、Win : Ctrl + \

タブの移動

• Mac : Ctrl + tab
• Win : Ctrl + tab
  

切り替えられるタブの候補が上部に表示されますので、矢印キーで選択します。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

コーディング

コーディングによく使うショートカットです。選択行の移動や削除、コピーなどは、地味によく使うショートカットです。カーソルの移動や文字の置き換えは別の項目をご覧ください。

選択行の移動

• Mac : Option + 矢印キー
• Win : Alt + 矢印キー
  

選択行の削除

• Mac : Cmd + Shift + K
• Win : Ctrl + Shift + K

選択行のコピー

• Mac : Option + Shift + 矢印キー
• Win : Alt + Shift + 矢印キー

行の移動、削除やコピーは、カーソルが置いてある行で判断しますので、行の全てを選択しなくても大丈夫です。ザクっと選択してキー操作してください。

カーソルの下に行を挿入

• Mac : Cmd + Enter
• Win : Ctrl + Enter
  

カーソルの上に行を挿入

• Mac : Shift + Cmd + Enter
• Win : Ctrl + Shift + Enter

選択行をコメント化

• Mac : Cmd + /
• Win : Ctrl + /

タグで囲う

wrap with abbreviationの機能を覚えておくと便利です。
CSSを書く時に「ここ、divで囲っておけば良かった」と後で書き足す事がありますよね。そういった時に一発でタグで囲う事が出来る機能です。

１. 囲みたい部分を選択

囲みたい部分を全て選択します。（カーソルがある行での実行ではありませんのでご注意ください。)

２. コマンドパレットを開いて、「wrap with abbreviation」を選択

「wrap」と入力すると候補で出てきます。

３. 入力窓が出てきますので、囲みたいタグを入力

Emmetの入力方法が使えますので、括弧は必要ありません。class付きのDivであれば.class名で入力出来ます。開始タグを入力してenterを押すと、閉じタグも自動で入力されます。

複数行を一括で囲う「wrap with abbreviation」と行ごとに囲う「Wrap Individual Lines with Abbreviation」がありますので、お気をつけください。

文字の置き換え、検索

文字の置き換えや検索は、作業しているファイルだけでなくワークスペース全体でも行う事が出来ます。用途に応じて使い分けましょう。

文字の置き換え

• Mac : Option + Cmd + F
• Win : Ctrl + H

文字の検索

• Mac : Cmd + F
• Win : Ctrl + F

文字の置き換えや検索は、キー操作を行ってから文字列を入力して実行する方法と先に文字列を選択してから実行する方法があります。文字列を先に選択してから実行すると、入力窓に文字列が表示された状態で実行する事が出来ます。

ワークスペース全体を置換

• Mac : Shift + Cmd + H
• Win : Ctrl + Shift + H

ワークスペース全体を検索

• Mac : Shift + Cmd + F
• Win : Ctrl + Shift + F

指定の場所へカーソルを移動

キーボードから手を離して、マウスに持ち替えカーソルを移動・・・。すごく面倒ですよね。ちょっとした事でも、数が多くなると結構なタイムロスです。ここもショートカットを覚えて、効率化しましょう！

文字の先頭へジャンプ

Mac : Home、Win : Home

文字の最後へジャンプ

Mac : End、Win : End

行を指定してジャンプ

• Mac : Ctrl + G
• Win : Ctrl + G
  

クイックオープンウィンドウに、行指定の:が入力された状態で入力窓が開きます。指定行の数字を入力するとジャンプ出来ます。

ファイルの先頭へジャンプ

• Mac : Cmd + Home
• Win : Ctrl + Home
  

ファイルの最後へジャンプ

• Mac : Cmd + End
• Win : Ctrl + End
  

対の括弧にジャンプ

• Mac : Shift + Cmd + \
• Win : Ctrl + Shift + \
  

SassやJavaScriptなどは、対となる括弧が離れた場所にある場合が多々あります。括弧にジャンプも覚えておくと便利ですよ。

選択（複数選択・矩形選択）

VSCodeでは選択箇所を同時に編集できる、マルチカーソルの機能が使えます。
マルチカーソルを使う上で、選択系のショートカットは覚えておくととても役に立ちますよ。

任意の場所を複数選択

• Mac : Option + click
• Win : Alt + Click

同じ文字列を複数選択

• Mac : Cmd + D
• Win : Ctrl + D
  

矩形選択

• Mac : Shift ＋ Option ＋ Cmd ＋ 矢印キー
• Win : Ctrl + Shift + Alt + 矢印キー
  

矩形選択（くけいせんたく）とは長方形に選択する事です。
通常の選択では、別の行に入ると開始位置から選択されますが、矩形選択では、別の行に入っても行の途中から選択する事ができます。

基本ショートカット一覧

こちらでは、一般的によく使うショートカットをご紹介しました。

VScodeのショートカットは、まだまだ沢山あります。ショートカット一覧は、「メニューバー」の「ヘルプ」から「キーボードショートカットの参照」を選ぶとブラウザで確認する事ができます（英語表記）。使いにくいショートカットや違うショートカットが欲しい場合は、キーバインドで、どんどん編集していきましょう！