VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code のヒントとテクニック

この記事のヒントとテクニックを活用して、Visual Studio Code をすぐに使いこなし、生産性を向上させる方法を学びましょう。強力な編集機能、コードインテリジェンス、およびソースコード管理機能に慣れ親しみ、便利なキーボード ショートカットを習得してください。使用開始とユーザーガイドにある他の詳細なトピックも確認して、さらに学びを深めてください。

使い始めたばかりの方は、VS Code チュートリアルで主要機能をステップバイステップで学ぶことができます。

Visual Studio Code がインストールされていない場合は、ダウンロードページにアクセスしてください。Linux、macOS、Windows での VS Code の実行に関するプラットフォームごとのセットアップ手順を見つけることができます。

ビデオがお好みですか?Visual Studio Code のヒントとテクニック、またはVS Code エクスペリエンスを向上させるという VS Code Day の講演をご覧いただけます。

基本

はじめに

VS Code を実際に体験する最善の方法は、ウェルカムページを開き、ウォークスルーを選択して、VS Code が提供するセットアップ手順、機能、およびより詳細なカスタマイズを自己学習ツアーで進めることです。発見し学習するにつれて、ウォークスルーがあなたの進捗状況を追跡します。

ヘルプ > ようこそメニューからウェルカムページを開くか、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から ヘルプ: ようこそコマンドを使用します。

Welcome page

拡張機能もウォークスルーを提供できます。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から ヘルプ: ウォークスルーを開く... コマンドを使用することで、直接ウォークスルーを開くこともできます。

Open walkthrough command in the Command Palette

コード編集スキルを向上させたい場合は、対話型エディタープレイグラウンドを開いてください。マルチカーソル編集、IntelliSense、スニペット、Emmet などの VS Code のコード編集機能を試すことができます。

ヘルプ > エディタープレイグラウンドメニューからウェルカムページを開くか、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から ヘルプ: 対話型エディタープレイグラウンドコマンドを使用します。

Interactive editor playground

コマンドパレット

現在のコンテキストに基づいて、利用可能なすべてのコマンドにアクセスします。

キーボードショートカット: ⇧⌘P (Windows, Linux Ctrl+Shift+P)

Command Palette

ヒント

マウスカーソルで上端を掴んで別の場所にドラッグすることで、コマンドパレットを別の場所に移動できます。また、タイトルバーのレイアウトのカスタマイズコントロールを選択し、事前設定されたクイック入力位置のいずれかを選択することもできます。

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

既定のキーボードショートカット

コマンドパレットの多くのコマンドには、既定のキーボードショートカットが関連付けられています。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) でコマンドの横に既定のキーボードショートカットが表示されます。

keyboard references

キーボードリファレンスシート

お使いのプラットフォーム用のキーボードショートカットリファレンスシートをダウンロードしてください (macOS、Windows、Linux)。

Keyboard Reference Sheet

フローティングウィンドウ

エディター、ターミナル、または特定のビューをフローティングウィンドウで開くことができます。例えば、エディターをモニター上の別の場所、または別のモニターに移動できます。

Screenshot that shows the OS desktop with VS Code window and a CSV file opened in a floating window.

現在の VS Code ウィンドウからエディタータブをドラッグして、フローティングウィンドウで開くことができます。または、エディタータブのコンテキストオプションから新しいウィンドウに移動または新しいウィンドウにコピーを使用します。

統合ターミナル

キーボードショートカット: ⌃` (Windows, Linux Ctrl+`)

Integrated terminal

ドロップダウンから別のターミナルシェルを選択できます。お使いのオペレーティングシステムとシステム構成によっては、異なるシェルが一覧表示される場合があります。

関連情報

サイドバーの切り替え

キーボードショートカット: ⌘B (Windows, Linux Ctrl+B)

toggle side bar

パネルの切り替え

キーボードショートカット: ⌘J (Windows, Linux Ctrl+J)

toggle panel

禅モード

集中力を妨げない禅モードに入ります。

キーボードショートカット: ⌘K Z (Windows, Linux Ctrl+K Z)

zen mode

Esc を2回押して禅モードを終了します。

コマンドライン

VS Code には強力なコマンドラインインターフェース (CLI) があり、エディターの起動方法をカスタマイズしてさまざまなシナリオをサポートできます。たとえば、コマンドラインから VS Code を起動して、2つのファイルを比較するための差分エディターを開くことができます。

VS Code のバイナリがパス上にあることを確認して、簡単に 'code' と入力して VS Code を起動できるようにしてください。インストール中に VS Code が環境パスに追加される場合は、プラットフォームごとのセットアップトピック (Linux で VS Code を実行する、macOS、Windows) を参照してください。

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

.vscode フォルダー

ワークスペース固有の設定ファイルは、ワークスペースのルートにある .vscode フォルダーにあります。たとえば、タスクランナー用の tasks.json や、デバッガー用の launch.json などです。

ステータスバー

エラーと警告

キーボードショートカット: ⇧⌘M (Windows, Linux Ctrl+Shift+M)

プロジェクト内のエラーと警告にすばやく移動します。

F8 または ⇧F8 (Windows, Linux Shift+F8) でエラーを巡回します。

errors and warnings

問題リストは、種類 ('info'、'errors'、'warnings') または一致するテキストでフィルターできます。

言語モードの変更

ステータスバーの言語モードは、アクティブなエディターに関連付けられている言語 (例: Markdown、Python など) を示します。ステータスバーの言語モードインジケーターを選択するか、キーボードショートカットを使用することで、現在のエディターの言語モードを変更できます。

キーボードショートカット: ⌘K M (Windows, Linux Ctrl+K M)

change syntax

ファイルの種類に対して新しい言語モードを永続化したい場合は、ファイルの関連付けを構成... コマンドを使用して、現在のファイル拡張子をインストールされている言語に関連付けます。

カスタマイズ

VS Code を好みに合わせてカスタマイズするための多くのオプションがあります

  • テーマの変更
  • キーボードショートカットの変更
  • 設定の調整
  • JSON 検証の追加
  • スニペットの作成
  • 拡張機能のインストール

テーマの変更

VS Code には、多数の組み込みの配色テーマが付属しています。基本設定: 配色テーマコマンドを使用するか、キーボードショートカットを使用してください。

キーボードショートカット: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)

Preview themes

VS Code 拡張機能のMarketplaceからさらにテーマをインストールできます。基本設定: 配色テーマ > + その他の配色テーマを参照... コマンドを選択して、Marketplace からテーマを検索します。

さらに、ファイルアイコンテーマをインストールして変更することもできます。

File icon themes

キーマップ

他のエディターのキーボードショートカットに慣れていますか? お気に入りのエディターのキーボードショートカットを VS Code に導入するキーマップ拡張機能をインストールできます。基本設定: キーマップコマンドを使用して、Visual Studio Marketplaceで現在のリストを確認してください。

より人気のあるキーマップには以下があります

キーボードショートカットのカスタマイズ

キーボードショートカットエディターでキーボードショートカットを表示およびカスタマイズできます。基本設定: キーボード ショートカットを開くコマンドを使用するか、ショートカットを使用してエディターを開きます。

キーボードショートカット: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)

鉛筆アイコンを選択するか、特定のエントリで Enter を押してキーボードショートカットを編集します。検索フィールドを使用してリストをフィルターします。

keyboard shortcuts

ショートカットを検索し、keybindings.json ファイルに独自のキーボードショートカットを追加することもできます。

customize keyboard shortcuts

詳細については、Visual Studio Code のキーバインドを参照してください。

設定の調整

既定では、VS Code は設定エディターを表示して設定を表示および編集します。ユーザー設定を開く (JSON) コマンドを使用するか、workbench.settings.editor 設定で既定の設定エディターを変更することで、基になる settings.json ファイルを編集することもできます。

ユーザー設定を開く settings.json

キーボードショートカット: ⌘, (Windows, Linux Ctrl+,)

さまざまな UI 要素のフォントサイズを変更する

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

ズームレベルの変更

"window.zoomLevel": 5

フォント合字

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

ヒント: フォント合字をサポートするフォントがインストールされている必要があります。FiraCode は VS Code チームで人気のあるフォントです。

font ligatures

自動保存

"files.autoSave": "afterDelay"

ファイル > 自動保存 のトップレベルメニューから自動保存を切り替えることもできます。

保存時にフォーマット

"editor.formatOnSave": true

貼り付け時にフォーマット

"editor.formatOnPaste": true

タブ文字のサイズの変更

"editor.tabSize": 4

スペースまたはタブ

"editor.insertSpaces": true

空白のレンダリング

"editor.renderWhitespace": "all"

空白文字は、テキスト選択で既定でレンダリングされます。

ファイル/フォルダーを無視する

これらのファイル/フォルダーをエディターウィンドウから削除します。

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

これらのファイル/フォルダーを検索結果から削除します。

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

他の多くのカスタマイズについて学びましょう。

言語固有の設定

言語識別子を使用して、特定の言語の設定をスコープできます。言語識別子のリファレンスで、よく使用される言語 ID のリストを見つけることができます。

"[languageid]": {

}

ヒント: 言語固有の設定を構成コマンドを使用して、言語固有の設定を作成することもできます。

language based settings

JSON 検証の追加

JSON 検証は多くのファイルの種類で既定で有効になっています。settings.json で独自のスキーマと検証を作成します

"json.schemas": [
    {
        "fileMatch": [
            "bower.json"
        ],
        "url": "https://json.schemastore.org/bower"
    }
]

またはワークスペースで定義されたスキーマの場合

"json.schemas": [
    {
        "fileMatch": [
            "**/foo.json"
        ],
        "url": "./myschema.json"
    }
]

またはカスタムスキーマを使用する場合

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

詳細については、JSON ドキュメントを参照してください。

既定のブラウザーを構成する

VS Code では、リンクを Ctrl+クリック (macOS では Cmd+クリック) すると、既定のブラウザーで開くことができます。workbench.externalBrowser 設定を設定することで、既定のブラウザーを構成できます。

設定値としてブラウザー実行可能ファイルへの完全なパスを指定します。または、デバイス間での正しい動作を保証するために、edge、chrome、firefox などのブラウザーエイリアスを使用することもできます。

"workbench.externalBrowser": "edge"

複数のログを単一のビューに結合する

出力パネルには、さまざまなサービスの出力が表示されます。各サービスは通常、独自のログを持っています。複数のサービスからの関連ログ情報を分析するために、複数のログを単一の複合ログに結合できます。

出力パネルのオーバーフローメニューから複合ログを作成... を選択します。

拡張機能

キーボードショートカット: ⇧⌘X (Windows, Linux Ctrl+Shift+X)

拡張機能の検索

拡張機能を見つけるための複数のソースを使用できます

  • VS Code Marketplace で。
  • VS Code 内の拡張機能ビューで検索します。
  • 拡張機能の推奨事項を表示する
  • awesome-vscode など、コミュニティが厳選した拡張機能リスト。

人気のある拡張機能を見つける

拡張機能ビューで、フィルターコントロールを選択し、最も人気のある、または並べ替え > インストール数を選択します。

install extensions

拡張機能の推奨事項

拡張機能ビューで、フィルターコントロールを選択し、推奨を選択して、推奨される拡張機能のリストを表示します。

show recommended extensions

独自の拡張機能を作成する

独自の拡張機能の作成に興味がありますか? 拡張機能 API ドキュメントでその方法を学ぶことができ、特に貢献ポイントに関するドキュメントを参照してください。

  • 構成
  • コマンド
  • キーボードショートカット
  • 言語
  • デバッガー
  • 文法
  • テーマ
  • スニペット
  • jsonValidation

ファイルとフォルダー

シンプルなファイルダイアログ

シンプルなファイルダイアログを使用すると、ファイルやフォルダーを開いたり保存したりするためのシステムの既定のファイルダイアログを、VS Code 内のよりシンプルなクイックピックダイアログに置き換えることができます。

設定: files.simpleDialog

Simple File Dialog

ヒント

右上隅にある目のアイコンを使用して、ドットで始まるファイルやフォルダーを表示または非表示にできます。

エクスプローラービューを表示

キーボードショートカット: ⇧⌘E (Windows, Linux Ctrl+Shift+E)

クイックオープン

ファイルをすばやく検索して開く。

キーボードショートカット: ⌘P (Windows, Linux Ctrl+P)

Quick Open

ヒント: ? と入力してコマンドの提案を表示します。

Quick Open command list

edt や term などのコマンドをスペースに続けて入力すると、ドロップダウンリストが表示されます。

term command in Quick Open

最近開いたファイル間を移動する

クイックオープンのキーボードショートカットを繰り返し押すと、最近開いたファイル間をすばやく循環できます。

クイックオープンから複数のファイルを開く

クイックオープンから 右矢印 を押すことで複数のファイルを開くことができます。これにより、現在選択されているファイルがバックグラウンドで開かれ、クイックオープンから引き続きファイルを選択できます。

最近開いたフォルダーとワークスペース間を移動する

最近開いたフォルダーまたはワークスペースを開く。

キーボードショートカット: ⌃R (Windows, Linux Ctrl+R)

ファイル > 最近開いたファイル からのリストを含むクイックピック ドロップダウンが表示され、最近開いたフォルダーとワークスペース、その後にファイルが続きます。

リンクからファイルを作成または開く

キーボードショートカット: Ctrl+クリック (macOS では Cmd+クリック)

カーソルをファイルリンクに移動し、Ctrl+クリック を押すと、ファイルや画像をすばやく開いたり、新しいファイルを作成したりできます。

create and open file

現在開いているフォルダーを閉じる

キーボードショートカット: ⌘K F (Windows, Linux Ctrl+K F)

ナビゲーション履歴

履歴全体をナビゲート: ⌃Tab (Windows, Linux Ctrl+Tab)

前に戻る: ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)

次に進む: ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-)

navigate history

ファイルの関連付け

正しく検出されないファイルに言語の関連付けを作成します。たとえば、カスタムファイル拡張子を持つ多くの構成ファイルは実際には JSON です。

"files.associations": {
    ".database": "json"
}

ダーティライトの防止

ディスク上で変更されたために保存できないファイルを保存しようとすると、VS Code はエラーメッセージを表示します。VS Code は、エディター外で行われた変更を上書きするのを防ぐために、ファイルの保存をブロックします。

保存の競合を解決するには、通知ポップアップで比較アクションを選択して、ディスク上のファイルの内容 (左側) と VS Code の内容 (右側) を比較して表示する差分エディターを開きます。

dirty write

エディターツールバーのアクションを使用して、保存の競合を解決します。変更を受け入れてディスク上の変更を上書きするか、ディスク上のバージョンに戻すことができます。戻すと、変更は失われます。

注: 競合を解決するために2つのアクションのいずれかを選択するまで、ファイルは変更されたままで保存できません。

編集のヒント

コード編集のための一般的な機能をいくつかご紹介します。他のエディターのキーボードショートカットに慣れている場合は、キーマップ拡張機能のインストールを検討してください。

ヒント: 拡張機能ビューで検索を @recommended:keymaps にフィルターすることで、推奨されるキーマップ拡張機能を確認できます。

並べて編集

キーボードショートカット: ⌘\ (Windows, Linux Ctrl+\)

エディターをドラッグアンドドロップして新しいエディターグループを作成したり、グループ間でエディターを移動したりすることもできます。

split editors

エディター間の切り替え

キーボードショートカット: ⌘1 (Windows, Linux Ctrl+1)、⌘2 (Windows, Linux Ctrl+2)、⌘3 (Windows, Linux Ctrl+3)

navigate editors

マルチカーソル選択

任意の場所にカーソルを追加するには、マウスで位置を選択し、Alt+クリック (macOS では Option+クリック) を使用します。

現在の位置の上下にカーソルを設定するには、次のキーボードショートカットを使用します。

キーボードショートカット: ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) または ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down)

multi cursor

⇧⌘L (Windows, Linux Ctrl+Shift+L) を使用して、現在の選択範囲のすべての出現箇所に追加のカーソルを追加できます。

add cursor to all occurrences of current selection

注: editor.multiCursorModifier 設定で、複数のカーソルを適用するための修飾キーを Ctrl/Cmd に変更することもできます。詳細については、マルチカーソル修飾キーを参照してください。

現在の選択範囲のすべての出現箇所を追加したくない場合は、代わりに ⌘D (Windows, Linux Ctrl+D) を使用できます。これにより、選択したものの後に次の出現箇所だけが選択されるため、選択範囲を1つずつ追加できます。

add cursor to next occurrences of current selection one by one

列 (ボックス) 選択

マウスをドラッグしながら Shift+Alt (macOS では Shift+Option) を押したままにすると、テキストのブロックを選択できます。選択された各行の末尾に個別のカーソルが追加されます。

Column text selection

キーボードショートカットを使用して列選択をトリガーすることもできます。

垂直ルーラー

editor.rulers 設定を使用してエディターに垂直列ルーラーを追加できます。この設定は、垂直ルーラーを表示したい列文字位置の配列を受け取ります。

{
  "editor.rulers": [20, 40, 60]
}

Editor rulers in the editor

高速スクロール

Alt キーを押すと、エディターとエクスプローラーでの高速スクロールが有効になります。既定では、高速スクロールは5倍の速度倍率を使用しますが、エディター: 高速スクロール感度 (editor.fastScrollSensitivity) 設定で倍率を制御できます。

ロックされたスクロール

表示: エディター間のスクロールのロックを切り替えコマンドを使用して、すべての表示されているエディター間でスクロールを同期できます。これは、1つのエディターでスクロールすると、他のすべてのエディターも同じ量だけスクロールし、すべてを位置合わせすることを意味します。

Locked scrolling in the editor

特定のキーボードショートカットを押している間のみスクロール同期をアクティブにすることを選択できます。workbench.action.holdLockedScrolling コマンドのキーボードショートカットを設定して、エディター間のスクロールを一時的にロックします。

行のコピー (上/下)

キーボードショートカット: ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) または ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down)

行のコピー (上/下) コマンドは、VS Code の既定のキーボードショートカットが Ubuntu のキーボードショートカットと競合するため、Linux ではバインドされていません。Issue #509 を参照してください。editor.action.copyLinesUpAction および editor.action.copyLinesDownAction コマンドを独自の優先キーボードショートカットに設定することはできます。

copy line down

行の移動 (上/下)

キーボードショートカット: ⌥↑ (Windows, Linux Alt+Up) または ⌥↓ (Windows, Linux Alt+Down)

move line up and down

選択範囲の縮小/拡大

キーボードショートカット: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) または ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)

shrink expand selection

詳細については、基本的な編集ドキュメントを参照してください。

ファイル内のシンボルに移動

キーボードショートカット: ⇧⌘O (Windows, Linux Ctrl+Shift+O)

Find by symbol

コロン @: を追加することで、シンボルを種類ごとにグループ化できます。

group symbols by kind

ワークスペース内のシンボルに移動

キーボードショートカット: ⌘T (Windows, Linux Ctrl+T)

go to symbol in workspace

アウトラインビュー

ファイルエクスプローラーのアウトラインビュー (既定では下部に折りたたまれています) には、現在開いているファイルのシンボルが表示されます。

Outline view

シンボル名、カテゴリ、およびファイル内の位置で並べ替えることができ、シンボルの位置への迅速なナビゲーションを可能にします。

特定の行に移動

キーボードショートカット: ⌃G (Windows, Linux Ctrl+G)

カーソル位置を元に戻す

キーボードショートカット: ⌘U (Windows, Linux Ctrl+U)

末尾の空白をトリムする

キーボードショートカット: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X)

trailing whitespace

テキスト変換コマンド

コマンドパレットの変換コマンドを使用すると、選択したテキストを大文字、小文字、タイトルケースに変更できます。

Transform text commands

コードのフォーマット

現在選択されているソースコード: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

ドキュメント全体のフォーマット: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)

code formatting

コードの折りたたみ

キーボードショートカット: ⌥⌘[ (Windows, Linux Ctrl+Shift+[)、⌥⌘] (Windows, Linux Ctrl+Shift+])、および ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)

code folding

すべて折りたたむ (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) および すべて展開する (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) で、エディター内のすべての領域を折りたたんだり/展開したりすることもできます。

すべてのブロックコメントを折りたたむ (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) で、すべてのブロックコメントを折りたたむことができます。

現在の行を選択

キーボードショートカット: ⌘L (Windows, Linux Ctrl+L)

ファイルの先頭と末尾に移動

キーボードショートカット: ⌘↑ (Windows, Linux Ctrl+Home) および ⌘↓ (Windows, Linux Ctrl+End)

Markdown プレビューを開く

Markdown ファイルで、次を使用します。

キーボードショートカット: ⇧⌘V (Windows, Linux Ctrl+Shift+V)

Markdown preview

並べて Markdown を編集およびプレビューする

Markdown ファイルで、次を使用します。

キーボードショートカット: ⌘K V (Windows, Linux Ctrl+K V)

プレビューとエディターは、いずれかのビューでのスクロールと同期します。

side by side Markdown preview

IntelliSense

⌃Space (Windows, Linux Ctrl+Space) で提案ウィジェットをトリガーします。

intellisense

利用可能なメソッド、パラメーターヒント、短いドキュメントなどを表示できます。

ピーク

シンボルを選択してから ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) を入力します。または、コンテキストメニューを使用することもできます。

peek

定義へ移動

シンボルを選択してから F12 を入力します。または、コンテキストメニューまたは Ctrl+クリック (macOS では Cmd+クリック) を使用することもできます。

go to definition

移動 > 戻るコマンド、または ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-) で前の場所に戻ることができます。

型の上にホバーしているときに Ctrl (macOS では Cmd) を押すと、型の定義を確認することもできます。

参照へ移動

シンボルを選択してから ⇧F12 (Windows, Linux Shift+F12) を入力します。または、コンテキストメニューを使用することもできます。

peek references

すべての参照を検索ビュー

シンボルを選択してから ⇧⌥F12 (Windows, Linux Shift+Alt+F12) を入力して、専用ビューにファイルのすべてのシンボルを表示する参照ビューを開きます。

シンボルの名前変更

シンボルを選択してから F2 を入力します。または、コンテキストメニューを使用することもできます。

rename symbol

検索と変更

式の検索と置換に加えて、キャプチャグループを持つ正規表現を使用して、一致した部分を検索して再利用することもできます。正規表現の使用 .* ボタン (⌥⌘R (Windows, Linux Alt+R)) をクリックして検索ボックスで正規表現を有効にし、正規表現を記述し、かっこを使用してグループを定義します。その後、置換フィールドで $1、$2 などを使用して、各グループで一致した内容を再利用できます。

search and modify

.eslintrc.json

ESLint 拡張機能をインストールします。お好みの方法でリンターを構成してください。Linting ルールとオプションの詳細については、ESLint 仕様を参照してください。

ES6 を使用するための構成です。

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "classes": true,
      "defaultParams": true
    }
  },
  "rules": {
    "no-const-assign": 1,
    "no-extra-semi": 0,
    "semi": 0,
    "no-fallthrough": 0,
    "no-empty": 0,
    "no-mixed-spaces-and-tabs": 0,
    "no-redeclare": 0,
    "no-this-before-super": 1,
    "no-undef": 1,
    "no-unreachable": 1,
    "no-use-before-define": 0,
    "constructor-super": 1,
    "curly": 0,
    "eqeqeq": 0,
    "func-names": 0,
    "valid-typeof": 1
  }
}

package.json

package.json ファイル用の IntelliSense を参照してください。

package json intellisense

Emmet 構文

Emmet 構文のサポート.

emmet syntax

スニペット

カスタムスニペットの作成

ファイル > 基本設定 > スニペットの構成を選択し、言語を選択してスニペットを作成します。

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

詳細については、独自のスニペットの作成を参照してください。

Git 統合

キーボードショートカット: ⌃⇧G (Windows, Linux Ctrl+Shift+G)

Git 統合は VS Code に組み込みで提供されています。VS Code 拡張機能 Marketplace から他のソース管理 (SCM) プロバイダーをインストールできます。このセクションでは Git 統合について説明しますが、UI とジェスチャーの多くは他の SCM プロバイダーと共通です。

Git blame

VS Code は、エディター内でインラインで、またステータスバーに Git blame 情報を表示します。ステータスバー項目またはインラインヒントの上にマウスカーソルを置くと、詳細な Git blame 情報が表示されます。

Screenshot that shows Git blame information when hovering over the git blame item in the Status Bar.

Git blame 情報を有効または無効にするには、Git: Git Blame エディターデコレーションを切り替えるおよびGit: Git Blame ステータスバー項目を切り替えるコマンドを使用するか、次の設定を構成します。

VS Code での Git blame サポートとレイアウトをカスタマイズする方法について詳しく学びましょう。

差分

ソース管理ビューから、ファイルを選択して差分エディターを開きます。または、右上隅にある変更を開くボタンを選択して、現在開いているファイルを差分表示します。

git diff from source control

ビュー

差分の既定のビューは並べて表示です。

右上にあるその他のアクション (...) ボタンを選択し、インラインビューを選択することで、インラインビューを切り替えます。

Screenshot that shows the More Actions menu in the diff editor, highlighting the Inline View menu item

インラインビューを既定としたい場合は、"diffEditor.renderSideBySide": false 設定を構成します。

アクセシブル差分ビューアー

F7 および ⇧F7 (Windows, Linux Shift+F7) で差分をナビゲートします。これにより、変更が統一されたパッチ形式で表示されます。行は矢印キーでナビゲートでき、Enter を押すと、差分エディターの選択した行に戻ります。

diff_review_pane

保留中の変更を編集する

差分エディターで変更を表示している間、差分エディターの保留中の変更側で直接編集できます。

ブランチ

ステータスバー経由で Git ブランチ間を簡単に切り替えることができます。

switch branches

ステージング

ファイルの変更をステージする

ファイル数にマウスカーソルを置き、プラスボタンを選択してファイルをステージします。

マイナスボタンを選択して変更をアンステージします。

git stage all

選択範囲をステージ

ファイルでテキストを選択し、コマンドパレットまたは差分エディターのコンテキストメニュー (右クリック) から選択した範囲をステージを選択することで、ファイルの一部をステージできます。

最後のコミットを元に戻す

(...) ボタンを選択し、コミット > 最後のコミットを元に戻すを選択して、前のコミットを元に戻します。変更はステージされた変更セクションに追加されます。

undo last commit

Git 出力を参照

VS Code を使用すると、実際にどのような Git コマンドが実行されているか簡単に確認できます。これは、Git を学習中の場合や、困難なソース管理の問題をデバッグしている場合に役立ちます。

Git 出力を表示するには、ソース管理ビューで (...) ボタンを選択し、Git 出力を表示を選択するか、Git: Git 出力を表示コマンドを使用するか、出力の切り替えコマンド (⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)) を使用して、ドロップダウンからGitを選択します。

ガターインジケーター

エディターは、どこでどのような変更 (追加、変更、削除された行) が行われたかについて、ガターに視覚的な手がかりを提供します。詳細については、ソース管理ドキュメントを参照してください。

git gutter indicators

マージの競合を解決する

マージ中に、ソース管理ビュー (⌃⇧G (Windows, Linux Ctrl+Shift+G)) に移動し、差分ビューで変更を行います。

インライン CodeLens を使用してマージの競合を解決でき、それにより現在の変更を受け入れる、受信変更を受け入れる、両方の変更を受け入れる、および変更を比較できます。

Git merge

ソース管理ドキュメントのマージの競合の解決について詳しく学びましょう。

VS Code を既定のマージツールとして設定する

git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'

VS Code を既定の差分ツールとして設定する

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

ファイルをクリップボードと比較する

キーボードショートカット: ⌘K C (Windows, Linux Ctrl+K C)

コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) でファイル: アクティブなファイルをクリップボードと比較コマンドを使用して、アクティブなファイルをクリップボードの内容とすばやく比較します。

デバッグ

デバッガーの構成

実行とデバッグビュー (⇧⌘D (Windows, Linux Ctrl+Shift+D)) から、launch.json ファイルを作成を選択します。これにより、プロジェクトに一致する環境 (Node.js、Python、C++ など) を選択するよう求められます。これにより、デバッガー構成を含む launch.json ファイルがワークスペースに生成されます。

Node.js のサポートは組み込みで提供されており、他の環境では適切な言語拡張機能のインストールが必要です。詳細については、デバッグドキュメントを参照してください。

configure debugging

ブレークポイントとステップ実行

エディターの余白を選択するか、現在の行で F9 を使用してブレークポイントを切り替えます。エディターの余白のブレークポイントは、通常、赤色の塗りつぶされた円として表示されます。

デバッグセッションが開始されると、デバッグツールバーがエディターの上部に表示され、デバッグ中にコードをステップ実行したり、ステップインしたりできるようになります。詳細については、デバッグドキュメントのデバッグアクションを参照してください。

debug

データの検査

変数は、実行とデバッグビューの変数セクションで、エディターでソースの上にマウスカーソルを置くか、デバッグコンソールを使用することで検査できます。

data inspection

ログポイント

ログポイントはブレークポイントと非常によく似ていますが、ヒット時にデバッガーを停止する代わりに、コンソールにメッセージをログします。ログポイントは、変更または一時停止できない運用サーバーをデバッグ中にログを挿入するのに特に役立ちます。

左側のエディターガターでログポイントの追加コマンドを使用してログポイントを追加すると、「ひし形」のアイコンとして表示されます。ログメッセージはプレーンテキストですが、中括弧 ('{}') 内で評価される式を含めることができます。

Logpoint set in the editor

トリガーされたブレークポイント

トリガーされたブレークポイントとは、別のブレークポイントに到達すると自動的に有効になるブレークポイントです。これらは、特定の事前条件の後にのみ発生するコードの失敗ケースを診断する際に非常に役立ちます。

トリガーされたブレークポイントは、グリフマージンを右クリックし、トリガーされたブレークポイントの追加を選択し、その後、どの他のブレークポイントがこのブレークポイントを有効にするかを選択することで設定できます。

タスクランナー

VS Code のタスクは、スクリプトを実行し、プロセスを開始するように構成できるため、コマンドラインを入力したり、新しいコードを記述したりすることなく、VS Code 内からこれらのツールを使用できます。

タスクの自動検出

トップレベルメニューからターミナルを選択し、タスクの構成コマンドを実行し、実行したいタスクの種類を選択します。これにより、次のような内容の tasks.json ファイルが生成されます。詳細については、タスクドキュメントを参照してください。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "install",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

自動生成に問題が発生する場合があります。適切に動作させるためのドキュメントを確認してください。

ターミナルメニューからタスクを実行する

トップレベルメニューからターミナルを選択し、タスクの実行コマンドを実行し、実行したいタスクを選択します。タスクの終了コマンドを実行して、実行中のタスクを終了します。

task runner

タスクのキーボードショートカットを定義する

コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から、基本設定: キーボードショートカットファイルを開くを選択し、workbench.action.tasks.runTask コマンドに目的のショートカットをバインドし、タスクを args として定義します。

たとえば、Ctrl+H を Run tests タスクにバインドするには、次を追加します。

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "Run tests"
}

エクスプローラーから npm スクリプトをタスクとして実行する

エクスプローラービューから、エディターでスクリプトを開き、タスクとして実行し、Node デバッガーで起動できます (スクリプトが --inspect-brk のようなデバッグオプションを定義している場合)。クリック時の既定のアクションは、スクリプトを開くことです。シングルクリックでスクリプトを実行するには、npm.scriptExplorerAction を run に設定します。npm.exclude 設定を使用して、特定のフォルダーに含まれる package.json ファイル内のスクリプトを除外します。

Filter problems

npm.enableRunFromFolder 設定を使用すると、フォルダーのエクスプローラービューのコンテキストメニューから npm スクリプトを実行できるようになります。この設定は、フォルダーが選択されたときにフォルダー内の NPM スクリプトを実行... コマンドを有効にします。このコマンドは、このフォルダーに含まれる npm スクリプトのクイックピックリストを表示し、タスクとして実行するスクリプトを選択できます。

ポータブルモード

VS Code にはポータブルモードがあり、設定とデータをインストールと同じ場所 (USB ドライブなど) に保持できます。

Insiders ビルド

Visual Studio Code チームは、VS Code の最新機能とバグ修正をテストするために Insiders バージョンを使用しています。ここからダウンロードして、Insiders バージョンを使用することもできます。

  • 早期導入者向け - Insiders には、ユーザーと拡張機能の作成者が試すための最新のコード変更が含まれています。
  • 頻繁なビルド - 最新のバグ修正と機能を備えた毎日新しいビルドが提供されます。
  • 並列インストール - Insiders は安定版ビルドの隣にインストールされ、どちらも独立して使用できます。
07/09/2025