WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かなでん
カテゴリー： マークアップ >作業効率化

普段VSCodeでマークアップをしていて、こんなふうに思ったことはありませんか？

「ショートカットキーがあるはずだけど、なんとなくマウスで操作してしまっている」
「もっと早くできるはずなのに、思ったより時間がかかってしまう」

ショートカットキーを活用することで、普段の作業効率や質を上げる手助けになるかもしれません。

今回は、覚えておいて損はない、便利なショートカットキー16選をご紹介いたします。

複数選択・編集

Ctrl+D　同じ文字列を順に選択

Ctrl+Dは、カーソル上にある文字列と同じ文字列を、順番に1つずつ選択できるショートカットです。

クラス名やタグをまとめて編集したいときに便利です。Ctrl+Dを押すたびに次の一致箇所が選択されるため、必要な箇所だけを選んで一括編集できます。

Ctrl+Shift+L　同じ文字列をすべて選択

Ctrl+Shift+Lは、選択している文字列と同じものをファイル内からすべて選択できるショートカットです。

Ctrl+Dと同じく一括編集に便利ですが、Ctrl+Dは一致箇所を順番に選択するのに対し、Ctrl+Shift+Lは一致するすべての文字列を一度に選択する点が異なります。

一部だけ編集したい場合はCtrl+D、すべてまとめて編集したい場合はCtrl+Shift+Lがおすすめです。

Alt+クリック　カーソルを複数配置

Alt+クリックは、任意の位置に複数のカーソルを配置できるショートカットです。

Ctrl+DやCtrl+Shift+Lのように同じ文字列を選択するのではなく、自由な位置へカーソルを追加できます。

そのため、文字列が一致していない箇所でも、離れた場所を同時に編集できます。

行編集・操作

Ctrl+L　行全体を選択

Ctrl+Lは、カーソルがある行全体を選択できるショートカットです。

マウスでドラッグしたり、Ctrl+Shift+→/←で少しずつ範囲選択したりするよりも、素早く行全体を選択できます。

Alt+↑/↓　行を上下に移動

Alt+↑/↓は、カーソルがある行を上下へ移動できるショートカットです。

行の順番を入れ替えたいときでも、切り取りや貼り付けをすることなく簡単に移動できます。

Alt+Shift+↑/↓　行を上下に複製

Alt+Shift+↑/↓は、カーソルがある行を上下へ複製できるショートカットです。

同じようなコードを続けて作成したい場合に便利で、コピー＆ペーストよりも素早く複製できます。

Ctrl+Shift+K　行を削除

Ctrl+Shift+Kは、カーソルがある行をまるごと削除できるショートカットです。

不要なコードをすぐに削除できるため、編集作業をスムーズに進められます。

Ctrl+X　行を切り取り

Ctrl+Xは、カーソルがある行全体を切り取れるショートカットです。

切り取った行はCtrl+Vで任意の場所へ貼り付けられます。

Ctrl+Enter　下に改行を挿入

Ctrl+Enterは、カーソルがある行の下に新しい行を挿入するショートカットです。

カーソルを行末まで移動する必要がないため、入力の流れを止めずに編集できます。

Ctrl+Shift+Enter　上に改行を挿入

Ctrl+Shift+Enterは、カーソルがある行の上に新しい行を挿入するショートカットです。

カーソルを行頭まで移動する必要がないため、スムーズにコードを書き進められます。

検索・移動

Ctrl+P　クイックオープン

Ctrl+Pは、ファイル名を入力して目的のファイルを開けるショートカットです。

ファイル数が多かったり、階層が深かったりするプロジェクトでは特に便利です。エクスプローラーを何度も開いて探す手間を省けます。

Ctrl+Shift+F　プロジェクト全体を検索

Ctrl+Shift+Fは、現在開いているファイルだけでなく、プロジェクト全体から文字列を検索できるショートカットです。

VSCode左側の虫眼鏡アイコンからも利用できますが、ショートカットを覚えておくと、よりスムーズに検索できます。

Ctrl+Shift+H　プロジェクト全体を置換

Ctrl+Shift+Hは、プロジェクト全体から文字列を検索し、一括で置換できるショートカットです。

Ctrl+Shift+Fとセットで覚えておくと、検索から置換までスムーズに行え、マウス操作を減らすことができます。

Ctrl+G　指定した行へ移動

Ctrl+Gは、指定した行番号へ瞬時に移動できるショートカットです。

目的の行番号が分かっていれば、スクロールする手間を省けます。特に、エラーメッセージに表示された行番号へすぐ移動したいときに便利です。

コード整形

Ctrl+Shift+[/]　コードを折り畳む・展開する

Ctrl+Shift+[ はコードを折り畳み、Ctrl+Shift+] は折り畳んだコードを展開できるショートカットです。

編集していない部分を一時的に折り畳むことで、必要な箇所だけを表示でき、長いコードでも全体の構造を把握しやすくなります。

Shift+Alt+F　コードを自動整形

Shift+Alt+Fは、コード全体のインデントや改行位置を自動で整形できるショートカットです。

インデントが崩れてしまった場合でも、読みやすい状態へすぐに整えられます。HTMLやCSS、JavaScriptなど、さまざまな言語に対応しています。

まとめ

今回は、VSCodeで作業効率を高められる便利なショートカットキーを16選ご紹介しました。

ショートカットキーを活用すると、単純な操作にかかる時間を減らし、コーディングそのものに集中しやすくなります。
小さな効率化の積み重ねが、日々の開発や学習をより快適にしてくれるはずです。

気になったショートカットキーがあれば、ぜひ今日から取り入れてみてください。