BLOG ブログ

技術情報 2023/04/07

覚えておくと便利なVS Codeのショートカットキー

zeroichi

ゼロイチにてバックエンド開発を担当しておりますOと申します。
ゼロイチにジョインして早３ヶ月が経ちました。前職はWeb開発とは異なるレガシーな環境で開発していたため、日々新しい発見の毎日です。

さて、Web開発についてはブログに書くほどに知見が溜まっておりませんので、、
Web開発初心者目線で記事を書いてみようと思います。

今回はWebエンジニアの中でも人気のエディタの一つであるVS Codeのショートカットキーについてまとめてみます。コピーアンドペーストのような超基本のものは除いて、実際の開発で良く使うものを選んでいます。
同じWeb開発初心者の方々の助けになれば幸いです。

それでは早速紹介していきます!

まずは基本操作で使うものを紹介していきます。

Mac: Cmd + K のあとに Cmd + S
Win: Ctrl + K のあとに Ctrl + S

VS Codeの設定によっては下記に記載しているショートカットキーが当てはまらない場合があると思います。
その場合はショートカットキーの一覧を表示して確認してみてください。
また、一覧を眺めてると便利なショートカットキーを見つけられそうですね。

Mac: Cmd + Shft + P
Win: Ctrl + Shft + P

コマンドパレットは様々な操作を実行するためのコマンドを一覧表示し、ユーザーが選択して実行することができる機能です。

VS Codeではなく、MacのターミナルやWindowsのコマンドプロンプトでgit cloneとかした時にそのフォルダを直接VS Codeで開きたい場合があります。

【ターミナル/コマンドプロンプトでの作業】
基本は「code」と入力してエンターキーを押せばVS Codeに遷移します。

code .

上記のように入力するとカレントディレクトリをVS Codeで開けます。

【VS Codeでの作業】
上記でcodeコマンドが見つからないと表示される場合は、
初回だけ以下を実施する必要があります。

Mac: Cmd + Shft + P
Win: Ctrl + Shft + P
でコマンドパレットを表示
検索ボックスに「shell」と入力
「シェルコマンド:PATH内に'code'コマンドをインストールする(Shell Command: install 'code' command in PATH)」
を選択してインストール