おすすめツール&サービス

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編

dibdisplay: inline-block;
fz20font-size: 20px;
p2-8-2-8padding: 2px 8px 2px 8px;
bd+border: 1px solid #000;
bsh0-0-3-0#000box-shadow: 0 0 3px 0 #000000;
bdrs4border-radius: 4px;
psrposition: relative;
psaposition: absolute;
tactext-align: center;
tftransform:
trstransition:

その他チートシートはこちら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年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。