COLUMN コラム

2023.5.29

VS Code 便利なショーットカットまとめ(Windows / Mac)

Visual Studio Code(以下VS Code)は2015年にリリースされて以来、多くの開発者に利用されているコードエディタです。
以前「VS Code おすすめプラグイン紹介」の記事で便利なプラグインをご紹介させていただきましたが、今回は、ショートカットキー(以下ショートカット)に焦点をあててご紹介します。
ショートカットはGUIから行える操作をキーボードで行えるようにしたものなので、全てを覚えなくても操作に支障はありませんが、普段繰り返しで行っているような作業は、ショートカットで実施することによって開発を効率化することができます。ぜひ参考にしていただけたら幸いです。

1. よく使うショートカット

こちらは非常に登場する機会が多いショートカットになります。
コピー&ペーストやアンドゥはもちろん、コーディングをしていて意外に多いのは「コメントアウト」の操作だと思うので、「Ctrl/cmd + /」は覚えておくと良いでしょう。

コピー Ctrl/cmd + C
切り取り Ctrl/cmd + X
貼り付け Ctrl/cmd + V
一つ前のファイルの状態に戻る(アンドゥ) Ctrl/cmd + Z
一つ先のファイルの状態に戻る(リドゥ) Ctrl/cmd + Shift + Z
コメントアウト Ctrl/cmd + /

2. 検索系のショートカット

ファイル内もしくはフォルダ全体の文字列の検索/置き換えをするショートカットです。
テキストの一括修正やファイルパスの一括修正で効果を発揮します。

現在いるファイル内での検索 Ctrl/cmd + F
現在いるファイル内での置換 Ctrl/cmd + option + F
フォルダ/ワークスペース全体での検索 Ctrl/cmd + Shift + F
フォルダ/ワークスペース全体での置換 Ctrl/cmd + Shift + H
ファイル検索 Ctrl/cmd + P
選択した単語を一括選択 Ctrl/cmd + Shift + L

「選択した単語を一括選択」は、検索と置換えに近い操作が行なえます。
単語を選択した状態で、「Ctrl/cmd + Shift + L」を入力すると、ファイル内の同じテキストが全て選択された状態になります。

【選択した単語を一括選択】

3. 移動系のショートカット

行の先頭/末尾へのカーソル移動と、行の移動は地味によく使うので覚えておくと良いでしょう。

先頭へ Ctrl/cmd + ↑
一番下へ Ctrl/cmd + ↓
行の先頭 or 最後へ移動 Ctrl/cmd + ←/→
行の移動 Alt/opt + ↑/↓

【行の移動】

4. その他のショートカット

「選択した行の複製」は、複数行の複製も可能なので、例えばdivで囲っている要素が増えた場合のレイアウトを確認したい、といった際に効率的に作業できます。

選択した行の複製 Alt/opt + Shift + ↑/↓
サイドバーの開閉 Ctrl/cmd + B

【選択した行の複製】

おわりに

今回はVS Codeでよく使うショートカットキーをご紹介しました。
基本的なものではありましたが、意外とGUIから行っている操作もあったのではないでしょうか?

VS Codeに限らず、ツールを使いこなす上でショートカットを知っているかいないかは、作業効率に影響してきます。
是非この機会にVS Codeや普段から使っているツールのショートカットを調べてみてください。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。
DOLに制作を相談する

表参道でWeb制作、
マーケティングするならDOL