VS Code よく使う ショートカット一覧 (for Windows)

VS Code ショートカットキー Windows VS Code
記事内に広告が含まれています。
スポンサーリンク

今回は、VS Codeの基本的な操作、「ショートカット」についてご紹介させて頂きます。

プログラミングを行う上でとても重要になるのが、「正確性」と「作業効率」です。

これらを確実なものにするためにショートカットを使うことは大変重要ですので、ぜひこの機会に覚えてみてください。

これからプログラミングを始めようとしている方は、画面に記載されているHTMLについて理解する必要はありません。

ショートカットキーを使うと何が出来るのかだけを理解して、あとは実際の操作に合わせて覚えていってください。

学習をしながら操作をしていれば、自然と身についてしまうと思います。

スポンサーリンク

ショートカットキーを覚えよう

VS Codeに限ったことではありませんが、ソフトを使って作業をするときに、絶対に覚えておいて欲しいのが「ショートカットキー」での操作です。

普段Macを使っている方は、比較的ショートカットキーに慣れている方が多いのですが、Windowsを使っている方は、エクセルやワードを使いこなせるような方でも、ショートカットキーをあまり使用されない方が多い印象です。

プログラミングにおいて、作業の効率化、コードを書くときの作業時間の短縮(時短)はとても重要な要素ですので、ぜひこの機会に覚えてしまいましょう。

スポンサーリンク

ショートカットキー一覧

基本操作

ショートカットキー動作
Ctrl+N新規ファイルの作成
Ctrl+Sファイルの保存
Ctrl+Z元に戻る
Ctrl+Shift+Z元に戻したものをめる
Ctrl+Shift+S名前を付けて保存
Ctrl+Tabタブの移動
Ctrl+Wタブを閉じる
Ctrl+Bサイドバーの開閉
Ctrl+Cコピー
Ctrl+Vペースト
Ctrl+X切り取り
shift+Alt+Cパスのコピー
Alt+行の移動
Ctrl+Enter改行
Ctrl+/コメントアウト
Ctrl+D複数範囲選択
Ctrl+Pファイル検索
Ctrl+,設定を開く

カーソル関連

ショートカットキー動作
Ctrl+Homeファイル内の最上部へ移動
Ctrl+Endファイル内の最下部に移動
Homeテキストの先頭に移動
Endテキストの最後移動
上記の動作+Shift移動した部分まで選択
Shift+ 移動した部分まで選択
Ctrl+Alt+ マルチカーソル機能

検索関連

ショートカットキー動作
Ctrl+F検索
Ctrl+Shift+F横断検索
F12定義元を参照
Alt+F12定義をここに表示
Shift+F12リファレンスを表示
Ctrl+Shift+P
又は
F1
コマンドパレットを表示

修正関連

ショートカットキー動作
Ctrl+.クイックフィックス
F2シンボル名の変更
Ctrl+F2すべての単語を同時選択
Ctrl+Shift+M問題タグの開閉
Shift+Alt+Fフォーマット

フォーマットは個人的に、最もお勧めのショートカットキーの一つです。

新規ファイルと保存

新規ファイルの作成

Ctrl+Nで新規ファイルを作成します。

ファイルを保存する

Ctrl+Sでファイルを保存します。

新規ファイルに対して操作したので「名前を付けて保存」画面が表示されていますが、すでに作成したファイルに対して操作を行うと上書き保存されます。

すでに作成したファイルに対して、別の名前で保存したい時は、Ctrl+Shift+Sを押してください。

タブの移動

タブを移動する

Ctrl+Tabでタブを移動します。

画面上部に現在開いているタブが表示されますので、移動したいタブを選択します。

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

サイドバーの表示・非表示を操作する

Ctrl+Bでサイドバーの開閉をすることが出来ます。

Ctrl+Zで元に戻ります。

タイプミスをしたときや間違って入力したときに有効です。

Ctrl+Shift+Zで元に戻したものを取りやめます。

Ctrl+Zで戻ったけどやっぱり止めたいときなどに活躍します。

カーソルの移動方法

カーソルの移動方法

カーソルの移動方法です。

画面では少し分かりにくいと思いますので、実際に操作して確認してください。

  • Ctrl+Home:ファイル内の最上部に移動します。
  • Ctrl+End:ファイル内の最下部に移動します。
  • Home:テキストの先頭に移動します。
  • End:テキストの最後に移動します。

上記の操作にShiftを加えるとカーソルのある位置から移動場所までの範囲を選択することが出来ます。

こちらも実際に操作して確認しておいてください。

選択しながらカーソルを移動する

選択しながらカーソルを移送させる

画像では少し分かりにくいのですが、</head>の後ろにカーソルがある状態で、shiftを押しながらカーソルを動かすと動かした範囲を選択してくれます。

文字では伝わりにくいので、実際に操作してみてください。

行のコピーアンドペースト

行をコピーする

Ctrl+Cで行をコピーします。

通常、ワードやエクセル、ブラウザでキーワードなどをコピーする時は、コピーしたい範囲を選択して、Ctrl+Cを押しますが、VS Codeの場合は範囲を選択する必要がありません。

但し、行にある個別の単語や範囲をコピーしたい場合は選択する必要があります。

行を貼り付けます

Ctrl+Vでペーストします。

1行まるごとコピー&ペーストされました。

Ctrl+Xを押すと、切り取って貼り付けることが出来ます。

行の移動

行を移動させます

Alt+を押すと行を上下に移動することが出来ます。

9行目の<title>Document</title>を12行目までに移動させるには、カーソルを9行目のどこかに置いて、Altを押しながらを3回押せば移動出来ます。

また同時にAltを押しながら操作すると移動した分だけ行がコピーされます。

こちらは実際に操作して確認してください。

改行

改行する方法

Ctrl+Enterを押すと改行します。

特徴的なのは、文の途中にカーソルがある場合でも改行することが出来ます。

画面では、contentの前にカーソルがありますが、この状態でCtrl+Enterを押すと下に新しく1行追加されます。

また同時にShiftを押すと上に改行(1行追加)することが出来ます。

コメントアウト

コメントアウトの入力

Ctrl+/を押すとコメントアウトすることが出来ます。

<!–  –>と自動で入力されます。

ここではHTMLファイルを使用していますが、他の形式であれば、それぞれに沿ったコメントアウトが表示されます。

もう一度、Ctrl+/を押すとコメントアウトが外れます。

複数範囲選択

複数範囲を選択する

Ctrl+Dで複数範囲選択をすることが出来ます。

「color」の前後でCtrl+Dを押すと、まず最初の「color」を選択します。

この時点では下の「color」は候補になっている状態です。

続けてもう一度、Ctrl+Dを押すと下の「color」も選択されるようになります。

複数の場所を選択した状態で、削除や文字入力をするとすべての場所に適用されます。

複数範囲選択 2

複数範囲選択

先程は同じテキストを複数選択する方法をご紹介させて頂きましたが、こちらは違うテキストを複数選択する方法になります。

「section」内のすべての「id」を選択したい場合、Altキーを押しながら、それぞれの「id」を選択していきます。

すべての「id」を選択したら、コピーして、他のファイルに貼り付けます。

JavaScriptで変数や定数を定義する時に活躍します。

スポンサーリンク

まとめ

実際のコーディング作業で必要となるショートカットキーは概ねご紹介させて頂いておりますが、最初からすべてを覚えようとする必要はありません。

実際の作業の中で使ってみれば、自然と覚えてしまうと思います。

またすべての作業をショートカットを使うのが良いと言うわけでもありません。

作業によってはマウスを使った方が良い場面もあると思いますので、まずは色々と試して頂いてご自身のあった方法を見つけ出してください。

今回も最後までお読み頂きありがとうございました。

プログラミング言語の人気オンラインコース
ウェブ開発の人気オンラインコース
VS Code
スポンサーリンク
シェアする
JIROをフォローする

コメント