🚀 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

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

エディターをフローティングウィンドウで開くことができます。たとえば、モニター上の別の場所や別のモニターにエディターを移動する場合などです。

エディターをフローティングウィンドウで開くには、メインウィンドウからドラッグして、現在の VS Code ウィンドウの外側の任意の場所にドロップします。エディターを切り離す別の方法は、エディタータブを右クリックして、新しいウィンドウに移動 (workbench.action.moveEditorToNewWindow) または 新しいウィンドウにコピー (⌘K O (Windows、Linux Ctrl+K O)) オプションを選択することです。

統合ターミナル

キーボードショートカット: ⌃` (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

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

コマンドライン

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 拡張機能マーケットプレイスからさらにテーマをインストールできます。[基本設定: カラーテーマ] > [+ その他のカラーテーマを参照...] コマンドを選択して、マーケットプレイスからテーマを検索します。

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

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 マーケットプレイス内。
  • 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)

行を上にコピー/下にコピー コマンドは、Linux ではバインドされていません。これは、VS Code のデフォルトのキーボードショートカットが Ubuntu のキーボードショートカットと競合するためです。詳細については、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 拡張機能 をインストールします。リンターを好きなように構成します。リンティングルールとオプションの詳細については、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 拡張機能マーケットプレース から他のソース管理 (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: Blame エディター装飾の切り替え および Git: Blame ステータスバー項目の切り替え コマンドを使用するか、次の設定を構成します。

  • git.blame.statusBarItem.enabled (デフォルトで有効)
  • git.blame.editorDecoration.enabled

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: 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 スクリプトをタスクとして実行

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

Filter problems

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

ポータブルモード

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

Insiders ビルド

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

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