VS Codeの使えそうな機能を何回かに分けて記事に整理していく。
今回は、基本的なところ、表面的なところだけ。
環境
- Windows 11 Home 23H2
- Visual Studio Code 1.90
パレット
クリックオープン
パレットにファイル名を入力して、即座にファイルをオープンしたり、コマンドの起点にすることができる。
- ショートカットキー…Ctrl+P
- ファイル名の一部を入力すると、該当ファイルが絞り込まれ、容易にオープンできる
- 絞り込まれたファイル一覧で、→ キーを押すとファイルの連続オープンが可能
- ? 入力でコマンド一覧
- > 入力でコマンドパレット
- % 入力でクイック検索
- # 入力でワークスペースのシンボル検索
- @ 入力でファイル内のシンボル検索 (@:でグループ化して表示)
- : 入力で指定行にジャンプ
コマンドパレット
利用可能なすべてのコマンドにアクセスできる。
- ショートカットキー…Ctrl+Shift+P
- パレット内の各コマンドの右を見ると、それぞれのショートカットキーがわかる
- クイックオープン(Ctrl+P) -> > 入力と同等
クイック検索
ワークスペース内を素早く検索する。
- ショートカットキー… コマンドパレット(Ctrl+Shift+P) -> 検索: クイック検索(Search: Quick Search)
- クイックオープン(Ctrl+P) -> % 入力と同等
ファイル内のシンボルを検索
- ショートカットキー…Ctrl+Shift+O
- : を続けて入力すると、検索シンボルをグループ化(クラス、プロパティ、メソッド…)して表示
- クイックオープン(Ctrl+P) -> @もしくは@: 入力と同等
最近開いたファイル
最近開いたフォルダ(ワークスペース)やファイルを開く。
- ショートカットキー…Ctrl+R
- [ファイル]メニュー -> [最近使用した項目を開く] と同等
ビュー
エクスプローラ
サイドバーに[エクスプローラ]ビューを表示。ワークスペース内のフォルダ、ファイル構成をツリー表示する。
- ショートカットキー…Ctrl+Shift+E
- [アウトライン]セクションに現在のファイルのシンボル一覧を表示し、クリックでジャンプする
- [タイムライン]セクションではGit履歴とローカル履歴を確認可能で、クリックで差分を表示する
検索
サイドバーに[検索]ビューを表示。ワークスペース内を検索/置換する。
- ショートカットキー…Ctrl+Shift+F
- 検索キーワード欄右下の[…]ボタン(詳細検索の切り替え)クリックで、[含めるファイル]、[除外するファイル]の指定も可能になる
ソース管理
サイドバーに[ソース管理]ビューを表示。VS CodeからSCM(ソフトウェア構成管理)を操作する。
- ショートカットキー…Ctrl+Shift+G
- Git連携機能はデフォルトで搭載されている
- 他のSCMを使用する場合は、拡張機能のインストールが必要
実行とデバッグ
サイドバーに[実行とデバッグ]ビューを表示。実行とデバッグの構成を管理する。
- ショートカットキー…Ctrl+Shift+D
- Node.js (JavaScript/TypeScript)のデバッガはデフォルトで搭載されている
- 他のデバッガを使用する場合は、拡張機能のインストールが必要
拡張機能
サイドバーに[拡張機能]ビューを表示。拡張機能を管理する。
- ショートカットキー…Ctrl+Shift+X
- 検索キーワード欄右のフィルタアイコン(拡張機能のフィルタ)クリックで、お勧めや人気あるものの絞り込み、インストール数や評価によるソートを実行することもできる
サイドバーの表示/非表示切り替え
サイドバーの表示/非表示を切り替えるには、
- 現在開いているビューアイコンをクリック ([エクスプローラ]ビューを開いている場合は、[エクスプローラ]アイコンを、[検索]ビューを開いている場合は[検索]ビューアイコンを、クリック)、
- ショートカットキー…Ctrl+B
パネル
問題
エラーや警告を確認するための[問題]パネルを表示。
- ショートカット…Ctrl+Shift+M
- エラー、警告、情報の各レベルでフィルタすることができる
- ツリー表示 <-> テーブル表示に切り替えることも可能
出力
[出力]パネルを表示。
- ショートカット…Ctrl+Shift+U
デバッグコンソール
[デバッグコンソール]パネルを表示。デバッグ時の情報を出力する。
- ショートカット…Ctrl+Shift+Y
統合ターミナル
統合[ターミナル]パネルを表示。VS Code内でターミナルのコマンド実行できる。
- ショートカット…Ctrl+@
- [+]ドロップダウン(プロファイルを起動)クリックで他のターミナルシェルに切り替えることもできる
パネルの表示/非表示切り替え
パネルの表示/非表示を切り替えるには、
- パネルヘッダ右端の[x]ボタン(パネルを非表示にする)をクリックするか、
- ショートカットキー…Ctrl+J
参考
Visual Studio Code tips and tricks
Visual Studio Code Tips and Tricks for power users.
code.visualstudio.com
