【便利!】VSCode: コメントアウトしてくれるショートカットキー
Visual Studio Codeを使ってHTMLを記述している時に、 「簡単にコメントアウトできる機能はないかな？」と探していたら、 ショートカットがありました。
- 「Ctrl + / 」（行コメント）
- 「Shift + Alt + a 」（ブロックコメント）
この２つです。(Windows環境)
コメントアウトだけでなくアンコメントもできます。
HTMLとCSSの場合は「Ctrl + / 」だけで複数行コメントアウトにも対応しています。
これは便利すぎて、知らないと損レベルのショートカットキーです。
キーボードショットカットを見てみる
メニューの「ファイル」 ⇒ 「基本設定」 ⇒ 「キーボードショートカット」を選択して ショートカット一覧を表示します。
画面上部の検索ボックスに「コメント」と入力すると、 コメントに関するショートカットキーが表示されます。 「ブロックコメントの切り替え」、「行コメントの切り替え」と表示されている部分です。
ショートカットキーを変更したい場合はここから変更してください。
HTMLのコメントアウト
HTMLの場合は、「Ctrl + / 」で複数行、単一行どちらもコメントアウト・アンコメントができます。
次のリスト部分をコメントアウトしてみます。
コメントアウトしたい部分を選択
「Ctrl + / 」を押すと、
次のようにコメントアウトされます。
さらに「Ctrl + / 」を押すと、アンコメントとなります。
見た目をよくするために、ちょっと一工夫
先程のリストを選択するときに、上下１行ずつ多く選択します。
この状態で「Ctrl + / 」を押すと、 次のようにコメントアウトされます。
好みの問題ですが、 私は２番目のコメントアウトの方が見やすいので、 上下１行ずつ余分に選択するようにしています。
1行コメントの場合は？
1行コメントの場合は選択状態にする必要はありません。
コメントアウトしたい行にカーソルを持ってきて 、「Ctrl + / 」を押せばコメントアウト・アンコメントされます。
CSSのコメントアウト
CSSの場合もHTMLと同じように、「Ctrl + / 」で複数行、単一行どちらもコメントアウト・アンコメントができます。
下のdiv要素のスタイル設定を丸々コメントアウトします。
div要素部分を選択して
「Ctrl + / 」を押すと
次のようにコメントアウトされます。
1行だけコメントアウト
特定のプロパティ部分だけコメントアウトしたい場合もよくありますよね。
コメントアウトしたい行にカーソルをもってきます（例 font-size）。
「Ctrl + / 」を押すと、次のようにコメントアウトされます。
JavaScriptのコメントアウト
JavaScriptの場合は、「Ctrl + / 」（行コメント）と、 「Shift + Alt + a 」（ブロックコメント）の両方を使い分けます。
それぞれの違いを見てみましょう。
まず、コメントアウトする部分を選択。
「Ctrl + / 」を押すと、次のように行コメント「//」が行数分だけ挿入されます。
「Shift + Alt + a 」の場合は、ブロックコメント「/* */」が挿入されます。
ケースに応じて行コメント「//」とブロックコメント「/* */」を使い分けてください。
PHPのコメントアウト
PHPもJavaScriptと同じです。
「Ctrl + / 」（行コメント）と、 「Shift + Alt + a 」（ブロックコメント）の両方を使い分けます。
まとめ
以上からわかることは、
HTMLやCSSのように、 もともと１種類しかコメントアウトの方法がない場合は、 「Ctrl + / 」だけでOKで、
JavaScriptやPHPのように、言語自体に行コメントとブロックコメントの両方がある場合は、 「Ctrl + / 」、「Shift + Alt + a 」で使い分ける。
こういう仕様だと思います。
ここで紹介したコメントアウト・アンコメントの機能はとても便利な機能なので、ぜひ使ってみてください。