記事ガイド
読みたいところだけ読めばよいように記事を分割してあるので、順番に読んで行く必要はありません。気になったところだけ好きにお読みください。
VS Code v1.89.1 の情報ベースに記述しています。コマンド名などはバージョンによって若干変わったりするので、一致するモノが見当たらない場合、それっぽいモノを探してください。
まず、これだけは覚えてください
VS Code を使う上でこれだけは必ず覚えてください。
- Windows/Linux:
Ctrl+P, Mac:Command+Pのキーボードショートカットでクイックオープンが表示されます。 - クイックオープンが表示されてる状態で、
?を入力するとヘルプが表示されます。
VS Code を使い熟す上でどうしても覚えておかなければならないのはこの２つぐらいです。この２つだけ覚えておけばデバッグだのタスクだのの設定なんかを別にした普段使いをする分には後は適当に触っててもだいたいどうにかなります。
コマンドパレットとは？
先のセクションで「あれ？ クイックオープン？ この記事はコマンドパレットの話じゃ無いの？？？」と思われたかもしれませんが、クイックオープンは狭義でのコマンドパレットと実は同一のモノです。
一般的に VS Code でコマンドパレットと呼ばれるモノは Windows/Linux: Shift+Ctrl+P, Mac: Shift+Command+P のキーボードショートカットで表示できますが、これはクイックオープンを表示してから > を入力したモノと同一のモノですし、同様にコマンドパレットを表示してから先頭の > を削るとクイックオープンになります。
このコマンドパレットと同一の UI はクイックオープン以外にもいくつか存在し、まとめると次の表のようになります。( v1.51.1 の時点での情報 )
| 機能 | 先頭のテキスト | キーボードショートカット |
|---|---|---|
| ファイルに移動する(クイックオープン) | 無し |
Ctrl/Command+P
|
| 行/列に移動 | : |
Ctrl/Command+G
|
| エディターでシンボルに移動 | @ |
Shift+Ctrl/Command+O
|
| エディターでカテゴリ別のシンボルに移動 | @: |
無し |
| ワークスペース内のシンボルへ移動 | # |
Ctrl/Command+T
|
| テキストの検索(試験段階) | % |
無し |
| コマンドの表示と実行(コマンドパレット) | > |
Shift+Ctrl/Command+P
|
| デバッグの開始 |
debug (←最後は半角スペース) |
無し |
| すべてのデバッグ コンソールを表示する |
debug consoles (←最後は半角スペース) |
無し |
| 開いているすべてのエディターを外観別に表示 |
edt (←最後は半角スペース) |
Option+Command+Tab / Ctrl+K Ctrl+P
|
| アクティブ グループ内のエディターを最近使用したもの順に表示する |
edt active (←最後は半角スペース) |
無し |
| 開いているすべてのエディターを最近使用したもの順に表示する |
edt mru (←最後は半角スペース) |
無し |
| 拡張機能の管理 |
ext (←最後は半角スペース) |
無し |
| 拡張機能のインストールまたは検索 |
ext install (←最後は半角スペース) |
無し |
| Open Issue Reporter |
issue (←最後は半角スペース) |
無し |
| タスクの実行 |
task (←最後は半角スペース) |
無し |
| 開いているすべてのターミナルを表示 |
term (←最後は半角スペース) |
無し |
| ビューを開きます |
view (←最後は半角スペース) |
無し |
| ヘルプ | ? |
無し |
一通り、触るだけ触って起きましょう。
先述したとおり、クイックオープンのショートカットキー( Windows/Linux: Ctrl+P, Mac: Command+P )、とクイックオープンで ? と入力すればヘルプが表示されるので、それ以外はほぼほぼ覚える必要が無いのですが、発想として「確かこういう機能があったハズ・・・」というのがあるのと無いのでは全然違うので( 人間、発想として浮かばない言動を採る事は基本的にできません。人間は肉体的にも他者(親、先祖)の劣化コピーの集合ですが、精神的にも他者の劣化コピーの集合です。 )、一通り触っておくだけ触っておきましょう。
とは言っても、 debug や task は launch.json や tasks.json が設定されたワークスペースが手元に無いとまともに試しようがないですし、いくつかスクリーンショットを乗せておきます。
:
「行/列に移動」
@
エディター内の全シンボルへ素早くアクセスできます。
@:
エディター内の全シンボルへ素早くアクセスできます。(カテゴリ別に表示されます。)
#
ワークスペースの全シンボルへ素早くアクセスできます。( VS Code の UI 上、シンボルと表現されますが、ここで言うシンボルは @ のヤツと違い、 markdown のセクションが拾われるようです。 )
%
テキスト検索ができます。
>
「コマンドの表示と実行」
debug
デバッグを実行できます。サイドバーのデバッグパネル上部に表示されるヤツと機能的には同じです。
debug consoles
「すべてのデバッグ コンソールを表示する」
issue
「Open Issue Reporter」
task
タスクを実行できます。
term
ターミナルにアクセスできます。
view
全ビューが一覧表示されアクセスできます。
基本操作
コマンドパレット系の UI に限らず VS Code 上の類似する UI ( クイックピック等 )では、テキスト入力により絞り込みが行え、目的とする項目が一番上に表示された段階で Enter を押下する事で決定できます。また、一番上に来てない状態でもカーソル移動キーの ↑ や ↓ で目的の項目を選択した状態で Enter を押下して決定する事もできれば、マウスで目的の項目をクリックする事でも決定できます。
コマンドパレット(コマンドの表示と実行)
コマンドパレット(コマンドの表示と実行)で出てくるコマンドですが、コンテキスト依存のモノもあり、 VS Code 上のどこにフォーカスが当たっているかで、表示されたりされなかったりするので、コマンドパレットを表示する前にどこにフォーカスが当たっているかを意識するようにしてください。( キーボードショートカットも同様にコンテキスト依存なモノがあり、同様にフォーカスを意識する必要があります。 )
キーボードショートカット
コマンドパレットではキーボードショートカットが割り当てられているコマンドについてその情報が併記されますので、頻繁に利用するコマンドについてはこの情報を参考にして少しずつ覚えていきましょう。
柔軟な絞り込み
コマンドの表示と実行 に限らず、コマンドパレット系の UI 及び VS Code 上の類似する UI ( クイックピック等 )では柔軟な絞り込みが行え、例えば Switch Window にアクセスしたい場合、 sw w のような入力でもマッチします。
この柔軟な絞り込みのお陰で普通に検索をかけるより #, @, @: あたりの機能を使った方がずっと効率良く目的の箇所に辿り付けたりします