VS Codeで使うショートカット
CATEGORIES TOOLS / TAGS

毎日使わないのでついつい忘れてしまうのでメモ。

コード整形

操作ショートカットキー(Win)ショートカットキー(Mac)説明
全体を整形Shift + Alt + FShift + Option + F保存時以外に手動でファイルを一括整形する
選択範囲のみ整形Ctrl + K ➔ Ctrl + FCmd + K ➔ Cmd + F指定したコード部分だけを整形する

■Prettierによるコード整形(フォーマット)の設定手順
毎回ショートカットキーを押さなくても、保存(Ctrl + S / Cmd + S)した瞬間に自動で整形されるように設定できます。

手順操作場所・入力内容目的・効果
1. 拡張機能の追加Prettier を検索してインストール拡張機能タブ(Ctrl + Shift + X) 検索: Prettier – Code formatterVS Codeに整形機能を追加する
2. デフォルト指定Default Formatter を変更設定画面(Ctrl + ,) 検索: Default Formatter 値: Prettier – Code formatter他の整形ツールとの衝突を防ぎ、Prettierを優先的に使う
3. 保存時自動実行Format On Save を有効化設定画面(Ctrl + ,) 検索: Format On Save 値: チェックを入れる(ON)ファイル保存(Ctrl + S)時にコードを自動整列させる

編集・行操作(コードを書くのが爆速になる)

機能WindowsMac
行の複製(上下)Shift + Alt + ↑ / ↓Shift + Option + ↑ / ↓
行の移動(上下)Alt + ↑ / ↓Option + ↑ / ↓
行の削除Ctrl + Shift + KCmd + Shift + K
下に空行を挿入(行途中からでも)Ctrl + EnterCmd + Enter
行のコメントアウトCtrl + /Cmd + /
コード整形(フォーマット)Shift + Alt + FShift + Option + F

選択・マルチカーソル(まとめて修正する)

機能WindowsMac
同じ単語を1つずつ追加選択Ctrl + DCmd + D
同じ単語をすべて一括選択Ctrl + Shift + LCmd + Shift + L
クリックした場所にカーソル追加Alt + クリックOption + クリック
直前のカーソル位置を元に戻すCtrl + UCmd + U

ナビゲーション・画面操作(マウス操作を減らす)

機能WindowsMac
コマンドパレット(全体検索・機能実行)Ctrl + Shift + PCmd + Shift + P
ファイル名で検索して開くCtrl + PCmd + P
サイドバー(エクスプローラー)の開閉Ctrl + BCmd + B
統合ターミナルの表示 / 非表示Ctrl + @(Ctrl + ~)Ctrl + @(Cmd + ~)
設定画面を開くCtrl + ,Cmd + ,

ソース別のコメントアウト

言語・分類1行コメント複数行コメント備考
HTML<!– コメント –><!– コメント –>1行も複数行も同じ記法です
CSSなし(複数行用を使用)/* コメント */1行でも /* */ を使います
JavaScript / TypeScript// コメント/* コメント */
PHP// コメント または # コメント/* コメント */
Python# コメント“”” コメント “””複数行は ”’ や “””(ドックストリング)で記述
Java / C言語 / C++ / C#// コメント/* コメント */
Ruby# コメント=begin コメント =end=begin は行頭に置く必要があります
SQL— コメント/* コメント */— の後ろには半角スペースが必要です
Bash / Shell / YAML# コメントなし(各行頭に #)
JSON基本不可基本不可標準のJSON仕様ではコメントを書けません

■記法を覚えなくても一瞬でコメント化する裏技
VS CodeなどのテキストエディタやIDEを使っている場合、ソースコードの種類を自動判別して適切な記法でコメントアウトしてくれるショートカットキーがあります。

  • 1行コメントアウト / 解除: Ctrl + / (Mac: Cmd + /)
  • 複数行(ブロック)コメントアウト: Shift + Alt + A (Mac: Shift + Option + A)

カーソルがある行や、選択した範囲に対してこのショートカットを押すだけで、自動的にそのファイル(HTML、CSS、JS、PHPなど)に合ったコメント記法が適用されます

NOTICES

  • 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。