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

Visual Studio Code のヒントとコツ

この記事のヒントとコツを使って、すぐに Visual Studio Code の生産性を高める方法を学びましょう。強力な編集機能、コード インテリジェンス機能、ソース コード管理機能に慣れ、便利なキーボード ショートカットを学びましょう。詳細については、「使用の開始」および「ユーザー ガイド」にある他の詳細なトピックを必ずご確認ください。

初めてお使いの場合は、VS Code チュートリアルで主要な機能を確認するためのステップバイステップのガイドを必ずご確認ください。

Visual Studio Code がインストールされていない場合は、ダウンロードページにアクセスしてください。プラットフォーム固有のセットアップ手順は、Linux での VS Code の実行、macOS、およびWindowsで確認できます。

ビデオがお好みですか？ VS Code Day の講演であるVisual Studio Code のヒントとコツやVS Code エクスペリエンスを向上させるをご覧ください。

基本

はじめに

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

Zen モード

集中できる Zen モードに入ります。

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

zen mode

Zen モードを終了するには 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

問題リストを種類 ('情報'、'エラー'、'警告') または一致するテキストでフィルタリングできます。

言語モードの変更

ステータスバーの言語モードは、アクティブなエディターに関連付けられている言語 (例: 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"

複数のログを 1 つのビューにまとめる

出力パネルには、さまざまなサービスの出力が表示されます。各サービスには通常、独自のログがあります。複数のサービスからの関連ログ情報を分析するために、複数のログを 1 つの複合ログにまとめることができます。

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

拡張機能

キーボード ショートカット: ⇧⌘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) を使用できます。これにより、選択した箇所の次の出現箇所のみが選択されるため、選択範囲を一つずつ追加できます。

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: Fast Scroll Sensitivity (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 拡張機能をインストールします。リンターを好きなように設定してください。Lint ルールとオプションの詳細については、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 に「標準で」付属しています。他のソース コード管理 (SCM) プロバイダーは、VS Code の拡張機能マーケットプレイスからインストールできます。このセクションでは 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 は安定版の隣にインストールされ、どちらも独立して使用できます。
08/07/2025