基本的な編集
Visual Studio Code は何よりもまずエディターであり、生産性の高いソースコード編集に必要な機能が含まれています。このトピックでは、エディターの基本を説明し、コードを使い始めるのに役立ちます。
キーボードショートカット
コードを書くときにキーボードから手を離さずにいられることは、高い生産性のために非常に重要です。VS Code には豊富なデフォルトのキーボードショートカットがあり、それらをカスタマイズすることもできます。
- キーボードショートカットリファレンス - リファレンスシートをダウンロードして、最も一般的に使用される人気のキーボードショートカットを学びます。
- キーマップ拡張機能をインストールする - キーマップ拡張機能をインストールすることで、VS Code で以前のエディター (Sublime Text、Atom、Vim など) のキーボードショートカットを使用します。
- キーボードショートカットをカスタマイズする - デフォルトのキーボードショートカットを自分のスタイルに合わせて変更します。
複数選択 (マルチカーソル)
VS Code は、高速な同時編集のために複数のカーソルをサポートしています。Alt+Click でセカンダリカーソル (細く表示されます) を追加できます。各カーソルは、そのコンテキストに基づいて独立して動作します。カーソルを追加する一般的な方法は、⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) または ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) で、カーソルを上下に挿入します。
グラフィックカードのドライバー (例: NVIDIA) が、これらのデフォルトショートカットを上書きする場合があります。
⌘D (Windows, Linux Ctrl+D) は、カーソル位置の単語、または現在の選択範囲の次の出現箇所を選択します。
また、⇧⌘L (Windows, Linux Ctrl+Shift+L) でさらにカーソルを追加することもでき、これにより現在選択されているテキストの各出現箇所に選択範囲が追加されます。
マルチカーソル修飾キー
複数カーソルを適用するための修飾キーを、macOS では Cmd+Click、Windows と Linux では Ctrl+Click に変更したい場合は、editor.multiCursorModifier の設定で行うことができます。これにより、Sublime Text や Atom などの他のエディターから来たユーザーが、慣れ親しんだキーボード修飾キーを使い続けることができます。
設定は以下のようにセットできます:
ctrlCmd
- Windows では Ctrl、macOS では Cmd にマッピングされます。alt
- 既存のデフォルトの Alt です。
また、この設定を素早く切り替えるためのメニュー項目 [選択] > [Switch to Ctrl+Click for Multi-Cursor (マルチカーソルに Ctrl+Click を使用)] または [選択] > [Switch to Alt+Click for Multi-Cursor (マルチカーソルに Alt+Click を使用)] もあります。
[定義へ移動] と [リンクを開く] のジェスチャーもこの設定を尊重し、競合しないように適応します。例えば、設定が ctrlCmd
の場合、Ctrl/Cmd+Click で複数カーソルを追加でき、リンクを開いたり定義に移動したりするには Alt+Click を使用します。
選択範囲の縮小/拡大
現在の選択範囲を素早く縮小または拡大します。⌃⇧⌘← (Windows, Linux Shift+Alt+Left) と ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) でトリガーします。
以下は ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) で選択範囲を拡大する例です:
矩形 (ボックス) 選択
一方の隅にカーソルを置き、Shift+Alt を押しながら反対側の隅までドラッグします。
これは、マルチカーソル修飾キーとして Ctrl/Cmd を使用する場合、Shift+Ctrl/Cmd に変わります。
macOS と Windows には矩形選択のデフォルトキーボードショートカットもありますが、Linux にはありません。
キー | コマンド | コマンドID |
---|---|---|
⇧↓ (Windows, Linux Shift+Down) | 下に矩形選択 | cursorColumnSelectDown |
⇧↑ (Windows, Linux Shift+Up) | 上に矩形選択 | cursorColumnSelectUp |
⇧← (Windows, Linux Shift+Left) | 左に矩形選択 | cursorColumnSelectLeft |
⇧→ (Windows, Linux Shift+Right) | 右に矩形選択 | cursorColumnSelectRight |
⇧PageDown (Windows, Linux Shift+PageDown) | ページ下に矩形選択 | cursorColumnSelectPageDown |
⇧PageUp (Windows, Linux Shift+PageUp) | ページ上に矩形選択 | cursorColumnSelectPageUp |
必要であれば、keybindings.json
を編集して、より慣れ親しんだキーにバインドできます。
矩形選択モード
ユーザー設定 Editor: Column Selection はこの機能を制御します。このモードに入ると、ステータスバーに示されるように、マウスジェスチャーと矢印キーはデフォルトで矩形選択を作成します。このグローバルな切り替えは、[選択] > [矩形選択モード] メニュー項目からもアクセスできます。さらに、ステータスバーから矩形選択モードを無効にすることもできます。
保存 / 自動保存
デフォルトでは、VS Code はディスクに変更を保存するために明示的なアクション、⌘S (Windows, Linux Ctrl+S) を必要とします。
しかし、Auto Save
をオンにするのは簡単で、設定された遅延後またはエディターからフォーカスが外れたときに変更を保存します。このオプションをオンにすると、ファイルを明示的に保存する必要はありません。Auto Save
をオンにする最も簡単な方法は、[ファイル] > [自動保存] のトグルで、遅延後の保存をオン/オフにすることです。
Auto Save
の詳細な制御については、ユーザーまたはワークスペースの設定を開き、関連する設定を見つけます:
- files.autoSave: 以下の値を設定できます:
off
- 自動保存を無効にします。afterDelay
- 設定された遅延後 (デフォルト 1000 ms) にファイルを保存します。onFocusChange
- ダーティなファイルのエディターからフォーカスが外れたときにファイルを保存します。onWindowChange
- VS Code ウィンドウからフォーカスが外れたときにファイルを保存します。
- files.autoSaveDelay: files.autoSave が
afterDelay
に設定されている場合の遅延をミリ秒単位で設定します。デフォルトは 1000 ms です。
特定の言語やファイルタイプに対して Auto Save
機能をカスタマイズしたい場合は、settings.json
ファイルに言語固有のルールを追加することで可能です。
例えば、LaTeX ファイルの Auto Save
を無効にするには:
"[latex]": {
"files.autoSave": "off",
},
ホット終了
デフォルトでは、VS Code は終了時にファイルへの未保存の変更を記憶します。ホット終了は、アプリケーションが [ファイル] > [終了] (macOS では [Code] > [終了]) または最後のウィンドウが閉じられたときにトリガーされます。
files.hotExit を以下の値に設定することで、ホット終了を構成できます:
"off"
: ホット終了を無効にします。"onExit"
: アプリケーションが閉じられたとき、つまり Windows/Linux で最後のウィンドウが閉じられたとき、またはworkbench.action.quit
コマンドがトリガーされたとき (コマンドパレット、キーボードショートカット、またはメニューから) にホット終了がトリガーされます。フォルダが開かれていないすべてのウィンドウは、次回の起動時に復元されます。"onExitAndWindowClose"
: アプリケーションが閉じられたとき、つまり Windows/Linux で最後のウィンドウが閉じられたとき、またはworkbench.action.quit
コマンドがトリガーされたとき (コマンドパレット、キーボードショートカット、またはメニューから) にホット終了がトリガーされ、最後のウィンドウであるかどうかに関係なく、フォルダが開かれているウィンドウでもトリガーされます。フォルダが開かれていないすべてのウィンドウは、次回の起動時に復元されます。シャットダウン前の状態にフォルダウィンドウを復元するには、window.restoreWindows をall
に設定します。
ホット終了で問題が発生した場合、すべてのバックアップは標準的なインストール場所の以下のフォルダに保存されます:
- Windows
%APPDATA%\Code\Backups
- macOS
$HOME/Library/Application Support/Code/Backups
- Linux
$HOME/.config/Code/Backups
検索と置換
VS Code を使用すると、現在開いているファイル内のテキストをすばやく検索して置換できます。⌘F (Windows, Linux Ctrl+F) を押してエディターで検索コントロールを開き、検索文字列を入力します。検索結果はエディター、概要ルーラー、ミニマップで強調表示されます。
VS Code は入力するとすぐに検索を開始します。Enter を押したときにのみ検索を開始するには、editor.find.findOnType 設定をクリアします。
現在のファイルに複数のマッチがある場合、検索入力ボックスにフォーカスがある状態で Enter を押すと次の結果に移動し、⇧Enter (Windows, Linux Shift+Enter) を押すと前の結果に移動します。
デフォルトでは、VS Code はワークスペースの検索と置換クエリの履歴を保存し、再起動後も復元します。この動作は editor.find.history と editor.find.replaceHistory 設定で構成できます。値を never
に設定すると履歴の保存が無効になります。
選択範囲から検索文字列をシード
検索コントロールが開かれると、エディターで選択されているテキストが自動的に検索入力ボックスに入力されます。選択範囲が空の場合、代わりにカーソル下の単語が入力ボックスに挿入されます。
この機能は、editor.find.seedSearchStringFromSelection を "never"
に設定することでオフにできます。
選択範囲内を検索
デフォルトでは、検索操作はエディター内のファイル全体に対して実行されます。検索をテキスト選択範囲に限定するには、検索コントロールの [選択範囲内を検索] アイコンを選択するか、⌥⌘L (Windows, Linux Alt+L) を押します。
これを検索コントロールのデフォルトの動作にしたい場合は、editor.find.autoFindInSelection を always
に設定するか、複数行のコンテンツが選択されている場合にのみ選択されたテキストで実行したい場合は multiline
に設定します。
高度な検索と置換オプション
より高度なシナリオのために、検索と置換コントロールには以下のオプションがあります:
-
検索コントロール
- 大文字と小文字を区別する
- 単語単位で検索する
- 正規表現を使用する
-
置換コントロール
- 大文字と小文字を保持
複数行のサポートと検索コントロールのサイズ変更
検索入力ボックスと置換入力ボックスにテキストを貼り付けることで、複数行のテキストを検索できます。Ctrl+Enter を押すと、入力ボックスに新しい行が挿入されます。
長いテキストを検索しているとき、検索コントロールのデフォルトサイズは小さすぎるかもしれません。左のサッシをドラッグして検索コントロールを拡大したり、左のサッシをダブルクリックして最大化したり、デフォルトサイズに縮小したりできます。
ファイル横断検索
VS Code では、現在開いているフォルダー内のすべてのファイルをすばやく検索できます。⇧⌘F (Windows, Linux Ctrl+Shift+F) を押して検索語を入力します。検索結果は検索語を含むファイルごとにグループ化され、各ファイル内のヒット数とその場所が示されます。ファイルを展開すると、そのファイル内のすべてのヒットのプレビューが表示されます。その後、ヒットのいずれかをシングルクリックするとエディターで表示されます。
VS Code は検索ボックスでの正規表現検索もサポートしています。
検索ボックスの右下にある省略記号 (検索の詳細の切り替え) を選択する (または ⇧⌘J (Windows, Linux Ctrl+Shift+J) を押す) ことで、高度な検索オプションを設定できます。これにより、検索を設定するための追加フィールドが表示されます。
クイック検索を使用して、現在開いているフォルダー内のすべてのファイルからテキストをすばやく見つけることができます。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) を開き、Search: Quick Search コマンドを入力します。
高度な検索オプション
検索ボックスの下にある 2 つの入力ボックスに、検索に含めるまたは除外するパターンを入力できます。example
と入力すると、ワークスペース内の example
という名前のすべてのフォルダーとファイルに一致します。./example
と入力すると、ワークスペースのトップレベルにある example/
フォルダーに一致します。,
を使用して複数のパターンを区切ります。パスはスラッシュを使用する必要があります。また、glob パターン構文も使用できます。例:
*
- パスセグメント内の0個以上の文字に一致します。?
- パスセグメント内の1文字に一致します。**
- 0個を含む任意の数のパスセグメントに一致します。{}
で条件をグループ化します (例:{**/*.html,**/*.txt}
はすべての HTML とテキストファイルに一致します)[]
で一致させる文字の範囲を宣言します (example.[0-9]
はexample.0
,example.1
, ... に一致します)[!...]
で一致させない文字の範囲を指定します (example.[!0-9]
はexample.a
,example.b
に一致しますが、example.0
には一致しません)
VS Code は、興味のない検索結果の数を減らすために、デフォルトでいくつかのフォルダーを除外します (例: node_modules
)。設定を開き、files.exclude と search.exclude セクションでこれらのルールを変更します。
検索ビューの glob パターンは、files.exclude や search.exclude などの設定とは動作が異なることに注意してください。設定では、ワークスペースのサブフォルダー folder1/example
にある example
という名前のフォルダーに一致させるには **/example
を使用する必要があります。検索ビューでは、**
プレフィックスが想定されています。これらの設定の glob パターンは、常にワークスペースフォルダーのパスからの相対パスとして評価されます。
また、除外するファイルボックスの [除外設定と無視ファイルを使用] 切り替えボタンにも注意してください。この切り替えは、.gitignore
ファイルで無視されるファイルや、files.exclude および search.exclude 設定で一致するファイルを除外するかどうかを決定します。
エクスプローラーから、フォルダーを右クリックして [フォルダー内を検索] を選択すると、そのフォルダー内のみを検索できます。
検索と置換
ファイル横断での検索と置換も可能です。検索ウィジェットを展開すると、置換テキストボックスが表示されます。
置換テキストボックスにテキストを入力すると、保留中の変更の差分表示が表示されます。置換テキストボックスからすべてのファイルを置換したり、1 つのファイル内ですべてを置換したり、1 つの変更だけを置換したりできます。
↓ (Windows, Linux Down) と ↑ (Windows, Linux Up) を使用して検索語の履歴をナビゲートすることで、以前の検索語をすばやく再利用できます。
正規表現置換での大文字小文字の変更
VS Code は、エディター内またはグローバルに検索と置換を行う際に、正規表現のマッチンググループの大文字小文字を変更することをサポートしています。これは修飾子 \u\U\l\L
で行われ、\u
と \l
は 1 文字を大文字/小文字にし、\U
と \L
はマッチンググループの残りを大文字/小文字にします。
例
修飾子は重ねることもできます。例えば、\u\u\u$1
はグループの最初の 3 文字を大文字にし、\l\U$1
は最初の文字を小文字にし、残りを大文字にします。キャプチャグループは置換文字列内で $n
によって参照され、ここで n
はキャプチャグループの順序です。
検索エディター
検索エディターを使用すると、ワークスペースの検索結果をフルサイズのエディターで表示でき、構文の強調表示や、オプションで周囲のコンテキスト行も表示できます。
以下は、コンテキストのためにマッチの前後に 2 行のテキストを表示した 'SearchEditor' という単語の検索です:
[Open Search Editor (検索エディターを開く)] コマンドは、既存の検索エディターがあればそれを開き、なければ新しいものを作成します。[New Search Editor (新しい検索エディター)] コマンドは常に新しい検索エディターを作成します。
検索エディターでは、[定義に移動] アクションを使用して結果に移動できます。例えば、F12 を使用して現在のエディターグループでソースの場所を開いたり、⌘K F12 (Windows, Linux Ctrl+K F12) を使用して横のエディターで場所を開いたりします。さらに、search.searchEditor.singleClickBehaviour と search.searchEditor.doubleClickBehaviour の設定で、検索結果のシングルクリックまたはダブルクリックの動作を構成できます。例えば、ピーク定義ウィンドウを開くか、ソースの場所を開くなどです。
また、検索ビューの上部にある [Open New Search Editor (新しい検索エディターを開く)] ボタンを使用したり、結果ツリーの上部にある [Open in editor (エディターで開く)] リンクまたは Search Editor: Open Results in Editor コマンドを使用して、既存の結果を検索ビューから検索エディターにコピーすることもできます。
上記の検索エディターは、検索ビューの上部にある [Open New Search Editor (新しい検索エディターを開く)] ボタン (3 番目のボタン) を選択して開かれました。
検索エディターのコマンドと引数
search.action.openNewEditor
- 新しいタブで検索エディターを開きます。search.action.openInEditor
- 現在の検索結果を新しい検索エディターにコピーします。search.action.openNewEditorToSide
- 現在開いているウィンドウの横に、新しいウィンドウで検索エディターを開きます。
検索エディターのコマンド (search.action.openNewEditor
, search.action.openNewEditorToSide
) に渡せる 2 つの引数があり、キーボードショートカットで新しい検索エディターの動作を構成できます:
triggerSearch
- 検索エディターが開かれたときに検索を自動的に実行するかどうか。デフォルトは true です。focusResults
- 検索の結果またはクエリ入力にフォーカスを置くかどうか。デフォルトは true です。
例えば、以下のキーボードショートカットは、検索エディターが開かれたときに検索を実行しますが、フォーカスは検索クエリコントロールに残します。
{
"key": "ctrl+o",
"command": "search.action.openNewEditor",
"args": { "query": "VS Code", "triggerSearch": true, "focusResults": false }
}
検索エディターのコンテキストのデフォルト
search.searchEditor.defaultNumberOfContextLines 設定のデフォルト値は 1 で、検索エディターの各結果行の前後に 1 行のコンテキスト行が表示されることを意味します。
最後の検索エディター構成を再利用する
search.searchEditor.reusePriorSearchConfiguration 設定 (デフォルトは false
) を使用すると、新しい検索エディターを作成する際に、最後にアクティブだった検索エディターの構成を再利用できます。
IntelliSense
常に単語補完を提供しますが、JavaScript、JSON、HTML、CSS、SCSS、Less、C#、TypeScript などの豊富な言語については、真の IntelliSense 体験を提供します。言語サービスが可能な補完を知っている場合、入力すると IntelliSense の提案がポップアップします。いつでも ⌃Space (Windows, Linux Ctrl+Space) で手動でトリガーできます。デフォルトでは、Tab または Enter が受け入れのキーボードトリガーですが、これらのキーボードショートカットをカスタマイズすることもできます。
提案のフィルタリングはキャメルケースをサポートしているため、メソッド名で大文字になっている文字を入力して提案を絞り込むことができます。たとえば、「cra」と入力すると、「createApplication」がすぐに表示されます。
IntelliSense の提案は、editor.quickSuggestions および editor.suggestOnTriggerCharacters の設定で構成できます。
JavaScript と TypeScript の開発者は、npmjs 型定義 (typings) ファイルリポジトリを利用して、一般的な JavaScript ライブラリ (Node.js、React、Angular) の IntelliSense を取得できます。型定義ファイルの使用に関する良い説明は、JavaScript 言語のトピックと Node.js のチュートリアルにあります。
詳細については、IntelliSense のドキュメントをご覧ください。
フォーマット
VS Code はソースコードのフォーマットを強力にサポートしています。エディターには 2 つの明示的なフォーマットアクションがあります:
- ドキュメントのフォーマット (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) - アクティブなファイル全体をフォーマットします。
- 選択範囲のフォーマット (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) - 選択されたテキストをフォーマットします。
これらはコマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) またはエディターのコンテキストメニューから呼び出すことができます。
VS Code には、JavaScript、TypeScript、JSON、HTML、CSS のデフォルトフォーマッターがあります。各言語には特定のフォーマットオプション (例: html.format.indentInnerHtml) があり、ユーザーまたはワークスペースの設定で好みに合わせて調整できます。同じ言語のフォーマットを提供する別の拡張機能がインストールされている場合は、デフォルトの言語フォーマッターを無効にすることもできます。
"html.format.enable": false
コードフォーマットを手動で呼び出すだけでなく、入力、保存、貼り付けなどのユーザーのジェスチャーに基づいてフォーマットをトリガーすることもできます。これらはデフォルトではオフですが、以下の設定を通じてこれらの動作を有効にできます:
- editor.formatOnType - 入力後に行をフォーマットします。
- editor.formatOnSave - 保存時にファイルをフォーマットします。
- editor.formatOnPaste - 貼り付けた内容をフォーマットします。
すべてのフォーマッターが貼り付け時のフォーマットをサポートしているわけではありません。そのためには、選択範囲またはテキストの範囲のフォーマットをサポートする必要があります。
デフォルトのフォーマッターに加えて、マーケットプレイスで他の言語やフォーマットツールをサポートする拡張機能を見つけることができます。Formatters
カテゴリがあるので、フォーマット拡張機能を簡単に検索して見つけることができます。拡張機能ビューの検索ボックスに「formatters」または「category:formatters」と入力すると、VS Code 内の拡張機能のフィルタリングされたリストが表示されます。
折りたたみ
行番号と行頭の間のガターにある折りたたみアイコンを使用して、ソースコードの領域を折りたたむことができます。ガターの上にマウスを移動し、クリックして領域を折りたたんだり展開したりします。折りたたみアイコンを Shift + Click すると、その領域と内部のすべての領域を折りたたんだり展開したりできます。
次のアクションも使用できます:
- 折りたたむ (⌥⌘[ (Windows, Linux Ctrl+Shift+[)) - カーソル位置の最も内側の展開されている領域を折りたたみます。
- 展開する (⌥⌘] (Windows, Linux Ctrl+Shift+])) - カーソル位置の折りたたまれた領域を展開します。
- 折りたたみの切り替え (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) - カーソル位置の領域を折りたたむか展開します。
- 再帰的に折りたたむ (⌘K ⌘[ (Windows, Linux Ctrl+K Ctrl+[)) - カーソル位置の最も内側の展開されている領域と、その領域内のすべての領域を折りたたみます。
- 再帰的に展開する (⌘K ⌘] (Windows, Linux Ctrl+K Ctrl+])) - カーソル位置の領域とその領域内のすべての領域を展開します。
- すべて折りたたむ (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) - エディター内のすべての領域を折りたたみます。
- すべて展開する (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) - エディター内のすべての領域を展開します。
- レベル X で折りたたむ (レベル 2 の場合 ⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2)) - 現在のカーソル位置の領域を除き、レベル X のすべての領域を折りたたみます。
- すべてのブロックコメントを折りたたむ (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) - ブロックコメントトークンで始まるすべての領域を折りたたみます。
折りたたみ領域は、デフォルトで行のインデントに基づいて評価されます。折りたたみ領域は、ある行のインデントが後続の 1 つ以上の行よりも小さい場合に始まり、同じかそれ以下のインデントの行がある場合に終わります。
折りたたみ領域は、エディターで設定された言語の構文トークンに基づいて計算することもできます。以下の言語はすでに構文を意識した折りたたみを提供しています: Markdown, HTML, CSS, LESS, SCSS, JSON。
上記の言語の 1 つ (またはすべて) でインデントベースの折りたたみに戻したい場合は、以下を使用してください:
"[html]": {
"editor.foldingStrategy": "indentation"
},
領域は、各言語で定義されたマーカーによっても定義できます。現在マーカーが定義されている言語は以下の通りです:
言語 | 開始領域 | 終了領域 |
---|---|---|
Bat | ::#region または REM #region |
::#endregion または REM #endregion |
C# | #region |
#endregion |
C/C++ | #pragma region |
#pragma endregion |
CSS/Less/SCSS | /*#region*/ |
/*#endregion*/ |
Coffeescript | #region |
#endregion |
F# | //#region または (#_region) |
//#endregion または (#_endregion) |
Java | //#region または //<editor-fold> |
//#endregion または //</editor-fold> |
Markdown | <!-- #region --> |
<!-- #endregion --> |
Perl5 | #region または =pod |
#endregion または =cut |
PHP | #region |
#endregion |
PowerShell | #region |
#endregion |
Python | #region または # region |
#endregion または # endregion |
TypeScript/JavaScript | //#region |
//#endregion |
Visual Basic | #Region |
#End Region |
マーカーによって定義された領域のみを折りたたんだり展開したりするには、以下を使用します:
- マーカー領域を折りたたむ (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) - すべてのマーカー領域を折りたたみます。
- マーカー領域を展開する (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) - すべてのマーカー領域を展開します。
選択範囲の折りたたみ
コマンド [Create Manual Folding Ranges from Selection (選択範囲から手動の折りたたみ範囲を作成)] (⌘K ⌘, (Windows, Linux Ctrl+K Ctrl+,)) は、現在選択されている行から折りたたみ範囲を作成し、それを折りたたみます。その範囲は手動折りたたみ範囲と呼ばれ、折りたたみプロバイダーによって計算された範囲の上に置かれます。
手動折りたたみ範囲は、コマンド [Remove Manual Folding Ranges (手動の折りたたみ範囲を削除)] (⌘K ⌘. (Windows, Linux Ctrl+K Ctrl+.)) で削除できます。
手動折りたたみ範囲は、折りたたみのためのプログラミング言語サポートがない場合に特に便利です。
インデント
VS Code では、テキストのインデントを制御し、スペースを使用するかタブストップを使用するかを選択できます。デフォルトでは、VS Code はスペースを挿入し、Tab キーごとに 4 つのスペースを使用します。別のデフォルトを使用したい場合は、editor.insertSpaces と editor.tabSize の設定を変更できます。
"editor.insertSpaces": true,
"editor.tabSize": 4,
自動検出
VS Code は開いているファイルを分析し、ドキュメントで使用されているインデントを決定します。自動検出されたインデントは、デフォルトのインデント設定を上書きします。検出された設定はステータスバーの右側に表示されます。
ステータスバーのインデント表示をクリックすると、インデントコマンドのドロップダウンが表示され、開いているファイルのデフォルト設定を変更したり、タブストップとスペースの間で変換したりできます。
VS Code の自動検出は、2、4、6、または 8 スペースのインデントをチェックします。ファイルが異なる数のスペースを使用している場合、インデントが正しく検出されない可能性があります。たとえば、慣習として 3 スペースでインデントする場合は、editor.detectIndentation をオフにし、タブサイズを明示的に 3 に設定するとよいでしょう。
"editor.detectIndentation": false,
"editor.tabSize": 3,
ファイルエンコーディングのサポート
ユーザー設定またはワークスペース設定の files.encoding 設定を使用して、ファイルエンコーディングをグローバルまたはワークスペースごとに設定します。
ステータスバーでファイルエンコーディングを確認できます。
ステータスバーのエンコーディングボタンをクリックして、アクティブなファイルを別のエンコーディングで再度開くか保存します。
次にエンコーディングを選択します。
上書きモード
リリース 1.96 以前は、VS Code は Vim キーマップ拡張機能をインストールしない限り、カーソル位置に文字が挿入される挿入モードのみをサポートしていました。
リリース 1.96 以降、VS Code は上書きモードをサポートしており、カーソル位置に文字を挿入する代わりに既存の文字を上書きできます。デフォルトでは、上書きモードはオフになっています。
挿入モードと上書きモードを切り替えるには、コマンドパレットでToggle Overtype/Insert Mode (上書き/挿入モードの切り替え) コマンドを実行するか、(⌥⌘O (Windows, Linux Insert)) を押します。上書きモードのときは、ステータスバーに OVR
というインジケーターが表示されます。
editor.overtypeCursorStyle 設定を構成することで、上書きモードのカーソルスタイルを変更できます。
editor.overtypeOnPaste 設定を使用して、貼り付け時にテキストを上書きします。この設定が有効になるには、上書きモードである必要があります。
ファイルの比較
VS Code は、現在のファイルまたは任意の 2 つのファイルの内容を比較するためのいくつかの方法をサポートしています。
エディターでアクティブなファイルを開いている場合、次の比較オプションがあります:
- ワークスペースファイルとの比較: コマンドパレットで、File: Compare Active File With... を選択し、比較する別のファイルを選択します。
- クリップボードとの比較: コマンドパレットで、File: Compare Active File with Clipboard (⌘K C (Windows, Linux Ctrl+K C)) を選択して、現在のファイルをクリップボードの内容と比較します。
- 保存済みとの比較: コマンドパレットで、File: Compare Active File with Saved (⌘K D (Windows, Linux Ctrl+K D)) を選択して、現在のファイルを最後に保存されたバージョンと比較します。
任意の 2 つのファイルを比較するには:
- エクスプローラービューでファイルを右クリックし、[Select for Compare (比較対象として選択)] を選択します。次に、2 番目のファイルを右クリックし、[Compare with Selected (選択項目と比較)] を選択します。
- 2 つの空のエディターウィンドウ間で比較を開始するには、コマンドパレットから File: Compare New Untitled Text Files を選択します。
--diff
オプションを使用してコマンドラインから VS Code を起動し、2 つのファイルを比較できます。VS Code コマンドラインインターフェイスについて詳しく学びます。
次のステップ
基本的なユーザーインターフェイスについては説明しました。VS Code にはさらに多くの機能があります。以下を読んで詳細を確認してください:
- 紹介ビデオ - セットアップと基本 - VS Code の基本に関するチュートリアルを視聴します。
- ユーザー/ワークスペース設定 - ユーザー設定とワークスペース設定を通じて、VS Code を好みに合わせて設定する方法を学びます。
- コードナビゲーション - Peek と Goto Definition、その他。
- 統合ターミナル - VS Code 内からコマンドラインタスクをすばやく実行するための統合ターミナルについて学びます。
- IntelliSense - VS Code はスマートなコード補完を提供します。
- デバッグ - ここがVS Codeの真骨頂です。
よくある質問
グローバルに検索と置換は可能ですか?
はい、検索ビューのテキストボックスを展開して置換テキストフィールドを含めます。ワークスペース内のすべてのファイルで検索と置換ができます。VS Code をフォルダーで開いていない場合、検索は現在開いているファイルでのみ実行されることに注意してください。
ワードラップをオンにするにはどうすればよいですか?
ワードラップは editor.wordWrap 設定で制御できます。デフォルトでは、editor.wordWrap は off
ですが、on
に設定すると、テキストはエディターのビューポート幅で折り返されます。
"editor.wordWrap": "on"
⌥Z (Windows, Linux Alt+Z) で VS Code セッションのワードラップを切り替えることができます。
また、editor.rulers 設定でエディターに垂直列ルーラーを追加することもできます。この設定は、垂直ルーラーを表示したい列の文字位置の配列を受け取ります。
他のエディターと同様に、切り取りやコピーなどのコマンドは、折り返された行全体に適用されます。トリプルクリックすると、折り返された行全体が選択されます。Home を 2 回押すとカーソルが行の先頭に移動し、End を 2 回押すとカーソルが行の末尾に移動します。
折り返された行に余分なカーソルを配置しないようにするにはどうすればよいですか?
現在の選択範囲の上下にカーソルを追加する際に、行の折り返しを無視したい場合は、キーボードショートカットの args
に { "logicalLine": true }
を次のように渡すことができます:
{
"key": "shift+alt+down",
"command": "editor.action.insertCursorBelow",
"when": "textInputFocus",
"args": { "logicalLine": true },
},
{
"key": "shift+alt+up",
"command": "editor.action.insertCursorAbove",
"when": "textInputFocus",
"args": { "logicalLine": true },
},