【便利!】VSCode: コメントアウトしてくれるショートカットキー

Visual Studio Codeを使ってHTMLを記述している時に、 「簡単にコメントアウトできる機能はないかな?」と探していたら、 ショートカットがありました。

  • 「Ctrl + / 」(行コメント)
  • 「Shift + Alt + a 」(ブロックコメント)

この2つです。(Windows環境)

コメントアウトだけでなくアンコメントもできます。

HTMLとCSSの場合は「Ctrl + / 」だけで複数行コメントアウトにも対応しています。
これは便利すぎて、知らないと損レベルのショートカットキーです。

キーボードショットカットを見てみる

メニューの「ファイル」 ⇒ 「基本設定」 ⇒ 「キーボードショートカット」を選択して ショートカット一覧を表示します。

画面上部の検索ボックスに「コメント」と入力すると、 コメントに関するショートカットキーが表示されます。 「ブロックコメントの切り替え」、「行コメントの切り替え」と表示されている部分です。

キーボードショートカット

ショートカットキーを変更したい場合はここから変更してください。

HTMLのコメントアウト

HTMLの場合は、「Ctrl + / 」で複数行、単一行どちらもコメントアウト・アンコメントができます。

次のリスト部分をコメントアウトしてみます。

リスト

コメントアウトしたい部分を選択

コメントアウトしたい部分を選択

「Ctrl + / 」を押すと、

次のようにコメントアウトされます。

コメントアウト

さらに「Ctrl + / 」を押すと、アンコメントとなります。

リスト

見た目をよくするために、ちょっと一工夫

先程のリストを選択するときに、上下1行ずつ多く選択します。

上下1行ずつ多く選択

この状態で「Ctrl + / 」を押すと、 次のようにコメントアウトされます。

コメントアウト2

好みの問題ですが、 私は2番目のコメントアウトの方が見やすいので、 上下1行ずつ余分に選択するようにしています。

1行コメントの場合は?

1行コメントの場合は選択状態にする必要はありません。

コメントアウトしたい行にカーソルを持ってきて 、「Ctrl + / 」を押せばコメントアウト・アンコメントされます。

CSSのコメントアウト

CSSの場合もHTMLと同じように、「Ctrl + / 」で複数行、単一行どちらもコメントアウト・アンコメントができます。

下のdiv要素のスタイル設定を丸々コメントアウトします。

div要素のスタイル設定

div要素部分を選択して

div要素部分を選択

「Ctrl + / 」を押すと

次のようにコメントアウトされます。

コメントアウト

1行だけコメントアウト

特定のプロパティ部分だけコメントアウトしたい場合もよくありますよね。

コメントアウトしたい行にカーソルをもってきます(例 font-size)。

行にカーソル

「Ctrl + / 」を押すと、次のようにコメントアウトされます。

CSS 1行 コメントアウト

JavaScriptのコメントアウト

JavaScriptの場合は、「Ctrl + / 」(行コメント)と、 「Shift + Alt + a 」(ブロックコメント)の両方を使い分けます。

それぞれの違いを見てみましょう。

まず、コメントアウトする部分を選択。

JavaScriptの場合

「Ctrl + / 」を押すと、次のように行コメント「//」が行数分だけ挿入されます。

行コメント

「Shift + Alt + a 」の場合は、ブロックコメント「/* */」が挿入されます。

ブロックコメント

ケースに応じて行コメント「//」とブロックコメント「/* */」を使い分けてください。

PHPのコメントアウト

PHPもJavaScriptと同じです。

「Ctrl + / 」(行コメント)と、 「Shift + Alt + a 」(ブロックコメント)の両方を使い分けます。

まとめ

以上からわかることは、

HTMLやCSSのように、 もともと1種類しかコメントアウトの方法がない場合は、 「Ctrl + / 」だけでOKで、

JavaScriptやPHPのように、言語自体に行コメントとブロックコメントの両方がある場合は、 「Ctrl + / 」、「Shift + Alt + a 」で使い分ける。

こういう仕様だと思います。

ここで紹介したコメントアウト・アンコメントの機能はとても便利な機能なので、ぜひ使ってみてください。

VS Code