VSCode クイックリファレンス
Visual Studio Code チートシートが公開されました
Visual Studio Code で最もよく使われるコマンド](https://www.glukhov.org/ja/developer-tools/editors-ides/vscode-cheatsheet/ “Visual Studio Code で最もよく使われるコマンド”)
再現可能な開発環境については、VS Code で Dev Containers をマスターする を参照してください。
Visual Studio Code チートシート
一般的なショートカット (Windows / Mac)
| 操作 | Windows / Linux | macOS |
|---|---|---|
| コマンドパレット | Ctrl+Shift+P | Cmd+Shift+P |
| クイックオープン (ファイル) | Ctrl+P | Cmd+P |
| ターミナルの表示/非表示 | Ctrl+` | Ctrl+` |
| サイドバーの表示/非表示 | Ctrl+B | Cmd+B |
| 設定 | Ctrl+, | Cmd+, |
| キーボードショートカットを開く | Ctrl+K Ctrl+S | Cmd+K Cmd+S |
| すべてのシンボルを表示 | Ctrl+T | Cmd+T |
| 行へ移動 | Ctrl+G | Ctrl+G |
| 検索 | Ctrl+F | Cmd+F |
| 置換 | Ctrl+H | Cmd+Option+F |
| マルチカーソル (次に追加) | Ctrl+D | Cmd+D |
| マルチカーソル (上/下に追加) | Ctrl+Alt+Up/Down | Option+Cmd+Up/Down |
| 行の上/下へ移動 | Alt+Up/Down | Option+Up/Down |
| 行の上/下へコピー | Shift+Alt+Up/Down | Shift+Option+Up/Down |
| 行を切り取り | Ctrl+X | Cmd+X |
| 行をコピー | Ctrl+C | Cmd+C |
| 行を削除 | Ctrl+Shift+K | Cmd+Shift+K |
| コメント行 | Ctrl+/ | Cmd+/ |
| ドキュメントの整形 | Shift+Alt+F | Shift+Option+F |
| 保存 | Ctrl+S | Cmd+S |
| エディターを閉じる | Ctrl+W | Cmd+W |
| エディターを分割 | Ctrl+\ | Cmd+\ |
ナビゲーション
- 定義へ移動: F12
- 定義をプレビュー: Alt+F12
- 参照元へ移動: Shift+F12
- 戻る/進む: Alt+Left/Right (Windows), Ctrl+–/Ctrl+Shift+– (Mac)
編集
- 行の複製: Shift+Alt+Down (Windows), Shift+Option+Down (Mac)
- 行の上/下へ移動: Alt+Up/Down (Windows), Option+Up/Down (Mac)
- すべての出現箇所を選択: Ctrl+Shift+L (Windows), Cmd+Ctrl+G (Mac)
- 元に戻す/やり直す: Ctrl+Z / Ctrl+Y (Windows), Cmd+Z / Cmd+Shift+Z (Mac)
統合ターミナル
- 新しいターミナル: Ctrl+Shift+` (Windows/Mac)
- ターミナルの表示/非表示: Ctrl+` (Windows/Mac)
- ターミナルを終了: Ctrl+Shift+W
ソースコントロール (Git)
- ソースコントロールを開く: Ctrl+Shift+G (Windows), Cmd+Shift+G (Mac)
- コミット: Ctrl+Enter (コミットメッセージボックス内で)
コマンドラインでの使用例
# カレントディレクトリで VS Code を開く
code .
# 特定のファイルの行と列で開く
code myfile.js:10:5
# 2つのファイル間の差分ビューを開く
code --diff file1.js file2.js
# 新しい VS Code ウィンドウを開く
code -n
# すべての拡張機能を無効にする
code --disable-extensions .
カスタマイズ
- テーマの変更: Ctrl+K Ctrl+T (Windows), Cmd+K Cmd+T (Mac)
- キーボードショートカットを開く: Ctrl+K Ctrl+S (Windows), Cmd+K Cmd+S (Mac)
- 拡張機能をインストール: Ctrl+Shift+X (Windows), Cmd+Shift+X (Mac)
スニペット
Preferences: Configure User Snippetsを通じてカスタムコードスニペットを作成できます。
ヒント
- コマンドパレット (Ctrl+Shift+P / Cmd+Shift+P) を使用すると、ほぼすべてのコマンドや設定にアクセスできます。
- プロジェクト内の
.vscodeフォルダーでは、ワークスペース固有の設定やタスクを定義できます。 - キーマップ拡張機能をインストールすることで、他のエディター (Vim, Sublime など) のショートカットを使用できます。
より包括的なリストについては、公式の[キーボードショートカット PDF] またはエディター内のショートカットリファレンス (Ctrl+K Ctrl+S) を参照してください。
コマンドパレットから VS Code 拡張機能をインストールする方法
コマンドパレットから Visual Studio Code 拡張機能をインストールできます。
- Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (macOS) を使用してコマンドパレットを開きます。
Extensions: Install Extensionsと入力し、リストから選択します。これにより拡張機能ビューが開き、拡張機能を検索してインストールできます。
この方法により、キーボードから手を離すことなく、メニューを操作することなく拡張機能をすばやくインストールすることができます。
Marketplace の一覧項目には、1行でインストールするためのコマンドも提供されています。Ctrl+P (macOS では Cmd+P) でクイックオープンを開き、ext install <publisher.extension-id> を貼り付けて Enter キーを押します。vscode-icons の場合、そのコマンドは ext install vscode-icons-team.vscode-icons となります。
ターミナルからであれば、同じ拡張機能は code --install-extension vscode-icons-team.vscode-icons でインストールできます。
言語ごとのインストール数が多い拡張機能については、プログラミング言語とフレームワークの人気度 を参照してください。
その他のエディターキーバインディング一覧
Ctrl+T (macOS: Cmd+T) - ワークスペースシンボルを表示
Ctrl+Shift+O (macOS: Cmd+Shift+O) - ドキュメントシンボルを表示
Ctrl+Shift+P (macOS: Cmd+Shift+P) - コマンドパレットを開く
Ctrl+Space - コード補完を開く
Ctrl+. (macOS: Cmd+.) - クイックフィックスを開く
F2 - シンボル名のリネーム
Shift+Alt+F (macOS: Shift+Option+F) - ドキュメントの整形
F12 - 定義へ移動
Shift+F12 - 参照元を検索
Alt+Shift+O - ディレクティブの整理
F4 - 型階層を表示
デバッグキーバインディング一覧
Ctrl+Alt+D - Dart DevTools を起動
F5 - デバッグを開始
Ctrl+F5 - デバッグなしで開始
Shift+F5 - デバッグを停止
Ctrl+Shift+F5 (macOS: Cmd+Shift+F5) - デバッグを再開 (Flutter アプリのデバッグ時、ホットリスタートとして機能)
Ctrl+F5 - Flutter アプリのデバッグ時のホットリロード
F9 - ブレークポイントのトグル
F10 - ステップオーバー
F11 - ステップイン
Shift+F11 - ステップアウト
