【初心者向け】覚えておきたいVSCode(ビジュアルスタジオコード)のショートカット

keys-gcf4a12382_640 VSCode

プログラミングの作業を速くする為にはキーボードの操作を速くするのが手っ取り早いです。
頭の回転を速くするのは時間が掛かるし、個人差もありますよね。
でも、キーボードの操作を速めるのは慣れなので時間と共に改善していきます。

指が早く動く様になればそれだけでも自信が付きますしね。
初めからショートカットを使う様にする事で更にキータッチ数を減らす事も出来るから~
よりスピードアップ出来るようになりますよ。

この機会にどんどんと覚える様にしましょうね~

このページでは初心者さんが仕事が速くなれる様にショートカットを使う事をオススメしています。
マウスを使った作業というのは視覚的には直感的で分かり易い反面、スピードが速くなっていかないという事があります。
キーボードだけで作業する方が頭の中を迷いなくサクっと表現していき易いです。

初心者のうちから意識してショートカットを使いこなしていけばいつかきっとvscodeスターに昇りつめられるでしょう!
(爺さん、なに言ってんの?(;^ω^))
とにかく冗談はこれだけにして、お伝えしていきたいと思います~!

目指そう!vscodeスター!!(しつこい(^’^))

Visual Studio Codeの「ショートカット」機能について(Windows版)

以下のショートカットはWindowsパソコンでの操作になります。
Macパソコンだと同じには使えません。
でも、「Ctrlキー」の変わりに「Commandキー」を使うと使えるものもありますよ。

ちなみに私の開発環境は古いパソコンですがねvscodeの32ビット版で使えています。

(開発環境)
OS:windows10
パソコン:windows VISTA 世代の32ビット富士通製パソコン

それではお伝えしていきます。

Visual Studio Codeでの「ファイル操作」ショートカット

新規ファイルの作成 Ctrl+N
ファイル保存 Ctrl+S

Visual Studio Codeでの「Window(ウィンドウ)の操作」ショートカット

タブの移動 Ctrl+Tab
サイトバーの表示 Ctrl+B

ビジュアルスタジオコードでの「基本的な編集作業」に使うショートカットはこれ!

VSCodeでの「端までカーソル移動」ショートカット

行の先頭に移動 Home
行の最後に移動 End
文章の先頭に移動 Ctrl+Home
文章の最後に移動 Ctrl+End

VSCodeでの「カーソル位置からの範囲を選択」ショートカット

この操作はShiftキーを押しながら「端までカーソル移動」を行う事で出来ます。

現在のカーソル位置から行の先頭までを選択 Shift+Home
現在のカーソル位置から行の最後までを選択 Shift+End
現在のカーソル位置から文章の先頭までを選択 Shift+Ctrl+Home
現在のカーソル位置から文章の最後までを選択 Shift+Ctrl+End

VSCodeでの「コメントアウト(プログラミング時)」ショートカット

カーソルのある行をコメントにする Ctrl+/

プログラムに合わせたコメントに変えてくれる(自動的に判別)
HTMLなら「<!–  –>」となり
CSSなら「/*  */」となる

VSCodeでの「元に戻す」ショートカット

修正したけどもヤッパリやめたい Ctrl+Z

VSCodeでの「やり直し(再び修正したものにする)」ショートカット

Ctrl+Zで修正を戻したけどやっぱり修正のままでいい Shift+Ctrl+Z

VSCodeでの「編集行を追加する」ショートカット

カーソルのある行の下に1行追加する Ctrl+Enter
カーソルのある行の上に1行追加する Shift+Ctrl+Enter

VSCodeでの「文字列操作」ショートカット

切り取り(範囲指定してから) Ctrl+X
コピー ( 範囲指定してから) Ctrl+C

VSCodeでの「行の操作」ショートカット

カーソルのある1行を切り取る (範囲指定なしで) Ctrl+X
カーソルのある1行をコピー  (範囲指定なしで) Ctrl+C

VSCodeでの「貼り付け(ペースト)」ショートカット

現在のカーソル位置から貼り付ける Ctrl+V

(注意)行でコピーされているならカーソルのある行の下に張り付く

VSCodeでの「行まるごと移動」ショートカット

カーソルのある行の位置を動かす Alt+↑(または)↓

VSCodeでの「行まるごと複製(コピー)」ショートカット

カーソルのある行と同じものを下に追加 Shift+Alt+↓
カーソルのある行と同じものを上に追加 Shift+Alt+↑

この操作はShiftキーを押しながら上記「行まるごと移動」を行う事で出来ます。

ビジュアルスタジオコードでの「一括編集」に役立つシートカットはこれです!

VSCodeでの「マルチカーソル」ショートカット

一度に複数行で上記「基本的な編集作業」が
行える
様になる
Ctrl+Alt+↓(または)↑

VSCodeでの「検索/置換ウィンドウ」ショートカット

エディターで開いているファイルの全てから
キーワードを検索できる
Ctrl+F

検索ボックスの左端”>”をクリックで置き換える文字を指定出来る

【おまけ】VSCodeでの「詳細検索/置換(ファイル指定とかこのファイルは対象外とかできる)」

これだけはショートカットではないです。でも上の「検索/置換ウィンドウ」に関連しているのでご紹介しておきますね。

アクティビティバーの検索アイコン(虫メガネ)をクリックしてから
サイドバー「…」をクリック 検索ボックスの左端”>”をクリックで置き換える文字を指定できる

メタ文字の使用が出来る 0~5までの数字を検索 [0-5]
その他もある

まとめ

今回は

初心者さんが知っておきたいvscodeのショートカットについて

をお伝えしました。
この他にもまだまだ沢山のショートカットは存在していますけどね。
この位を取り合えず覚えておくと作業を効率よく速くしていけるのではないでしょうか。

一歩ずつ歩いて行けば必ず先に進める!

立ち止まらない事を意識してvscodeを使い続けてくださいませ~

それではこの辺で~

ここまで読んで頂きまして誠にありがとうございました。
嬉しい楽しいついてます。
感謝

泉水善光

↓↓↓↓↓↓ WEB版のVSCodeはとっても良いですね~
ブラウザーで使えるからOS毎にインストールしないで済むのが超便利です~
開いたらスグに作業に入れますよ~ ↓↓↓↓↓

コメント

タイトルとURLをコピーしました