実務での使用頻度が高いショートカット
| 操作 | Windows | macOS |
|---|---|---|
| 定義へジャンプ | F12 / Ctrl + クリック | F12 / Cmd + クリック |
| 定義をその場でプレビュー | Alt + F12 | Option + F12 |
| 参照一覧を表示 | Shift + F12 | Shift + F12 |
| 行削除 | Ctrl + Shift + K | Cmd + Shift + K |
| クイックオープン(ファイル検索) | Ctrl + P | Cmd + P |
| 行を複製する | Shift + Alt + ↑ / ↓ | Shift + Option + ↑ / ↓ |
| 次の一致箇所を選択 | Ctrl + D | Cmd + D |
| すべて折りたたむ | Cmd + K → Cmd + 0 | Cmd + K → Cmd + 0 |
| ファイル内のシンボル検索 | Ctrl + Shift + O | Cmd + Shift + O |
| シンボルの一括リネーム | F2 | F2 |
| ドキュメントの自動整形 | Shift + Alt + F | Shift + Option + F |
| キー | 動作 |
|---|---|
| control + P | 上の行へカーソル移動 |
| control + N | 下の行へカーソル移動 |
| control + B | 左へカーソル移動 |
| control + F | 右へカーソル移動 |
- 同じ列の複数行に対して同時に入力したい場合
Ctrl + Alt + ↑/↓(macOSはCmd + Option + ↑/↓)を使う。こちらはカーソルを縦方向に追加する操作で、揃った位置に同じ文字列を一括で挿入したいとき(配列の各要素にカンマを足す、複数行にセミコロンを追加するなど)に向いている。
任意の位置に自由にカーソルを追加したい場合はAlt + クリック(macOSはOption + クリック)を使う。列を揃える必要がなく、クリックした場所すべてにカーソルが立つため、バラバラの位置を同時に編集したいときに向いている。
- すべて折りたたむ
Ctrl+K Ctrl+0全て折りたたまれており一つずつ展開して使用すると素早く作業できます
- 何の閉じタグかを分かりやすくする方法
タグ名.クラス名|c
デバッグ実行に関する操作は以下の通り
| 操作 | Windows | macOS |
|---|---|---|
| デバッグ開始/継続 | F5 | F5 |
| ステップオーバー 現在の行を実行するが、 その行が関数呼び出しなら関数の中には入らず、 呼び出し結果だけ受け取って次の行に進む。 | F10 | F10 |
| ステップイン 現在の行が関数呼び出しなら、その関数の中に入って1行ずつ追う | F11 | F11 |
| ステップアウト 今いる関数の残りを一気に実行し、呼び出し元の場所まで戻る。 | Shift + F11 | Shift + F11 |
ファイルのタイムライン
VS Codeのタイムライン機能は、エクスプローラーサイドバー下部にあるパネルで、選択中のファイルの変更履歴を時系列で表示する。
主な用途は以下の通り。
履歴の確認: Gitコミット履歴とローカル保存履歴（Local History）の両方が一覧で表示される。「ファイルが保存されました」がローカル保存、コミットメッセージ付きのものがGit履歴。
差分の確認: エントリをクリックすると、その時点と現在のファイルとのdiffが開く。2つのエントリを選択して右クリックすれば、任意の2時点間の差分も比較できる。
復元: エントリを右クリックして「内容の復元」を選ぶと、その時点の内容にファイルを戻せる。Gitのrevertと違いワーキングツリー上の変更なので、気に入らなければUndoで元に戻せる。
フィルタリング: パネル上部のフィルターアイコンから、Gitコミットだけ・ローカル履歴だけに絞り込める。
Local HistoryはGit管理外のファイルでも記録されるので、.gitignore対象のファイルやGitリポジトリ外のファイルでも過去の状態に戻せる点が便利。
おすすめ拡張機能
CSS Peek
cssでどのようなスタイルが効いているか、「ホバー」もしくは「右クリックで定義」確認ができます
