こんにちは、mito（@mito_works）です！
今回は、ソースコードエディタのVSCode(Visual Studio Code)の便利なショートカットキーをまとめました。
mito
自分がよく使うな〜と思うものを中心にまとめているので随時更新していく予定です。
まずは、VSCodeとはどんなエディタなのか？というところから書くので、どのエディタを使うか悩んでいる方もぜひ参考にしてください。
スポンサーリンク
Contents
VSCodeとは
2015年にマイクロソフトからリリースされたエディタです。
Windowsのほかに、Mac OS、Linux上でも動作します。
VSCodeの特徴
シンタックスハイライト
ソースコードの構造を視覚的に区別できるようにする表示機能のことです。
テキストの一部（構文）をわかりやすい色で表示します。
マルチカーソル機能
エディタ上で複数選択し、同時編集ができる機能です。以下を参考にさせていただきました。
マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜
mito
⌘Dで選択か⌘⇧Lで選択して一気に修正できます。
標準でEmmetがついてる
EmmetとはHTML/CSSの超強力な入力補完プラグインです。
mito
このEmmetがすごく便利でコードを書くスピードを上げてくれるということで使いはじめました。
覚えておくと便利なEmmetのショートカットキー紹介
基本的な使い方はこちらがすごく参考になります。
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集
以下には少しスペルが紛らわしく覚える必要があるなと思ったものを書いています。
CSS編
| dib | display: inline-block; |
|---|---|
| fz20 | font-size: 20px; |
| p2-8-2-8 | padding: 2px 8px 2px 8px; |
| bd+ | border: 1px solid #000; |
| bsh0-0-3-0#000 | box-shadow: 0 0 3px 0 #000000; |
| bdrs4 | border-radius: 4px; |
| psr | position: relative; |
| psa | position: absolute; |
| tac | text-align: center; |
| tf | transform: |
| trs | transition: |
その他チートシートはこちらEmmetのチートシート
VScodeのショートカットキー
【Mac版】 VisualStudioCode キーボードショートカット
こちらから特によく使うものをご紹介します！
| ⌘K ⌘Q | 最後の編集位置に移動 |
|---|
コードを書く時に先に書いてあるコードをコピーすることがよくあるのですごくよく使います。
| ⌘K ⌘U | コメント追加 |
|---|---|
| ⌘/ | 行コメント記号をトグル |
| ⇧⌘K | カーソル行削除 |
| ⇧⌥↓ | カーソル行を下にコピー |
| ⌘↑ | ファイルの先頭に移動 |
| ⌘↓ | ファイルの末尾に移動 |
| ⌥↑ | カーソル行を上にコピー |
|---|---|
| ⌥↓ | カーソル行を下にコピー |
例えばHTMLでdivの中身を先に書いて後からdivで囲む時に便利です。
| ⌘1 | 左のエディターにフォーカス |
|---|---|
| ⌘2 | 右のエディターにフォーカス |
| ⌘B | サイドバー表示のトグル |
2列表示の場合の切り替えに便利です。
| ⌘Enter | 下に行追加 |
|---|---|
| ⇧⌘Enter | 上に行追加 |
選択している行が長い場合も上記のショートカットで上下にコードを追加できます。
| ⌘G | 次を検索 |
|---|---|
| ⇧⌘G | 前を検索 |
カーソルで選択しているコードと同じコードをすぐに検索できます。
momo
使いこなせるとコードを書くのが楽しくなるね！
ABOUT ME
スポンサーリンク
スポンサーリンク
