アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

VSCodeのsettings.jsonの書き方・開き方・サンプル完全ガイド【2026年版】

Featured image of the post

「settings.json ってどこにあるの?」「開き方がわからない」——VSCode を使い始めた方がまず詰まるのがこのポイントです。

settings.json は VSCode の設定をファイルで一元管理できる仕組みで、使いこなすと開発効率が大きく変わります。本記事では settings.json の開き方・場所・基本的な書き方から、すぐ使えるサンプルまで 2026 年最新の情報でまとめました。

なお「Cursor」など VSCode ベースのエディタでも同じ手順で設定できます。

💡
この記事の対象読者とゴール

■ 対象読者
VSCodeまたはCursorを使って開発をはじめようとしている方

■ ゴール
VSCodeの基本的な設定方法を理解し独自にカスタマイズできるようになること

先にコピペ用|settings.json おすすめ設定集(用途別・言語別)

「開き方は分かった、で何を書けばいい?」に答える章です。まず共通設定を Ctrl+, → 右上の「設定(JSON)を開く」で開いたユーザー settings.json に貼り、言語別の設定はプロジェクトの .vscode/settings.json に貼るのがおすすめです(チームで共有できます)。既存の内容がある場合は最外側の { } の中にキーを追記してください。

① 共通(まずこれだけ)

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n",
  "workbench.startupEditor": "none",
  "explorer.confirmDelete": false,
  "terminal.integrated.fontSize": 13
}
  • formatOnSave は Prettier 等のフォーマッタを入れていなくてもVSCode標準の整形が効きます。
  • files.eol\n に固定しておくと、WindowsとMac/Linuxが混在するチームで改行コード差分が出なくなります。

② JavaScript / TypeScript(Prettier + ESLint)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.importModuleSpecifier": "relative",
  "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}
  • 拡張機能「Prettier - Code formatter」と「ESLint」が前提です。codeActionsOnSave の値は現行VSCodeでは "explicit"(旧: true)を使います。

③ Python(Ruff + 型チェック)

{
  "python.defaultInterpreterPath": ".venv/bin/python",
  "python.analysis.typeCheckingMode": "basic",
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports": "explicit"
    }
  },
  "python.testing.pytestEnabled": true,
  "files.exclude": { "**/__pycache__": true, "**/.pytest_cache": true }
}
  • 拡張機能「Python」「Pylance」「Ruff」が前提です。かつての python.linting.* / python.formatting.provider は廃止済みなので、古い記事の設定をコピーすると警告が出ます。Windowsの仮想環境は .venv\\Scripts\\python.exe にしてください。

④ 見た目・操作性(好みで)

{
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.cursorBlinking": "smooth",
  "editor.smoothScrolling": true,
  "editor.stickyScroll.enabled": true,
  "workbench.colorTheme": "Default Dark Modern",
  "workbench.iconTheme": "material-icon-theme",
  "window.zoomLevel": 0,
  "breadcrumbs.enabled": true
}

⑤ ファイル別の上書き(言語ごとにタブ幅・フォーマッタを変える)

{
  "[markdown]": { "editor.wordWrap": "on", "files.trimTrailingWhitespace": false },
  "[yaml]": { "editor.tabSize": 2, "editor.insertSpaces": true },
  "[go]": { "editor.tabSize": 4, "editor.insertSpaces": false },
  "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }
}
📌
どこに貼るか迷ったら:①④はユーザー設定(自分の全プロジェクトに効く)、②③⑤はワークスペース設定.vscode/settings.json・そのプロジェクトだけに効く/Gitで共有できる)。両方にある場合はワークスペース設定が優先されます。詳しくは次章「ユーザー設定とワークスペース設定」へ。
[目次を開く]

settings.jsonとは?

settings.jsonは、VSCodeのユーザー設定やワークスペース設定を記述するためのファイルです。

ユーザー設定はVSCode全体に適用され、ワークスペース設定は特定のプロジェクトやフォルダに対してのみ適用されます。

このファイルはJSON形式で記述され、キーと値のペアで設定を指定します。設定をファイルで管理しているので、プロジェクト単位でコード規約などの設定をシェアしやすいというメリットがあります。

ユーザー設定とワークスペース設定

  • ユーザー設定:グローバルに適用される設定。ユーザー全体に適用されるため、すべてのプロジェクトで同じ設定が適用されます。
  • ワークスペース設定:特定のワークスペースやプロジェクトに対してのみ適用される設定。この設定は、そのプロジェクトを開いているときにのみ有効です。

設定は次の順に重ねて適用され、右にあるほど優先されます(同じ項目は後の設定で上書き)。つまり、プロジェクト固有の設定をワークスペース設定で上書きできます。

flowchart LR
    D["デフォルト設定<br>(VSCode標準)"] --> U["ユーザー設定<br>(全体に適用)"]
    U --> W["ワークスペース設定<br>.vscode/settings.json"]
    W --> Lg["言語別設定<br>例: [python]"]
    Lg --> R(["右ほど優先<br>=後の設定が上書き"])

settings.jsonの場所

  • ユーザー設定settings.jsonは通常、以下のディレクトリに保存されています。
    • Windows: %APPDATA%\Code\User\settings.json
    • macOS: $HOME/Library/Application Support/Code/User/settings.json
    • Linux: $HOME/.config/Code/User/settings.json
  • ワークスペース設定:プロジェクトフォルダ内の .vscode フォルダに保存される settings.json に設定されます。

settings.jsonの開き方

settings.json(JSON形式の設定ファイル)の開き方は、主に次の3通りです。用途に合わせて使い分けてください。

Image in a image block
settings.jsonの3つの開き方(コマンドパレット/歯車/直接)

方法1:コマンドパレットから開く(最速)

Ctrl + Shift + P(macOSは Cmd + Shift + P)でコマンドパレットを開き、Preferences: Open User Settings (JSON) と入力して実行すると、ユーザー設定の settings.json が直接開きます。最も早くて確実な方法なので、迫ったらまずこれを試してください。

方法2:歯車アイコンから開く

VSCodeの歯車アイコンからsettingsにアクセスしましょう。

Image in a image block

すると画面の右上の方に赤枠で囲っているアイコンが表示されるので、そちらをクリックしてください。

Image in a image block

これでユーザー設定のsettings.json に簡単にアクセスできます。

方法3:ファイルを直接開く

settings.json の実体は次の場所にあります。エクスプローラーや他のエディタから直接開いても編集できます。

  • Windows: %APPDATA%\Code\User\settings.json
  • macOS: ~/Library/Application Support/Code/User/settings.json
  • Linux: ~/.config/Code/User/settings.json

ワークスペース設定(.vscode/settings.json)の開き方

特定のプロジェクトだけに設定を効かせたい場合は、プロジェクト直下に .vscode フォルダを作成し、その中に settings.json を置きます。コマンドパレットで Preferences: Open Workspace Settings (JSON) を実行すると、現在開いているワークスペースの .vscode/settings.json が開きます(無ければ自動作成されます)。

settings.jsonの基本的な書き方

settings.jsonは、キーと値のペアで設定を記述します。以下は、settings.jsonの基本的な構造の例です。

{
    "editor.fontSize": 14,
    "editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
    "editor.tabSize": 4,
    "editor.wordWrap": "on",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "terminal.integrated.shell.osx": "/bin/zsh",
    "workbench.colorTheme": "Visual Studio Dark"
}

サンプル設定の解説

editor.fontSize エディタのフォントサイズを設定します。上記の例では、フォントサイズを14ピクセルに設定しています。
editor.fontFamily 使用するフォントファミリーを指定します。カスタムフォントやシステムフォントを指定できます。
editor.tabSize タブのスペース幅を指定します。ここでは4スペースに設定されています。
editor.tabSize タブのスペース幅を指定します。ここでは4スペースに設定されています。
editor.wordWrap 長い行を折り返すかどうかを設定します。"on"にすると、画面の幅に合わせて自動で折り返されます。
files.autoSave ファイルの自動保存のタイミングを設定します。"afterDelay"に設定すると、指定された遅延時間後に自動保存されます。
files.autoSaveDelay 自動保存が行われるまでの遅延時間をミリ秒で指定します。この例では1000ミリ秒(1秒)です。
terminal.integrated.shell.osx macOSで使用するデフォルトのシェルを指定しています。ここでは/bin/zshが指定されています。
workbench.colorTheme VSCodeのカラーテーマを設定します。この例では"Visual Studio Dark"が選択されています。

よく使われる設定

コード整形の設定

{
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "all"
}
  • editor.formatOnSave: 保存時に自動でコードを整形します。
  • prettier.singleQuote: シングルクォートを使用するかどうかを指定します。
  • prettier.trailingComma: 複数行の構造における末尾のカンマを指定します。

エディタの見た目と操作性の設定

{
    "editor.minimap.enabled": false,
    "workbench.iconTheme": "material-icon-theme",
    "explorer.confirmDelete": false}
  • editor.minimap.enabled: エディタの右側に表示されるミニマップの表示を切り替えます。
  • workbench.iconTheme: アイコンテーマを設定します。ここでは "material-icon-theme" が使用されています。
  • explorer.confirmDelete: ファイル削除時に確認ダイアログを表示するかどうかを設定します。
実際の利用例(サンプル)を確認する
{
  // .xlsxファイルを既定のアプリケーションで開く設定
  "workbench.editorAssociations": {
    "*.xlsx": "default"
  },

  // ミニマップ(コードの概要表示)を無効化
  "editor.minimap.enabled": false,

  // デバッグセッション開始時にデバッグコンソールを自動で開く
  "debug.internalConsoleOptions": "openOnSessionStart",

  // デバッグセッション開始時にデバッグビューを自動で開く
  "debug.openDebug": "openOnSessionStart",

  // テキストをコピーする際にシンタックスハイライトを含めない
  "editor.copyWithSyntaxHighlighting": false,

  // ドラッグアンドドロップによるテキストの移動を無効化
  "editor.dragAndDrop": false,

  // 貼り付け時にコードを自動でフォーマット
  "editor.formatOnPaste": true,

  // 保存時にコードを自動でフォーマット
  "editor.formatOnSave": true,

  // タイピング中に入力した行を自動でフォーマット
  "editor.formatOnType": true,

  // 制御文字(タブ、改行、その他の非印刷文字)を表示
  "editor.renderControlCharacters": true,

  // 空白文字(スペース、タブなど)を常に表示
  "editor.renderWhitespace": "all",

  // 行折りたたみアイコン(+/-)を常に表示
  "editor.showFoldingControls": "always",

  // 1つのタブに相当するスペースの数(2スペース)
  "editor.tabSize": 2,

  // 単語区切り文字の定義
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/? 、。!?「」【】『』()",

  // 行の折り返しを有効化
  "editor.wordWrap": "on",

  // 名前が重複した場合のファイル命名規則(賢い命名)
  "explorer.incrementalNaming": "smart",

  // 言語に対するファイルの関連付け(空欄はユーザーがカスタマイズ可能)
  "files.associations": {
    // 必要に応じて設定を追加
  },

  // 改行コードのデフォルト値をLF(\n)に設定
  "files.eol": "\n",

  // エクスプローラで非表示にするファイル/フォルダのパターン
  "files.exclude": {
    // 必要に応じて設定を追加
  },

  // ファイル保存時に末尾に改行を追加
  "files.insertFinalNewline": true,

  // 保存時に最終行以降の空行を削除
  "files.trimFinalNewlines": true,

  // 保存時に行末の不要なスペースを自動で削除
  "files.trimTrailingWhitespace": true,

  // ファイル/フォルダをファイル監視対象から除外
  "files.watcherExclude": {
    // 必要に応じて設定を追加
  },

  // ファイル/フォルダを検索から除外
  "search.exclude": {
    // 必要に応じて設定を追加
  },

  // 検索結果に行番号を表示
  "search.showLineNumbers": true,

  // ターミナルで選択したテキストを自動的にクリップボードにコピー
  "terminal.integrated.copyOnSelection": true,

  // エディターのタブのサイズを縮小表示
  "workbench.editor.tabSizing": "shrink",

  // 起動時にREADMEファイルを表示
  "workbench.startupEditor": "readme",

  /* 各言語、ファイル固有の設定 */
  // CSVファイルは行の折り返しを無効化
  "[csv]": {
    "editor.wordWrap": "off"
  },

  // ログファイルも行の折り返しを無効化
  "[log]": {
    "editor.wordWrap": "off"
  },

  // Pythonでは1タブにつき4スペース
  "[python]": {
    "editor.tabSize": 4
  },

  // TSVファイルではTabキーでスペースを挿入せず、行折り返しを無効化
  "[tsv]": {
    "editor.insertSpaces": false,
    "editor.wordWrap": "off"
  },

  // JavaScriptファイルの移動時にインポート文を更新しない
  "javascript.updateImportsOnFileMove.enabled": "never",

  // Draw.io拡張機能の画像リサイズを無効化
  "hediet.vscode-drawio.resizeImages": null,

  // 差分エディタで変更のない部分を非表示にする
  "diffEditor.hideUnchangedRegions.enabled": true,

  // TypeScriptファイルにはPrettierをデフォルトフォーマッタとして使用
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // TypeScript ReactファイルにはVSCodeの組み込みフォーマッタを使用
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

  // JSONファイルにはVSCodeの組み込みフォーマッタを使用
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },

  // Markdownファイルのプレビューを自動的にサイドに表示
  "markdown.extension.preview.autoShowPreviewToSide": true,

  // CSSファイルにはVSCodeの組み込みフォーマッタを使用
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },

  // Live Server拡張機能の情報メッセージを表示しない
  "liveServer.settings.donotShowInfoMsg": true,

  // JavaScriptファイルにはPrettierをデフォルトフォーマッタとして使用
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Draw.io拡張機能のテーマを「Kennedy」に設定
  "hediet.vscode-drawio.theme": "Kennedy",

  // ローカルファイルプロトコルの扱いに対する確認ダイアログを表示しない
  "security.promptForLocalFileProtocolHandling": false,

  // Live ServerでHTMLタグの検証を無効化
  "liveServer.settings.donotVerifyTags": true,

  // Playwrightテストでブラウザを再利用
  "playwright.reuseBrowser": true,

  // Playwrightのトレース表示を無効化
  "playwright.showTrace": false}

まとめ

settings.json をカスタマイズすることで、VSCode を自分好みに設定し、効率的な開発環境を整えることができます。

まずは本記事のサンプルをそのままコピーして試してみてください。自分のワークフローに合った設定を少しずつ加えていくのがおすすめです。

設定に迷ったときは、VSCode のコマンドパレット(Ctrl+Shift+P)で「Open User Settings (JSON)」と入力すると settings.json に素早くアクセスできます。

VSCode関連のおすすめ記事

📄Arrow icon of a page linkVSCode settings.jsonのおすすめカスタマイズ設定集|プロジェクトごとの.vscode設定も解説

📄Arrow icon of a page linkVSCode ターミナルの変更方法|Git Bash・PowerShell・Zshに切り替える手順をOS別に解説【2026年版】

📄Arrow icon of a page linkVSCodeで保存時に自動フォーマットする設定方法|Prettier・defaultFormatter完全ガイド【2026年版】

よくある質問

質問はお問合せより随時、受付中です。

質問をみる

Q: settings.jsonファイルはどこにありますか?

A: settings.jsonファイルはVSCodeの設定ファイルです。デフォルトでは次の場所に保存されています:

  • Windows: C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json
  • macOS/Linux: ~/.config/Code/User/settings.json

Q: VSCodeのsettings.jsonにどんな設定を追加できますか?

A: settings.jsonには、フォントサイズ、テーマ、拡張機能の設定、コードのフォーマッタなど、VSCodeの動作に関するさまざまなカスタマイズを追加できます。たとえば、エディタのフォントサイズを設定するには次のように書きます:

{
  "editor.fontSize": 16
}

Q: どのようにしてプロジェクトごとのsettings.jsonを設定できますか?

A: プロジェクトごとの設定を行うには、ワークスペースフォルダ内に .vscode/settings.json を作成します。このファイルに記述した設定は、そのプロジェクトにのみ適用されます。


Q: settings.jsonファイルが壊れてVSCodeが動かなくなった場合、どうすればいいですか?

A: settings.jsonファイルが壊れた場合、VSCodeの「設定」メニューから「設定(UI)」を使用して修正したり、手動でsettings.jsonファイルの内容を削除して再起動することでデフォルト設定に戻すことができます。


Q: 拡張機能ごとの設定はsettings.jsonにどう書けばいいですか?

A: 多くの拡張機能はsettings.jsonに専用の設定を追加します。たとえば、Prettierという拡張機能を使ってコードを自動フォーマットする設定は次のように記述します:

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true
}

拡張機能ごとの設定は、その拡張機能の公式ドキュメントで確認できます。


Q: settings.jsonにエラーが出た場合、どうやって修正しますか?

A: settings.jsonファイル内でエラーが出た場合、VSCodeはエラーメッセージを表示します。エラーメッセージを参考にしながら、欠けているカンマや括弧を確認してください。また、VSCodeの「設定」画面から設定を変更すると、自動的に正しい形式でファイルが更新されます。


Q: チームで同じ設定を共有するにはどうすればいいですか?

A: プロジェクトの.vscode/settings.jsonをリポジトリに含めることで、チームメンバーと共有できます。このファイルをリポジトリに追加しておけば、クローンしたメンバーが同じ設定で開発を進めることができます。


🎮
【PR】settings.json をコピペで済ませず「読んで直せる」ようになると、環境は自分で作れます。JSON・正規表現・シェル・Git…エンジニアの「基本のき」を、ドット絵オフィスで手を動かすゲームで身につけませんか? 登録・インストール不要、ブラウザで今すぐ遊べます(第1幕SQLは無料・60秒の基礎力診断も)。 ▶ be engineer で基礎力を鍛える(無料)

VSCodeをもっと使いこなしたいですか?

開発効率を上げる設定やプラグインの使い方をサポートします。

  • おすすめの拡張機能を知りたい
  • 効率的な開発環境を構築したい
  • チーム開発の設定を学びたい
まずは30分の無料相談

相談は完全無料・オンラインで気軽に

あなたを爆速で成長させるメンタリングプログラムはこちら

メンタープログラムバナー

学習・開発のお悩みは現役エンジニアに相談

メンタープログラムの詳細を見る

エンジニアの基礎学習ゲーム

プログラミング学習支援

無料相談はこちら