毎日使わないのでついつい忘れてしまうのでメモ。
コード整形
| 操作 | ショートカットキー(Win) | ショートカットキー(Mac) | 説明 |
|---|
| 全体を整形 | Shift + Alt + F | Shift + Option + F | 保存時以外に手動でファイルを一括整形する |
| 選択範囲のみ整形 | Ctrl + K ➔ Ctrl + F | Cmd + K ➔ Cmd + F | 指定したコード部分だけを整形する |
■Prettierによるコード整形(フォーマット)の設定手順
毎回ショートカットキーを押さなくても、保存(Ctrl + S / Cmd + S)した瞬間に自動で整形されるように設定できます。
| 手順 | 操作 | 場所・入力内容 | 目的・効果 |
|---|
| 1. 拡張機能の追加 | Prettier を検索してインストール | 拡張機能タブ(Ctrl + Shift + X) 検索: Prettier – Code formatter | VS Codeに整形機能を追加する |
| 2. デフォルト指定 | Default Formatter を変更 | 設定画面(Ctrl + ,) 検索: Default Formatter 値: Prettier – Code formatter | 他の整形ツールとの衝突を防ぎ、Prettierを優先的に使う |
| 3. 保存時自動実行 | Format On Save を有効化 | 設定画面(Ctrl + ,) 検索: Format On Save 値: チェックを入れる(ON) | ファイル保存(Ctrl + S)時にコードを自動整列させる |
編集・行操作(コードを書くのが爆速になる)
| 機能 | Windows | Mac |
|---|
| 行の複製(上下) | Shift + Alt + ↑ / ↓ | Shift + Option + ↑ / ↓ |
| 行の移動(上下) | Alt + ↑ / ↓ | Option + ↑ / ↓ |
| 行の削除 | Ctrl + Shift + K | Cmd + Shift + K |
| 下に空行を挿入(行途中からでも) | Ctrl + Enter | Cmd + Enter |
| 行のコメントアウト | Ctrl + / | Cmd + / |
| コード整形(フォーマット) | Shift + Alt + F | Shift + Option + F |
選択・マルチカーソル(まとめて修正する)
| 機能 | Windows | Mac |
|---|
| 同じ単語を1つずつ追加選択 | Ctrl + D | Cmd + D |
| 同じ単語をすべて一括選択 | Ctrl + Shift + L | Cmd + Shift + L |
| クリックした場所にカーソル追加 | Alt + クリック | Option + クリック |
| 直前のカーソル位置を元に戻す | Ctrl + U | Cmd + U |
ナビゲーション・画面操作(マウス操作を減らす)
| 機能 | Windows | Mac |
|---|
| コマンドパレット(全体検索・機能実行) | Ctrl + Shift + P | Cmd + Shift + P |
| ファイル名で検索して開く | Ctrl + P | Cmd + P |
| サイドバー(エクスプローラー)の開閉 | Ctrl + B | Cmd + 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
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。