ショートカットは「知らなくても書ける、でも知ると一気にラクになる」たぐいのものです。全部おぼえる必要はありません。毎日使うものから、少しずつ手になじませるのがコツ。ここでは初心者がまず得するものを、使う場面ごとに厳選して紹介します。
タイプ1：まず手になじませる基本操作
キーボードだけで完結する、いちばん出番の多い操作です。
保存する
⌘ + S / Ctrl + S
いちばん使います。直したら保存。タブに「●」が出ていたら未保存のサイン。困ったらまず保存。
元に戻す・やり直す
⌘ + Z / Ctrl + Z（元に戻す）、⌘ + ⇧ + Z / Ctrl + Y（やり直す）
「あ、消しちゃった」はこれで一発解決。何度でもさかのぼれるので、失敗を恐れず試せます。
なんでも探す（コマンドパレット）
⌘ + ⇧ + P / Ctrl + Shift + P
VSCodeの「なんでも入り口」。ここに機能名を打つと、たいていのことが実行できます。メニューの場所を覚えなくても、名前で呼び出せるのが強みです。
ファイルをすばやく開く
⌘ + P / Ctrl + P
ファイル名の一部を打つだけで、目的のファイルにジャンプ。ファイルが増えてきたときの必須ワザです。
タイプ2：書く・直すを速くする
行単位でまとめて操作できると、打ち直しがぐっと減ります。
コメントのON/OFF
⌘ + / / Ctrl + /
選んだ行を、まとめてコメントにしたり戻したり。「この行、一回消したいけど残しておきたい」ときに便利です。
行をまるごとコピーする
⇧ + ⌥ + ↓ / Shift + Alt + ↓
いま居る行を、下（↓）にそのまま複製します。似た行を何個も書くときに、打ち直さずにすみます。
行を上下に動かす
⌥ + ↓ / Alt + ↓
選んだ行を、上下に“引っ越し”できます。切り取り＆貼り付けをしなくても、順番を入れ替えられます。
行をまるごと削除する
⌘ + ⇧ + K / Ctrl + Shift + K
いま居る行を、選択してから消す手間なしに、まるごと1発で削除できます。
タイプ3：複数の場所を同時に編集する
同じ書き換えをあちこちに繰り返すときは、カーソルを増やすのが近道です。
複数カーソルを増やす
⌥ + クリック / Alt + クリック
打ちたい場所を押しながらクリックすると、カーソルが増えます。違う場所に同じ内容を一気に書きたいときの魔法です。
同じ単語をまとめて選ぶ
⌘ + D / Ctrl + D（連打で追加選択）
いまカーソルがある単語と同じものを、押すたびに1つずつ追加で選択していきます。1つだけ名前を変えたいときに向いています。
同じ単語をすべて選ぶ
⌘ + ⇧ + L / Ctrl + Shift + L
いまカーソルがある単語と同じものを、ファイル中すべて同時に選択します。同じクラス名を全部まとめて書き換えたいときはこちら1発で足ります。
増やしたカーソルを元に戻す
Esc
カーソルを増やしたあと「打つ文字が全部の場所に入ってしまう」と焦ったら、Esc を1回。カーソルが1つに戻ります。増やし方だけ覚えて戻し方を知らないと詰まりやすいので、セットで覚えておくと安心です。
タイプ4：画面のあちこちを行き来する
コードを打つ手より、じつはマウスで画面を切りかえる手のほうが回数が多い——というのはよくある話です。ここをキーにすると体感がいちばん変わります。
サイドバーを開く・閉じる
⌘ + B / Ctrl + B
左のファイル一覧をしまって、コードを広く表示できます。狭い画面のノートPCで特に効きます。
ターミナルを出す・隠す
⌃（Control）＋バッククォート（`） / Ctrl ＋バッククォート
コマンドを打つ黒い画面を、下からにゅっと出したりしまったり。同じキーでトグルなので、出しっぱなしで画面を狭くせずに済みます。
開いているタブを切りかえる
⌃ + Tab / Ctrl + Tab
HTMLとCSSを行ったり来たりするときに。押しっぱなしにすると一覧が出て、選んで離せます。
画面を左右に分割する
⌘ + \ / Ctrl + \
いま開いているファイルを2画面に。左にHTML・右にCSSを並べると、クラス名を見ながら書けるので打ちまちがいが減ります。
折りたたむ・ひろげる
⌘ + ⌥ + [ / Ctrl + ⇧ + [（折りたたむ）、] でひろげる
長いHTMLの、いま見ないところをたたんでおけます。入れ子が深いファイルの見通しがよくなります。
タイプ5：コードの見た目をととのえる
インデントをまとめてそろえる（自動整形）
⇧ + ⌥ + F / Shift + Alt + F
字下げがぐちゃぐちゃになったファイルを、1発できれいに並べ直します。Prettierなどの整形の拡張機能を入れていると、より賢くそろいます。
べんりワザ入れておきたいVSCode拡張機能自動整形のPrettierをふくむ、入れておきたい拡張機能はこちら3長い行を折り返す・折り返さない
⌥ + Z / Alt + Z
画面の右にはみ出した長い行を、その場で折り返して全部見えるようにします。横スクロールしなくて済むので、長いテキストを直すときに便利です。
文字を大きく・小さくする
⌘ + + / Ctrl + +（大きく）、⌘ + - / Ctrl + -（小さく）
人に画面を見せるときや、目が疲れてきたときに。⌘ + 0 / Ctrl + 0 でもとの大きさに戻ります。
ここだけ覚える早見表
まず手になじませたい12個をまとめました。印刷して画面のそばに貼っておくのもおすすめです。
| やりたいこと | Mac | Windows |
|---|---|---|
| 保存する | ⌘ + S | Ctrl + S |
| 元に戻す | ⌘ + Z | Ctrl + Z |
| 機能を名前で呼ぶ | ⌘ + ⇧ + P | Ctrl + Shift + P |
| ファイルを開く | ⌘ + P | Ctrl + P |
| コメントON/OFF | ⌘ + / | Ctrl + / |
| 行を複製する | ⇧ + ⌥ + ↓ | Shift + Alt + ↓ |
| 行を動かす | ⌥ + ↓ | Alt + ↓ |
| 行を消す | ⌘ + ⇧ + K | Ctrl + Shift + K |
| 同じ単語を全部選ぶ | ⌘ + ⇧ + L | Ctrl + Shift + L |
| サイドバー開閉 | ⌘ + B | Ctrl + B |
| 自動整形 | ⇧ + ⌥ + F | Shift + Alt + F |
| 折り返し切りかえ | ⌥ + Z | Alt + Z |
まとめ
⌘/Ctrl + S（保存）と⌘/Ctrl + /（コメント）はもう手が動くようにしておく⌘/Ctrl + Pでファイルを、⌘/Ctrl + ⇧ + Pで機能を呼び出せる- 行の複製・移動・削除、複数カーソルや一括選択で、打ち直しを減らせる
⌘/Ctrl + Bや画面分割で、マウスに持ちかえる回数そのものを減らせる- 効かないときは、エディタの中を1回クリックしてから押し直す
指の動きが減ると、頭は「作りたいもの」だけに集中できます。