💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

Visual Studio Code のヒントとコツ

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

初心者の方は、主要な機能をステップバイステップで説明している VS Code チュートリアルをぜひチェックしてください。

Visual Studio Code をまだインストールしていない場合は、ダウンロードページにアクセスしてください。プラットフォーム固有のセットアップ手順については、Linux での VS Code の実行、macOS、Windows を参照してください。

動画で学びたいですか？VS Code Day の講演である Visual Studio Code のヒントとコツ または Elevate your VS Code experience (VS Code エクスペリエンスを向上させる) をご覧ください。

基本

はじめに

VS Code を実際に操作して探索する最良の方法は、ウェルカムページを開き、ウォークスルーを選択することです。VS Code が提供するセットアップ手順、機能、より詳細なカスタマイズをガイド付きで学ぶことができます。学習を進めるにつれて、ウォークスルーは進捗状況を追跡します。

ヘルプ > ウェルカムメニューからウェルカムページを開くか、コマンドパレットから Help: Welcome コマンドを使用してください (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

Welcome page

拡張機能もウォークスルーを提供している場合があります。コマンドパレットから Help: Open Walkthrough... コマンドを使用して直接ウォークスルーを開くこともできます (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

Open walkthrough command in the Command Palette

コード編集スキルを向上させたい場合は、Interactive Editor Playground を開いてください。マルチカーソル編集、IntelliSense、スニペット、Emmet など、VS Code のコード編集機能を試してみましょう。

ヘルプ > Editor Playground メニューからウェルカムページを開くか、コマンドパレットから Help: Interactive Editor Playground コマンドを使用してください (⇧⌘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 ウィンドウの外にドラッグすると、フローティングウィンドウで開かれます。または、エディタータブのコンテキストメニューから Move into New Window (新しいウィンドウに移動) または Copy into New Window (新しいウィンドウにコピー) を使用します。

統合ターミナル

キーボードショートカット: ⌃` (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つのファイルを比較する diff エディターを開くことができます。

'code' と入力するだけで VS 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

ファイルタイプに対して新しい言語モードを保持したい場合は、Configure File Association for... (ファイルの関連付けを設定) コマンドを使用して、現在のファイル拡張子をインストール済みの言語に関連付けます。

カスタマイズ

VS Code を好みに合わせてカスタマイズするオプションは多数あります。

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

テーマの変更

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

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

Preview themes

VS Code 拡張機能マーケットプレイスからさらに多くのテーマをインストールできます。Preferences: Color Theme > + Browse Additional Color Themes... コマンドを選択して、マーケットプレイスからテーマを検索します。

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

File icon themes

キーマップ

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

人気のキーマップには以下のようなものがあります：

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

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

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

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

keyboard shortcuts

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

customize keyboard shortcuts

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

設定の調整

デフォルトでは、VS Code は設定エディターを表示して設定を表示および編集します。Open User Settings (JSON) コマンドを使用するか、 workbench.settings.editor Open in VS Code Open in VS Code Insiders 設定でデフォルトの設定エディターを変更することで、基盤となる 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]": {

}

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

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 Open in VS Code Open in VS Code Insiders 設定 を変更してデフォルトのブラウザーを構成できます。

設定値としてブラウザー実行可能ファイルへのフルパスを指定します。あるいは、デバイス間で正しく機能するように、edge、chrome、firefox などのブラウザーエイリアスを使用することもできます。

"workbench.externalBrowser": "edge"

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

出力パネルには様々なサービスの出力が表示されます。通常、各サービスには独自のログがあります。複数のサービスからの関連するログ情報を分析するには、それらを単一の複合ログに結合できます。

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

拡張機能

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

拡張機能を探す

複数のソースを使用して拡張機能を見つけることができます。

  • VS Code マーケットプレイス内。
  • VS Code の 拡張機能 ビュー内で検索。
  • 拡張機能の推奨事項を表示
  • awesome-vscode のような、コミュニティでキュレーションされた拡張機能リスト。

人気の拡張機能を探す

拡張機能 ビューで フィルター コントロールを選択し、Most Popular (最も人気) または Sort By (並び替え) > Install Count (インストール数) を選択します。

install extensions

拡張機能の推奨事項

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

show recommended extensions

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

独自の拡張機能を作成することに興味がありますか？拡張機能 API ドキュメント、特にコントリビューションポイントに関するドキュメントでその方法を学ぶことができます。

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

ファイルとフォルダー

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

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

設定: files.simpleDialog Open in VS Code Open in VS Code Insiders

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 は、エディターの外で行われた変更が上書きされるのを防ぐため、ファイルの保存をブロックします。

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

dirty write

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

注: ファイルはダーティなままとなり、競合を解決するために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 Open in VS Code Open in VS Code Insiders 設定 を使用して、マルチカーソルを適用するための修飾子を 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 Open in VS Code Open in VS Code Insiders 設定を使用して、エディターに垂直列ルーラーを追加できます。

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

Editor rulers in the editor

高速スクロール

Alt キーを押すと、エディターとエクスプローラーでの高速スクロールが可能になります。デフォルトでは、高速スクロールは 5 倍の速度倍率を使用しますが、Editor: Fast Scroll Sensitivity ( editor.fastScrollSensitivity Open in VS Code Open in VS Code Insiders ) 設定で倍率を制御できます。

ロックされたスクロール

View: Toggle Locked Scrolling Across Editors (エディター全体でロックされたスクロールを切り替え) コマンドを使用して、表示されているすべてのエディター間でスクロールを同期できます。つまり、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 (変換) コマンドを使用して、選択したテキストを大文字、小文字、タイトルケースに変更できます。

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

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

Fold All Block Comments (すべてのブロックコメントを折りたたむ) (⌘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

Go > Back (戻る) コマンドまたは ⌃- (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

検索と修正

式を検索および置換するだけでなく、正規表現とキャプチャグループを使用して、一致した部分を検索し再利用することもできます。検索ボックスの Use Regular Expression (正規表現を使用) .* ボタン（⌥⌘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

スニペット

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

File > Preferences > Configure User Snippets (ユーザーースニペットの構成) で言語を選択し、スニペットを作成します。

"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: Toggle Git Blame Editor Decoration および Git: Toggle Git Blame Status Bar Item コマンドを使用するか、これらの設定を構成します。

  • git.blame.statusBarItem.enabled Open in VS Code Open in VS Code Insiders (デフォルトで有効)
  • git.blame.editorDecoration.enabled Open in VS Code Open in VS Code Insiders

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

差分 (Diff)

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

git diff from source control

ビュー

diff のデフォルトビューは side by side view (並列表示) です。

右上の More Actions (...) ボタンを選択し、Inline View (インライン表示) を選択して インライン表示 に切り替えます。

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

インライン表示をデフォルトにしたい場合は、"diffEditor.renderSideBySide": false 設定を構成します。

アクセシブルな Diff ビューアー

F7 と ⇧F7 (Windows, Linux Shift+F7) で差分間を移動します。これは、統合されたパッチ形式で変更を表示します。矢印キーで行間を移動でき、Enter を押すと diff エディターと選択した行に戻ります。

diff_review_pane

保留中の変更を編集

diff エディターで変更を表示している間、diff エディターの保留中の変更側の領域で直接編集を行うことができます。

ブランチ

ステータスバーを介して Git ブランチを簡単に切り替えます。

switch branches

ステージング

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

ファイル数にカーソルを合わせ、プラスボタンを選択してファイルをステージします。

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

git stage all

選択範囲をステージ

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

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

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

undo last commit

Git 出力を表示

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

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

ガターインジケーター

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

git gutter indicators

マージ競合を解決

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

Accept Current Change (現在の変更を受け入れる)、Accept Incoming Change (着信の変更を受け入れる)、Accept Both Changes (両方の変更を受け入れる)、および Compare Changes (変更を比較) を可能にするインラインの CodeLens でマージ競合を解決できます。

Git merge

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

VS Code をデフォルトのマージツールとして設定

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

VS Code をデフォルトの diff ツールとして設定

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)) の File: Compare Active File with Clipboard (ファイルをクリップボードと比較) コマンドを使用して、アクティブなファイルをクリップボードの内容と素早く比較できます。

デバッグ

デバッガーを構成

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

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

configure debugging

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

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

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

debug

データの検査

変数は、「実行とデバッグ」ビューの VARIABLES (変数) セクションで検査するか、エディター内のソースにマウスを合わせるか、デバッグコンソールを使用して検査できます。

data inspection

ログポイント

ログポイントはブレークポイントと似ていますが、ヒットした時にデバッガーを停止するのではなく、コンソールにメッセージを記録します。ログポイントは、変更や一時停止ができない本番サーバーをデバッグ中にログを挿入するのに特に便利です。

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

Logpoint set in the editor

トリガーブレークポイント

トリガーブレークポイントとは、別のブレークポイントがヒットしたときに自動的に有効になるブレークポイントのことです。特定の前提条件を満たした場合にのみ発生するコードの障害ケースを診断する際に非常に役立ちます。

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

タスクランナー

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

タスクを自動検出

トップレベルメニューから Terminal (ターミナル) を選択し、Configure Tasks (タスクを構成) コマンドを実行して、実行したいタスクのタイプを選択します。これにより、以下のような内容の 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
      }
    }
  ]
}

自動生成で問題が発生することがあります。ドキュメントをチェックして、適切に動作するようにしてください。

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

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

task runner

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

任意のタスクにキーボードショートカットを定義できます。コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から Preferences: Open Keyboard Shortcuts File を選択し、workbench.action.tasks.runTask コマンドに目的のショートカットをバインドし、Task を args として定義します。

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

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

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

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

Filter problems

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

ポータブル モード

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

Insiders ビルド

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

  • アーリーアダプター向け - Insiders には、ユーザーや拡張機能作成者が試せる最新のコード変更が含まれています。
  • 頻繁なビルド - 最新のバグ修正や機能を備えた新しいビルドが毎日リリースされます。
  • 並行インストール - Insiders は安定版ビルドの横にインストールされるため、どちらも独立して使用できます。
5/28/2026
© . This site is unofficial and not affiliated with Microsoft.