今回は、ソースコードエディタのVSCode(Visual Studio Code)の便利なショートカットキーをまとめました。

mito

自分がよく使うな〜と思うものを中心にまとめているので随時更新していく予定です。

まずは、VSCodeとはどんなエディタなのか？というところから書くので、どのエディタを使うか悩んでいる方もぜひ参考にしてください。

VSCodeとは

2015年にマイクロソフトからリリースされたエディタです。
Windowsのほかに、Mac OS、Linux上でも動作します。

VSCodeの特徴

シンタックスハイライト

ソースコードの構造を視覚的に区別できるようにする表示機能のことです。
テキストの一部（構文）をわかりやすい色で表示します。

マルチカーソル機能

エディタ上で複数選択し、同時編集ができる機能です。以下を参考にさせていただきました。

マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜

mito

⌘Dで選択か⌘⇧Lで選択して一気に修正できます。

標準でEmmetがついてる

EmmetとはHTML/CSSの超強力な入力補完プラグインです。

mito

このEmmetがすごく便利でコードを書くスピードを上げてくれるということで使いはじめました。

覚えておくと便利なEmmetのショートカットキー紹介

基本的な使い方はこちらがすごく参考になります。

「はじめて」でも簡単！Emmetの使い方とよく使うパターン集

以下には少しスペルが紛らわしく覚える必要があるなと思ったものを書いています。

CSS編

その他チートシートはこちらEmmetのチートシート

VScodeのショートカットキー

【Mac版】 VisualStudioCode キーボードショートカット

こちらから特によく使うものをご紹介します！

コードを書く時に先に書いてあるコードをコピーすることがよくあるのですごくよく使います。

例えばHTMLでdivの中身を先に書いて後からdivで囲む時に便利です。

2列表示の場合の切り替えに便利です。

選択している行が長い場合も上記のショートカットで上下にコードを追加できます。

カーソルで選択しているコードと同じコードをすぐに検索できます。

momo

使いこなせるとコードを書くのが楽しくなるね！