CODING

Visual Studio Codeの便利なショートカットキー

こんにちは、mito@mito_works)です!

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

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

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

VSCodeとは

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

VSCodeの特徴

シンタックスハイライト

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

マルチカーソル機能

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

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

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

標準でEmmetがついてる

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

mito
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
momo
使いこなせるとコードを書くのが楽しくなるね!

 

ABOUT ME
mito
こんにちは!mitoです。 2児の母で、会社員。 現在は複業でWebデザイナーをしています。 2019年1月からWebデザインの勉強を始め、2020年11月までに完全フリーランスを目指しています。 チャレンジすることに、年齢とか経験とかママとか関係ない! 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。