🚀 VS Code で で入手しましょう!

基本的な編集

Visual Studio Code は第一にエディターであり、生産性の高いソースコード編集に必要な機能が含まれています。このトピックでは、エディターの基本について説明し、コードの操作を開始するのに役立ちます。

キーボードショートカット

コードを書くときにキーボードから手を離さないことは、高い生産性にとって非常に重要です。VS Code には、豊富なデフォルトのキーボードショートカットセットがあり、カスタマイズも可能です。

複数選択 (マルチカーソル)

VS Code は、高速な同時編集のためのマルチカーソルをサポートしています。補助カーソル (細く表示) は、Alt+クリックで追加できます。各カーソルは、配置されているコンテキストに基づいて独立して動作します。より多くのカーソルを追加する一般的な方法は、⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) または ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) を使用して、上下にカーソルを挿入することです。

グラフィックカードドライバー (NVIDIA など) がこれらのデフォルトのショートカットを上書きする場合があります。

Multi-cursor

⌘D (Windows, Linux Ctrl+D) は、カーソル位置の単語、または現在の選択の次の出現箇所を選択します。

Multi-cursor-next-word

ヒント

また、⇧⌘L (Windows, Linux Ctrl+Shift+L) を使用してより多くのカーソルを追加することもできます。これにより、現在選択されているテキストのすべての出現箇所に選択が追加されます。

マルチカーソル修飾キー

マルチカーソルを適用するための修飾キーを macOS で Cmd+クリック、Windows および Linux で Ctrl+クリック に変更したい場合は、editor.multiCursorModifier 設定で行うことができます。これにより、Sublime Text や Atom などの他のエディターから移行してきたユーザーは、使い慣れたキーボード修飾キーを引き続き使用できます。

設定は以下に設定できます

  • ctrlCmd - Windows では Ctrl、macOS では Cmd にマップされます。
  • alt - 既存のデフォルト Alt

メニュー項目 [選択] > [Ctrl+クリックでマルチカーソルに切り替え] または [選択] > [Alt+クリックでマルチカーソルに切り替え] を使用して、この設定をすばやく切り替えることもできます。

[定義へ移動] および [リンクを開く] ジェスチャもこの設定を尊重し、競合しないように適応します。たとえば、設定が ctrlCmd の場合、Ctrl/Cmd+クリックで複数のカーソルを追加でき、Alt+クリックでリンクを開いたり、定義へ移動したりできます。

選択範囲の縮小/拡大

現在の選択範囲をすばやく縮小または拡大します。⌃⇧⌘← (Windows, Linux Shift+Alt+Left) および ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) でトリガーします。

以下は、⌃⇧⌘→ (Windows, Linux Shift+Alt+Right) で選択範囲を拡大する例です。

Expand selection

列 (ボックス) 選択

一方の隅にカーソルを置き、Shift+Alt を押しながら反対側の隅までドラッグします。

Column text selection

これは、マルチカーソル修飾キーとして 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編集して、必要に応じてより使い慣れたものにバインドできます。

列選択モード

ユーザー設定 [エディター: 列選択] は、この機能を制御します。このモードに入ると、ステータスバーに示されているように、マウスジェスチャと矢印キーはデフォルトで列選択を作成します。このグローバルトグルは、[選択] > [列選択モード] メニュー項目からもアクセスできます。さらに、ステータスバーから列選択モードを無効にすることもできます。

保存 / 自動保存

デフォルトでは、VS Code はディスクに変更を保存するために明示的なアクションを必要とします。 ⌘S (Windows, Linux Ctrl+S)

ただし、自動保存をオンにすることは簡単です。これにより、構成された遅延後、またはフォーカスがエディターから離れたときに変更が保存されます。このオプションがオンになっている場合、ファイルを明示的に保存する必要はありません。自動保存をオンにする最も簡単な方法は、[ファイル] > [自動保存] トグルを使用して、遅延後の保存をオン/オフにすることです。

自動保存をより詳細に制御するには、ユーザーまたはワークスペースの 設定を開き、関連する設定を見つけます。

  • files.autoSave: 次の値を持つことができます
    • off - 自動保存を無効にします。
    • afterDelay - 構成された遅延 (デフォルトは 1000 ミリ秒) 後にファイルを保存します。
    • onFocusChange - ダーティファイルのエディターからフォーカスが移動したときにファイルを保存します。
    • onWindowChange - フォーカスが VS Code ウィンドウから移動したときにファイルを保存します。
  • files.autoSaveDelay: files.autoSaveafterDelay に構成されている場合の遅延をミリ秒単位で構成します。デフォルトは 1000 ミリ秒です。

特定の言語またはファイルタイプに対して 自動保存 機能をカスタマイズする場合は、言語固有のルールを settings.json ファイルに追加することで実行できます。

たとえば、LaTeX ファイルの 自動保存 を無効にするには

    "[latex]": {
        "files.autoSave": "off",
    },

ホットイグジット

デフォルトでは、VS Code は終了時にファイルへの未保存の変更を記憶します。ホットイグジットは、[ファイル] > [終了] (macOS では [Code] > [終了]) を介してアプリケーションが閉じられたとき、または最後のウィンドウが閉じられたときにトリガーされます。

files.hotExit を次の値に設定して、ホットイグジットを構成できます。

  • "off": ホットイグジットを無効にします。
  • "onExit": ホットイグジットは、アプリケーションが閉じられたとき、つまり Windows/Linux で最後のウィンドウが閉じられたとき、または workbench.action.quit コマンドがトリガーされたとき ([コマンドパレット]、キーボードショートカット、またはメニューから) にトリガーされます。フォルダーが開かれていないすべてのウィンドウは、次回の起動時に復元されます。
  • "onExitAndWindowClose": ホットイグジットは、アプリケーションが閉じられたとき、つまり Windows/Linux で最後のウィンドウが閉じられたとき、または workbench.action.quit コマンドがトリガーされたとき ([コマンドパレット]、キーボードショートカット、またはメニューから) にトリガーされ、フォルダーが開かれているすべてのウィンドウに対しても、最後のウィンドウであるかどうかに関係なくトリガーされます。フォルダーが開かれていないすべてのウィンドウは、次回の起動時に復元されます。シャットダウン前のフォルダーウィンドウを以前の状態に復元するには、window.restoreWindowsall に設定します。

ホットイグジットで問題が発生した場合、すべてのバックアップは標準インストール場所の次のフォルダーに保存されます。

  • Windows %APPDATA%\Code\Backups
  • macOS $HOME/Library/Application Support/Code/Backups
  • Linux $HOME/.config/Code/Backups

検索と置換

VS Code を使用すると、現在開いているファイルでテキストをすばやく検索および置換できます。⌘F (Windows, Linux Ctrl+F) を押してエディターで検索ウィジェットを開くと、検索結果がエディター、概要ルーラー、およびミニマップで強調表示されます。

現在開いているファイルに複数の一致する結果がある場合は、Enter および ⇧Enter (Windows, Linux Shift+Enter) を押すと、検索入力ボックスにフォーカスがあるときに、次または前の結果に移動できます。

デフォルトでは、VS Code はワークスペースの検索および置換クエリの履歴を保存し、再起動間で復元します。この動作は、editor.find.history および editor.find.replaceHistory 設定で構成できます。履歴の保存を無効にするには、値を never に設定します。

選択範囲から検索文字列をシードする

検索ウィジェットが開くと、エディターで選択されたテキストが自動的に検索入力ボックスに入力されます。選択範囲が空の場合、代わりにカーソル下の単語が入力ボックスに挿入されます。

Seed Search String From Selection

この機能は、editor.find.seedSearchStringFromSelection"never" に設定することでオフにできます。

選択範囲内検索

デフォルトでは、検索操作はエディター内のファイル全体で実行されます。選択したテキストに対して実行することもできます。この機能をオンにするには、検索ウィジェットのハンバーガーアイコンをクリックします。

Find In Selection

これを検索ウィジェットのデフォルトの動作にする場合は、editor.find.autoFindInSelectionalways に設定するか、複数行のコンテンツが選択されている場合にのみ選択したテキストに対して実行する場合は multiline に設定します。

高度な検索と置換のオプション

検索ウィジェットには、プレーンテキストでの検索と置換に加えて、3 つの高度な検索オプションもあります。

  • 大文字と小文字を区別する
  • 単語単位で一致
  • 正規表現

置換入力ボックスは、大文字と小文字の保持をサポートしています。大文字と小文字を保持 (AB) ボタンをクリックしてオンにできます。

複数行のサポートと検索ウィジェットのサイズ変更

複数行のテキストを検索するには、テキストを検索入力ボックスと置換入力ボックスに貼り付けます。Ctrl+Enter を押すと、入力ボックスに新しい行が挿入されます。

Multiple Line Support

長いテキストを検索する場合、検索ウィジェットのデフォルトサイズが小さすぎる場合があります。左側のサッシをドラッグして検索ウィジェットを拡大したり、左側のサッシをダブルクリックして最大化したり、デフォルトサイズに縮小したりできます。

Resize Find Widget

ファイル全体の検索

VS Code を使用すると、現在開いているフォルダー内のすべてのファイルをすばやく検索できます。⇧⌘F (Windows, Linux Ctrl+Shift+F) を押して検索語句を入力します。検索結果は、検索語句を含むファイルにグループ化され、各ファイルと場所でのヒット数が示されます。ファイルを展開すると、そのファイル内のすべてのヒットのプレビューが表示されます。次に、いずれかのヒットをシングルクリックして、エディターで表示します。

A simple text search across files

ヒント

検索ボックスでの正規表現検索もサポートしています。

検索の詳細オプションを構成するには、検索ボックスの右下にある省略記号 ([検索詳細の切り替え]) をクリックします (または ⇧⌘J (Windows, Linux Ctrl+Shift+J) を押します)。これにより、検索を構成するための追加フィールドが表示されます。

ヒント

クイック検索を使用すると、現在開いているフォルダー内のすべてのファイルからテキストをすばやく見つけることができます。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) を開き、[検索: クイック検索] コマンドを入力します。

高度な検索オプション

Advanced search options

検索ボックスの下にある 2 つの入力ボックスに、検索に含めるまたは除外するパターンを入力できます。example と入力すると、ワークスペース内の example という名前のすべてのフォルダーとファイルが一致します。./example と入力すると、ワークスペースのトップレベルにあるフォルダー example/ が一致します。複数のパターンを区切るには、, を使用します。パスはフォワードスラッシュを使用する必要があります。glob パターン構文を使用することもできます。例:

  • パスセグメント内の 0 個以上の文字に一致する *
  • パスセグメント内の 1 文字に一致する ?
  • パスセグメントの数に関係なく (なしを含む) 一致する **
  • 条件をグループ化する {} (例: {**/*.html,**/*.txt} はすべての HTML ファイルとテキストファイルに一致します)
  • 一致する文字の範囲を 宣言 する [] (example.[0-9]example.0example.1 などに一致します)
  • 一致する文字の範囲を否定する [!...] (example.[!0-9]example.aexample.b に一致しますが、example.0 には一致しません)

VS Code は、関心のない検索結果の数を減らすために、デフォルトで一部のフォルダーを除外しています (例: node_modules)。設定を開き、files.exclude および search.exclude セクションでこれらのルールを変更します。

検索ビューの glob パターンは、files.excludesearch.exclude などの設定とは異なる動作をすることに注意してください。設定では、ワークスペース内の folder1/example サブフォルダーにある example という名前のフォルダーに一致させるには、**/example を使用する必要があります。検索ビューでは、** プレフィックスが想定されています。これらの設定の glob パターンは、常にワークスペースフォルダーのパスを基準に評価されます。

また、[除外設定と無視ファイルを使用する] トグルボタンを [除外するファイル] ボックスに注意してください。このトグルは、.gitignore ファイルで無視されるファイルや、files.exclude および search.exclude 設定によって一致するファイルを除外するかどうかを決定します。

ヒント

エクスプローラーから、フォルダーを右クリックして [フォルダー内で検索] を選択すると、フォルダー内のみを検索できます。

検索と置換

ファイル全体で検索と置換を行うこともできます。検索ウィジェットを展開して、[置換] テキストボックスを表示します。

search and replace

[置換] テキストボックスにテキストを入力すると、保留中の変更の差分表示が表示されます。[置換] テキストボックスからすべてのファイルで置換したり、1 つのファイル内のすべてを置換したり、単一の変更を置換したりできます。

search and replace diff view

ヒント

以前の検索語句をすばやく再利用するには、 (Windows, Linux Down) および (Windows, Linux Up) を使用して、検索語句の履歴を移動します。

正規表現置換での大文字と小文字の変更

VS Code は、エディターまたはグローバルで検索と置換を実行中に、正規表現一致グループの大文字と小文字の変更をサポートしています。これは、修飾子 \u\U\l\L で行われます。\u\l は単一の文字を大文字/小文字にし、\U\L は一致グループの残りの部分を大文字/小文字にします。

Changing case while doing find and replace

修飾子はスタックすることもできます。たとえば、\u\u\u$1 はグループの最初の 3 文字を大文字にし、\l\U$1 は最初の文字を小文字にし、残りを大文字にします。キャプチャグループは、置換文字列で $n によって参照されます。n はキャプチャグループの順序です。

検索エディター

検索エディターを使用すると、構文の強調表示とオプションの周囲のコンテキスト行を備えたフルサイズの​​エディターでワークスペースの検索結果を表示できます。

以下は、コンテキストとして一致の前後のテキスト行が 2 行ある 'SearchEditor' という単語の検索です。

Search Editor overview

[検索エディターを開く] コマンドは、既存の検索エディターが存在する場合はそれを開き、存在しない場合は新しい検索エディターを作成します。[新しい検索エディター] コマンドは、常に新しい検索エディターを作成します。

検索エディターでは、結果は [定義へ移動] アクションを使用してナビゲートできます。たとえば、F12 は現在のエディターグループのソースの場所を開き、⌘K F12 (Windows, Linux Ctrl+K F12) はサイドのエディターで場所を開きます。さらに、search.searchEditor.singleClickBehaviour および search.searchEditor.doubleClickBehaviour 設定を使用して、検索結果をシングルクリックまたはダブルクリックした場合の動作を構成できます。たとえば、ピーク定義ウィンドウを開いたり、ソースの場所を開いたりできます。

検索ビューの上部にある [新しい検索エディターを開く] ボタンを使用したり、結果ツリーの上部にある [エディターで開く] リンク、または [検索エディター: エディターで結果を開く] コマンドを使用して、既存の検索結果を検索ビューから検索エディターにコピーしたりすることもできます。

Search Editor Button

上記の検索エディターは、検索ビューの上部にある [新しい検索エディターを開く] ボタン (3 番目のボタン) を選択して開かれました。

検索エディターのコマンドと引数

  • search.action.openNewEditor - 新しいタブで検索エディターを開きます。
  • search.action.openInEditor - 現在の検索結果を新しい検索エディターにコピーします。
  • search.action.openNewEditorToSide - 現在開いているウィンドウの横に新しいウィンドウで検索エディターを開きます。

検索エディターコマンド (search.action.openNewEditorsearch.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

VS Code は常にワード補完を提供しますが、JavaScript、JSON、HTML、CSS、SCSS、Less、C#、TypeScript などのリッチな 言語については、本格的な IntelliSense エクスペリエンスを提供します。言語サービスが可能な補完を認識している場合、入力時に IntelliSense の候補がポップアップ表示されます。 ⌃Space (Windows、Linux Ctrl+Space) でいつでも手動でトリガーできます。デフォルトでは、Tab キーまたは Enter キーが確定のキーボードトリガーですが、これらのキーボードショートカットをカスタマイズすることもできます。

ヒント

候補のフィルタリングは CamelCase をサポートしているため、メソッド名で大文字になっている文字を入力して候補を絞り込むことができます。たとえば、「cra」と入力すると、「createApplication」がすぐに表示されます。

ヒント

IntelliSense の候補は、editor.quickSuggestions および editor.suggestOnTriggerCharacters 設定で構成できます。

JavaScript および TypeScript 開発者は、一般的な JavaScript ライブラリ (Node.js、React、Angular) の IntelliSense を取得するために、npmjs タイプ宣言 (型定義) ファイルリポジトリを利用できます。タイプ宣言ファイルの使用方法に関する詳細な説明は、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 - 貼り付けられたコンテンツをフォーマットします。

すべてのフォーマッターが貼り付け時のフォーマットをサポートしているわけではありません。そのためには、テキストの選択または範囲のフォーマットをサポートする必要があります。

デフォルトのフォーマッターに加えて、Marketplace で他の言語またはフォーマットツールをサポートする拡張機能を見つけることができます。Formatters カテゴリがあり、フォーマット拡張機能を簡単に検索して見つけることができます。拡張機能ビューの検索ボックスに「formatters」または「category:formatters」と入力して、VS Code 内の拡張機能のフィルタリングされたリストを表示します。

折りたたみ

行番号と行の先頭の間のガターにある折りたたみアイコンを使用して、ソースコードの領域を折りたたむことができます。ガターにマウスを移動し、クリックして領域を折りたたんだり展開したりします。折りたたみアイコンを Shift + クリック すると、領域と内部のすべての領域を折りたたんだり展開したりできます。

Folding

次のアクションも使用できます。

  • 折りたたみ (⌥⌘[ (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+Shift+])) カーソル位置にある領域と、その領域内のすべての領域を展開します。
  • すべて折りたたみ (⌘K ⌘0 (Windows、Linux Ctrl+K Ctrl+0)) エディター内のすべての領域を折りたたみます。
  • すべて展開 (⌘K ⌘J (Windows、Linux Ctrl+K Ctrl+J)) エディター内のすべての領域を展開します。
  • レベル X を折りたたみ (⌘K ⌘2 (Windows、Linux Ctrl+K Ctrl+2) レベル 2 の場合) カーソル位置にある領域を除く、レベル X のすべての領域を折りたたみます。
  • ブロックコメントをすべて折りたたみ (⌘K ⌘/ (Windows、Linux Ctrl+K Ctrl+/)) ブロックコメントトークンで始まるすべての領域を折りたたみます。

デフォルトでは、折りたたみ領域は行のインデントに基づいて評価されます。折りたたみ領域は、ある行が後続の 1 行以上の行よりもインデントが小さい場合に開始し、同じまたは小さいインデントを持つ行がある場合に終了します。

折りたたみ領域は、エディターの構成済み言語の構文トークンに基づいて計算することもできます。次の言語は、すでに構文認識折りたたみを提供しています: Markdown、HTML、CSS、LESS、SCSS、および JSON。

上記の言語のいずれか (またはすべて) でインデントベースの折りたたみに戻したい場合は、以下を使用します。

  "[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)) すべてのマーカー領域を展開します。

選択範囲を折りたたみ

選択範囲から手動折りたたみ範囲を作成 コマンド (⌘K ⌘, (Windows、Linux Ctrl+K Ctrl+,)) は、現在選択されている行から折りたたみ範囲を作成し、折りたたみます。その範囲は、折りたたみプロバイダーによって計算された範囲の上に重ねられる 手動 折りたたみ範囲と呼ばれます。

手動折りたたみ範囲は、手動折りたたみ範囲を削除 コマンド (⌘K ⌘. (Windows、Linux Ctrl+K Ctrl+.)) で削除できます。

手動折りたたみ範囲は、折りたたみのプログラミング言語サポートがない場合に特に役立ちます。

インデント

VS Code では、テキストのインデントと、スペースまたはタブストップを使用するかどうかを制御できます。デフォルトでは、VS Code はスペースを挿入し、Tab キーごとに 4 つのスペースを使用します。別のデフォルトを使用したい場合は、editor.insertSpaces および editor.tabSize 設定を変更できます。

    "editor.insertSpaces": true,
    "editor.tabSize": 4,

自動検出

VS Code は、開いているファイルを分析し、ドキュメントで使用されているインデントを判別します。自動検出されたインデントは、デフォルトのインデント設定をオーバーライドします。検出された設定は、ステータスバーの右側に表示されます。

auto detect indentation

ステータスバーのインデント表示をクリックすると、インデントコマンドのドロップダウンが表示され、開いているファイルのデフォルト設定を変更したり、タブストップとスペースを変換したりできます。

indentation commands

VS Code の自動検出は、2、4、6、または 8 スペースのインデントを確認します。ファイルが異なる数のスペースを使用している場合、インデントが正しく検出されない場合があります。たとえば、3 スペースでインデントするのが慣例である場合は、editor.detectIndentation をオフにして、タブサイズを明示的に 3 に設定することをお勧めします。

    "editor.detectIndentation": false,
    "editor.tabSize": 3,

ファイルエンコードのサポート

ユーザー設定またはワークスペース設定files.encoding 設定を使用して、ファイルエンコーディングをグローバルまたはワークスペースごとに設定します。

files.encoding setting

ステータスバーでファイルエンコーディングを表示できます。

Encoding in status bar

ステータスバーのエンコーディングボタンをクリックして、アクティブなファイルを別のエンコーディングで再度開いたり、保存したりします。

Reopen or save with a different encoding

次に、エンコーディングを選択します。

Select an encoding

上書きモード

リリース 1.96 より前では、Vim キーマップ拡張機能をインストールしない限り、VS Code はカーソル位置に文字が挿入される挿入モードのみをサポートしていました。

リリース 1.96 以降、VS Code はカーソル位置に文字を挿入する代わりに既存の文字を上書きできる上書きモードをサポートしています。デフォルトでは、上書きモードはオフになっています。

挿入モードと上書きモードを切り替えるには、コマンドパレットで 上書き/挿入モードの切り替え コマンドを実行するか、(⌥⌘O (Windows、Linux Insert)) を押します。上書きモードの場合、ステータスバーインジケーターに OVR が表示されます。

editor.overtypeCursorStyle 設定を構成することで、上書きモードのカーソルスタイルを変更できます。

貼り付け時にテキストを上書きするには、editor.overtypeOnPaste 設定を使用します。この設定を有効にするには、上書きモードになっている必要があります。

ファイルの比較

VS Code は、現在のファイルまたは任意の 2 つのファイルの内容を比較するいくつかの方法をサポートしています。

エディターでアクティブなファイルを開いている場合、次の比較オプションがあります。

  • ワークスペースファイルと比較: コマンドパレットで ファイル: アクティブなファイルを比較... を選択し、比較する別のファイルを選択します。
  • クリップボードと比較: コマンドパレットで ファイル: アクティブなファイルをクリップボードと比較 (⌘K C (Windows、Linux Ctrl+K C)) を選択して、現在のファイルとクリップボードの内容を比較します。
  • 保存済みと比較: コマンドパレットで ファイル: アクティブなファイルを保存済みと比較 (⌘K D (Windows、Linux Ctrl+K D)) を選択して、現在のファイルと最後に保存されたバージョンを比較します。

任意の 2 つのファイルを比較するには

  • エクスプローラービューでファイルを右クリックし、比較用に選択 を選択します。次に、2 番目のファイルを右クリックし、選択項目と比較 を選択します。
  • 2 つの空のエディターウィンドウ間の比較を開始するには、コマンドパレットから ファイル: 新規の無題テキストファイルを比較 を選択します。
ヒント

--diff オプションを指定してコマンドラインから VS Code を起動し、2 つのファイルを比較できます。詳細については、VS Code コマンドラインインターフェースを参照してください。

次のステップ

基本的なユーザーインターフェースについて説明しました。VS Code には他にも多くの機能があります。詳細については、以下を参照してください。

よくある質問

グローバル検索と置換は可能ですか?

はい、検索ビューのテキストボックスを展開して、置換テキストフィールドを含めます。ワークスペース内のすべてのファイルで検索と置換を実行できます。フォルダーで VS Code を開いていない場合、検索は現在開いているファイルでのみ実行されることに注意してください。

global search and replace

ワードラップをオンにするにはどうすればよいですか?

ワードラップは、editor.wordWrap 設定で制御できます。デフォルトでは、editor.wordWrapoff ですが、on に設定すると、テキストはエディターのビューポート幅で折り返されます。

    "editor.wordWrap": "on"

VS Code セッションのワードラップを切り替えるには、⌥Z (Windows、Linux Alt+Z) を使用します。

また、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 },
},