VS Codeの使えそうな機能を何回かに分けて記事に整理していく。
今回は、エディタ機能について深堀り。
環境
- Windows 11 Home 23H2
- Visual Studio Code 1.90
Zenモード
作業に集中したい時に使うと良い。
- ショートカットキー…Ctrl+K Z
- Zenモード解除には、Escキーを2回押下する
遷移、移動
履歴間
- 履歴表示、選択…Ctrl+Tab
- 前の履歴に戻る…Alt+Left
- 次の履歴に進む…Alt+Right
ファイル内
- 指定行へジャンプ…Ctrl+G
- ファイルの先頭に移動…Ctrl+Home
- ファイルの末尾に移動…Ctrl+End
選択
複数カーソル
複数カーソルを使用すると、複数個所を同時に編集することができる。
- クリック位置に次のカーソルを追加…Alt+Click
- 現在位置の上の行にカーソルを追加…Ctrl+Alt+↑
- 現在位置の下の行にカーソルを追加…Ctrl+Alt+↓
- カーソル位置の単語と同じ次の単語を選択…Ctrl+D
列選択
- 列選択 (テキストを垂直方向に選択)…Shift+Alt+Drag
- コマンドパレット(Ctrl+Shift+P) -> 列選択モードの切り替え (Toggle Column Selection Mode) で列選択機能をトグル、以降のマウスドラッグがすべて列選択になる
- トグル状態はステータスバー右で確認可能、トグル解除には再度コマンド実行か、ステータスバー[列の選択]をクリック
折り畳み
行番号とコード開始位置間の折り畳みアイコンをクリックして、領域を折り畳む/元に戻すことができる。
- 折り畳む…Ctrl+Shift+[
- 元に戻す…Ctrl+Shift+]
- マーカー※で独自定義した領域を折り畳む…Ctrl+K Ctrl+8
- マーカー※で独自定義した領域を元に戻す…Ctrl+K Ctrl+9
※以下のように、言語毎のマーカーで折り畳む領域を定義することも可能
| 言語 | 開始マーカー | 終了マーカー |
| C# | #region | #endregion |
| C/C++ | #pragma region | #pragma endregion |
| CSS/Less/SCSS | /*#region*/ | /*#endregion*/ |
| Java | //#region or //<editor-fold> | //#endregion or //</editor-fold> |
| Markdown | <!– #region –> | <!– #endregion –> |
| JavaScript/TypeScript | //#region | //#endregion |
マークダウンのプレビュー
マークダウンファイルをプレビューするには、ファイルを開いた状態で以下のいずれかを実行。
(i) 新規タブ全体にプレビュー表示
- ショートカットキー…Ctrl+Shift+V
- もしくは、コマンドパレット(Ctrl+Shift+P) -> Markdown: プレビューを開く (Markdown: Open Preview)
(ii) 新規タブを並べてプレビュー表示
- ショートカットキー……Ctrl+K V
- もしくは、コマンドパレット(Ctrl+Shift+P) -> Markdown: プレビューを横に表示 (Markdown: Open Preview to the Side)
検索
ワークスペース内を検索
[検索]ビュー(Ctrl+Shift+F)において、検索実行する。
- 検索キーワード欄右下の[…]ボタン(詳細検索の切り替え)クリックで、[含めるファイル]、[除外するファイル]の指定も可能
特定フォルダ内を検索
[検索]ビューにおいて、検索キーワード欄右下の[…](詳細検索の切り替え) -> [含めるファイル] に対象フォルダを指定して検索実行する。
もしくは、以下のようにフォルダを右クリックして検索しも良い。
- エクスプローラ(Ctrl+Shift+E) -> フォルダを右クリック -> [フォルダー内を検索]
ファイル内を検索
現在開いているファイル内を検索する。
- ショートカットキー…Ctrl+F
- 検索後Enterで次の検索結果へ、Shift+Enterで前の検索結果へ遷移
- 検索キーワード欄でCtrl+Enterを押せば、検索キーワードに改行を含めることができる
- 検索キーワード欄で↑キーを押すと前の検索キーワードに戻り、↓キーを押すと次の検索キーワードに進む
- 検索ウィジェットの左端をドラッグするとサイズ変更、ダブルクリックで最大化⇔元に戻すことが可能
- 選択範囲のみ検索対象にするには、[選択範囲を検索]トグル(右から2番目)をONにする
検索エディター
検索結果をハイライトし、エディタ内で前後行含めて確認することができる。
- ショートカットキー…コマンドパレット(Ctrl+Shift+P) -> 検索エディター: 検索エディターを開く (Search: Open Search Editor)
- もしくは、[検索]ビューで、検索後に[エディターで開く]リンクをクリック
編集
コード補完 (Suggest)
- ショートカットキー…Ctrl+Space
シンボル定義をエディタ上に表示 (Peek)
- ショートカット…Alt+F12
- もしくは、コンテキストメニュー…対象を右クリック -> ピーク -> 定義をここに表示
シンボル定義に移動
- ショートカットキー…F12
- マウス…Ctrl+Click
- もしくは、コンテキストメニュー…対象を右クリック -> 定義へ移動
- 移動した後は、Alt+←で戻ると良い
ファイル内のシンボルの参照を検索、移動
- ショートカットキー…Shift+F12
- もしくは、コンテキストメニュー…対象を右クリック -> 参照へ移動
ワークスペース内のシンボルの参照を検索、移動
- ショートカットキー…Shift+Alt+F12
- もしくは、コンテキストメニュー…対象を右クリック -> すべての参照を検索
シンボルの名前変更
- ショートカットキー…F2
- もしくは、コンテキストメニュー…対象を右クリック -> シンボルの名前変更
フォーマット
ファイル全体をフォーマット
現在のファイル全体をフォーマットする方法は、以下のいずれか。
- ショートカットキー…Shift+Alt+F
- コマンド…コマンドパレット(Ctrl+Shift+P) -> ドキュメントのフォーマット (Format Document)
- コンテキストメニュー…エディタ内右クリック -> ドキュメントのフォーマット
- 保存時に自動フォーマットするには、設定ファイルを編集
// settings.json
{
"editor.formatOnSave": true,
}選択部分をフォーマット
選択している部分のみをフォーマットする方法は、以下のいずれか。
- ショートカットキー…Ctrl+K Ctrl+F
- コマンド…コマンドパレット(Ctrl+Shift+P) -> 選択範囲のフォーマット (Format Seletcion)
- コンテキストメニュー…範囲選択して右クリック -> 選択範囲のフォーマット
その他
インデント
設定ファイルで、タブ->スペースへの変換を制御できる。
// settings.json
{
// タブの替わりにスペースを挿入するか否か(true: する、false: しない、デフォルトtrue)
"editor.insertSpaces": true,
// タブはスペース何個分か(デフォルト4個)
"editor.tabSize": 4,
}- また、VS Codeは開いているファイルを解析し、インデントに使用しているスペース数を決定する
※ただし、2、4、6、8個以外のインデントは検出不可 - 検知したスペース数はステータスバーの右側に表示される
ファイルエンコード
- ファイルのエンコードはステータスバーの右側に表示され、
- これをクリックすると別エンコードでファイルの再読み込み、保存ができる
- ファイルのエンコードを設定ファイルで指定するには、以下のようにする
// settigns.json
{
"files.encoding": "utf8"
}参考
Visual Studio Code tips and tricks
Visual Studio Code Tips and Tricks for power users.
code.visualstudio.com
Basic editing
Learn about the basic editing features of Visual Studio Code. Search, multiple selection, code formatting.
code.visualstudio.com
