VS Codeの初期設定を整える

この記事が役立つ人・作業前の準備

Visual Studio Codeを初めて使う人
VS Codeの初期設定を整える操作を安全に確認したい人

用意するもの

Documentsにweb-practiceフォルダーを作り、VS Codeを公式サイトから導入する。

練習フォルダーを開いて信頼を確認する

Documentsにweb-practiceフォルダーを作り、VS Codeを公式サイトから導入する。

表示と保存の設定を用途別に変える

［ファイル］>［フォルダーを開く］でweb-practiceを選ぶ。Explorerの［新しいファイル］でindex.htmlを作り、html:5を入力して候補を確定しCtrl+Sで保存する。

Ctrl+,で設定を開く。Userは全案件共通、Workspaceはこのフォルダーだけに適用されるため、Workspace側でAuto SaveをafterDelay、Auto Save Delayを1000、Format On Saveをオンにする。

設定でUserまたはWorkspaceを選ぶ
練習HTMLに既定のフォーマッターを設定する

ファイル保存と整形の結果を確認する

index.htmlの字下げを崩してShift+Alt+Fを押す。［ターミナル］>［新しいターミナル］を開き、現在地がweb-practiceであることを確認する。

保存したHTMLをブラウザーで開く

設定と拡張機能を切り分けて戻す

HTMLが整形されないときは右クリック［ドキュメントのフォーマット］>［既定のフォーマッターの構成］でHTML Language Featuresを選ぶ。

外部から入手したフォルダーではWorkspace Trustを安易に許可しない。Workspace設定は.vscode/settings.jsonとして共有される場合がある。

変更した設定を一つずつ戻して比較する

ユーザー設定と作業フォルダー設定を分ける

文字サイズやテーマなど自分の好みはユーザー設定、チームでそろえるインデントなどはワークスペース設定に分けます。設定画面でUserとWorkspaceのどちらが選ばれているか確認してから変更してください。別のフォルダーだけ挙動が違う場合は、そのフォルダーの.vscode/settings.jsonによる上書きを確認します。共有設定へ個人PCの絶対パスを書かないようにすると、他の端末で開いたときの失敗を減らせます。

設定の例として、文字が小さい問題とHTML整形の問題を同時に直さないようにします。最初にフォントサイズを変えて読みやすさだけを確認し、その後に練習HTMLの整形を試します。変更前の値を記録しておくと、設定を戻す必要が出ても全設定の初期化で他の好みを失わずに済みます。

小さなHTMLで保存と整形を確かめる

練習用フォルダーにindex.htmlを作り、見出しと短い段落を入力して保存します。タブの未保存マークが消えたことを確認し、［ドキュメントのフォーマット］を実行してインデントの変化を見ます。既定のフォーマッターを尋ねられたら対象言語用のものを選びます。整形はプログラムの実行やブラウザー表示の確認とは別なので、HTMLはブラウザーで開いて文字も確認してください。

拡張機能を最小構成で追加する

まず標準機能で開く・編集する・保存する操作を確認し、必要な拡張機能を一つずつ追加します。説明、発行元、対応言語を確認し、同じ言語のフォーマッターを同時に多数入れないようにします。追加後に保存が遅くなったり整形結果が変わったりした場合は、その拡張機能を無効にして同じ練習ファイルを比較します。無効化で直れば設定を調べてから戻し、原因を調べるために作業ファイルを削除しないでください。

表は横にスクロールできます →

拡張機能を最小構成で追加する
確認した状態	次に行う操作	完了の目安
別フォルダーだけ設定が違う	UserとWorkspaceの値を比較する	対象フォルダーの上書きを説明できる
整形すると別の書き方になる	既定のフォーマッターと拡張機能を確認する	同じファイルに一つの意図した整形結果が出る
タブに未保存マークがある	名前と保存先を確認して保存する	ファイルを開き直して変更内容が残る

注意点・利用条件

外部から入手したフォルダーではWorkspace Trustを安易に許可しない。Workspace設定は.vscode/settings.jsonとして共有される場合がある。

よくある質問

Visual Studio Codeで目的の項目が見つからない場合は？

HTMLが整形されないときは右クリック［ドキュメントのフォーマット］>［既定のフォーマッターの構成］でHTML Language Featuresを選ぶ。

VS Codeの初期設定を整える操作で特に注意する点は？

外部から入手したフォルダーではWorkspace Trustを安易に許可しない。Workspace設定は.vscode/settings.jsonとして共有される場合がある。

設定を変更しても反映されないのはなぜ？

変更した設定の適用先がUserかWorkspaceかを確認し、別の階層で上書きされていないか見ます。言語別設定がある場合はそのファイルの言語にも注意します。保存してから同じファイルで再確認し、効果が不明な設定を次々追加する前に一つの原因を特定します。

自動保存を有効にしてよいですか？

小さな練習フォルダーで保存タイミングを確認してから使います。自動保存でファイルが保存されても実行結果やバックアップは確認されません。共有プロジェクトでは保存に連動する処理がある場合もあるため、まずREADMEと既存設定を確認し、必要な変更だけを行います。

出典・確認日

情報確認日：2026-09-05。仕様・操作方法・価格などの確認に使用した出典を掲載しています。適用条件や現在の情報は各リンク先で確認してください。

ユーザー設定とワークスペース設定 | Visual Studio Code ↗