HTMLやCSSのコーディングには欠かせないコメントアウト、Visual Studio Codeのショートカットキーで一発入力しましょう!
投稿時点でのインストール時のデフォルト設定を記載しました。(version 1.52.0)
キーの割当ては自分で設定が可能ですし、拡張機能で追加されたりもします。
何故かコメントアウトできないという方はVS Codeの設定で調整してください!
[Ctrl] + [ / ]または [Command] + [ / ]
選択した行をコメントアウトできる
Visual Studio CodeでHTMLやCSSなどを記述する際は
Windows・Linuxでは[Ctrl] + [ / ]
Macでは[Command] + [ / ]
のショートカットを使用すると「選択範囲を含む行」が全てコメントアウトできます。もう一度選択して使用するとコメントを解除できます。
行の途中から一部コメントアウトするものではありません。
選択していないときはカーソルのある1行だけ
何も選択していない状態でショートカットを使用するとカーソルが表示されているその1行が丸々コメントアウトされます。
空の行で使用するとコメントアウトのための<!-- -->などが入力されそのままコメントが打てるようになります。
[Shift] + [Alt] + [ A ]、[Shift] + [Option] + [ A ]
選択範囲をブロックとしてコメントアウト
選択した範囲をコメントアウトします。行の途中からでも使用することができ、もう一度選択して使用するとコメントを解除できます。
言語によっては、[Ctrl] + [ / ]または [Command] + [ / ]を使用すると一行一行に行コメントの記号が入ります。
[Shift] + [Alt] + [ A ]や[Shift] + [Option] + [ A ]を使用すると先頭行の頭と最終行の終わりに記号がつく形でコメントアウトできるため、使い分けてください。
ファイル→ユーザー設定→キーボードショートカット
ショートカットの割当て設定画面
キーに対する機能の割り当て画面が表示されます。
たとえば検索窓に「Ctrl + /」と入力すると、このキーの組み合わせで作動するコマンドが確認できます。
同じキーの組み合わせで、いつ受け付けるかが重なっていると、どちらも認識しないということがあります(競合)。
キーバインドの欄をダブルクリックすると新たに割当てができます。
編集されるのは keybindings.json
ユーザー設定のsetting.jsonなどと同様に、直接編集できるファイルが存在します。
ただし他のコマンドとの重複を見たりするのに、先述の設定画面が優れているため、おすすめはしていません。
既定値の上書きが一括でできるため、カーソル操作をカスタマイズ(好きなエディタやマシンの仕様に)することなどに活用されているそうです。