VS Codeのsettings.jsonを徹底解説！基本の場所からおすすめ設定例まで

プログラミング・IT

VS Codeを使い始めた人から、よくこんな質問をいただきます。

「VS Codeをもっと使いやすくカスタマイズしたい」
「他の人のVS Code設定を見て真似したいけど、どこを変更すればいいかわからない」
「settings.jsonって聞いたことがあるけど、どうやって使うの？」

VS Codeの真の力を引き出すカギは、settings.jsonファイルにあります。

このファイルを理解し活用することで、VS Codeを自分専用の開発環境に変身させることができます。

この記事では、VS Codeのsettings.jsonの基本的な使い方から、実用的な設定例まで初心者にもわかりやすく解説します。

記事を読み終わる頃には、自分好みのVS Code環境を構築できるようになっているでしょう。

スポンサーリンク

settings.jsonとは？基本知識

settings.jsonの役割と重要性

settings.jsonは、VS Codeの動作を細かく制御するための設定ファイルです。

GUI設定との違い

GUI設定（グラフィカル設定画面）:

  • マウスでクリックして設定変更
  • 視覚的でわかりやすい
  • 基本的な設定のみ対応

settings.json:

  • テキストで直接設定を記述
  • より詳細で高度な設定が可能
  • 設定の一括管理と共有が容易

JSON形式について

settings.jsonはJSON（JavaScript Object Notation）形式で記述します。基本的な構造は以下の通りです：

{
  "設定名1": "値1",
  "設定名2": true,
  "設定名3": 123,
  "設定名4": {
    "子設定1": "値A",
    "子設定2": "値B"
  }
}

settings.jsonのメリット

  • バックアップと復元が簡単: ファイルをコピーするだけ
  • チーム間での設定共有: 同じ設定をチーム全体で使用
  • バージョン管理: Gitで設定の変更履歴を管理
  • 詳細な制御: GUIでは設定できない項目まで調整可能

VS Codeの設定階層

VS Codeには設定の優先順位があります：

  1. ワークスペース設定 (.vscode/settings.json)
  2. フォルダ設定 (マルチルートワークスペース)
  3. ユーザー設定 (グローバル設定)
  4. デフォルト設定 (VS Code標準)

上位の設定が下位の設定を上書きします。

settings.jsonの場所と開き方

ユーザー設定のsettings.json

全てのプロジェクトで共通して使いたい設定を記述します。

ファイルの場所

Windows:

%APPDATA%\Code\User\settings.json

macOS:

~/Library/Application Support/Code/User/settings.json

Linux:

~/.config/Code/User/settings.json

開き方

方法1: コマンドパレットから（推奨）

  1. Ctrl + Shift + P（Macは Cmd + Shift + P）でコマンドパレットを開く
  2. 「Preferences: Open User Settings (JSON)」と入力
  3. Enterキーで実行

方法2: 設定画面から

  1. Ctrl + ,（Macは Cmd + ,）で設定画面を開く
  2. 右上の「設定を開く（JSON）」アイコン（{}マーク）をクリック

方法3: ファイルメニューから

  1. 「ファイル」→「基本設定」→「設定」を選択
  2. 右上の「設定を開く（JSON）」アイコンをクリック

ワークスペース設定のsettings.json

特定のプロジェクトでのみ使用したい設定を記述します。

ファイルの場所

プロジェクトルート/.vscode/settings.json

作成方法

  1. プロジェクトフォルダを開く
  2. コマンドパレットで「Preferences: Open Workspace Settings (JSON)」を選択
  3. ファイルが自動作成される

ワークスペース設定の利点

  • プロジェクト固有の設定: そのプロジェクトでのみ有効
  • チーム共有: Gitでプロジェクトメンバーと設定を共有
  • 環境別設定: 本番用、開発用など環境ごとに異なる設定

設定の確認方法

現在の設定値を確認したい場合：

  1. コマンドパレットで「Preferences: Open Settings (UI)」を選択
  2. 右上の検索ボックスで設定名を検索
  3. 現在の値と設定元が表示される

基本的な設定例

エディタの外観設定

フォントとサイズの設定

{
  "editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontWeight": "400",
  "editor.lineHeight": 1.5,
  "editor.fontLigatures": true
}

設定項目の説明：

  • fontFamily: 使用するフォント（優先順位付き）
  • fontSize: フォントサイズ（ピクセル）
  • fontWeight: フォントの太さ
  • lineHeight: 行間の倍率
  • fontLigatures: 合字（リガチャ）の有効化

色テーマとアイコンテーマ

{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorCustomizations": {
    "editor.background": "#1e1e1e",
    "sideBar.background": "#252526"
  }
}

エディタの表示設定

{
  "editor.minimap.enabled": true,
  "editor.minimap.maxColumn": 80,
  "editor.rulers": [80, 120],
  "editor.renderWhitespace": "selection",
  "editor.renderControlCharacters": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": true
}

ファイル管理設定

自動保存の設定

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}

自動保存オプションの説明：

  • off: 自動保存しない
  • afterDelay: 指定した時間後に保存
  • onFocusChange: フォーカスが外れたときに保存
  • onWindowChange: 他のアプリに切り替えたときに保存

ファイル除外設定

{
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/.vscode": false
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
  }
}

エディタの動作設定

インデントとフォーマット

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}

コード補完とサジェスト

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.acceptSuggestionOnEnter": "on",
  "editor.tabCompletion": "on",
  "editor.wordBasedSuggestions": true
}

言語別の詳細設定

JavaScript/TypeScript設定

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.organizeImports": true
    }
  },
  "typescript.preferences.quoteStyle": "single",
  "javascript.preferences.quoteStyle": "single"
}

Python設定

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    },
    "editor.tabSize": 4
  },
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.testing.pytestEnabled": true
}

HTML/CSS設定

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "html.format.wrapLineLength": 80,
  "css.validate": true
}

JSON設定

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "json.schemas": [
    {
      "fileMatch": ["package.json"],
      "url": "https://json.schemastore.org/package.json"
    }
  ]
}

便利な機能設定

統合ターミナルの設定

{
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "'Fira Code', 'Consolas'",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.copyOnSelection": true,
  "terminal.integrated.scrollback": 10000
}

Git統合の設定

{
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.autoStash": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "merge-conflict.autoNavigateNextConflict.enabled": true
}

拡張機能の設定

{
  "extensions.autoUpdate": true,
  "extensions.autoCheckUpdates": true,
  "extensions.ignoreRecommendations": false,
  "extensions.showRecommendationsOnlyOnDemand": false
}

セキュリティ設定

{
  "security.workspace.trust.untrustedFiles": "prompt",
  "security.workspace.trust.banner": "always",
  "security.workspace.trust.emptyWindow": true,
  "telemetry.telemetryLevel": "off"
}

高度な設定例

パフォーマンス最適化

{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true
  },
  "search.followSymlinks": false,
  "typescript.disableAutomaticTypeAcquisition": true,
  "editor.semanticHighlighting.enabled": true
}

開発効率向上設定

{
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.parameterHints.enabled": true,
  "editor.hover.enabled": true,
  "editor.hover.delay": 300,
  "editor.lightbulb.enabled": true,
  "problems.decorations.enabled": true
}

マルチカーソルとキーバインド

{
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.selectionHighlight": true,
  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
  "editor.find.autoFindInSelection": "multiline"
}

プロジェクト別設定管理

ワークスペース設定の活用

プロジェクトごとに異なる設定が必要な場合の例：

Reactプロジェクト用設定

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.workingDirectories": ["./src"],
  "prettier.configPath": "./.prettierrc.json"
}

Pythonプロジェクト用設定

{
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.terminal.activateEnvironment": true,
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "python.linting.enabled": true,
  "python.linting.flake8Enabled": true,
  "python.testing.pytestEnabled": true
}

推奨拡張機能との連携

.vscode/extensions.jsonと組み合わせた設定管理：

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "ms-python.python",
    "ms-vscode.vscode-typescript-next"
  ]
}

よくある問題と対処法

JSON構文エラーの解決

一般的なエラーパターン

カンマの問題:

// ❌ 間違い（最後の要素にカンマ）
{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
}

// ✅ 正しい
{
  "editor.fontSize": 14,
  "editor.tabSize": 2
}

クォートの問題:

// ❌ 間違い（シングルクォート使用）
{
  'editor.fontSize': 14
}

// ✅ 正しい（ダブルクォート使用）
{
  "editor.fontSize": 14
}

エラーの確認方法

  1. 赤い波線: 構文エラーがある箇所に表示
  2. 問題パネル: Ctrl + Shift + Mで詳細なエラー情報を確認
  3. JSONの妥当性チェック: VS Codeが自動でチェック

設定が反映されない場合

確認すべきポイント

  1. 設定の優先順位確認
    • ワークスペース設定がユーザー設定を上書き
    • コマンドパレットで「Preferences: Open Settings (UI)」から確認
  2. 拡張機能の有効性確認
    • 設定に対応する拡張機能がインストール・有効化されているか
  3. VS Codeの再起動
    • 一部の設定は再起動が必要

デバッグ方法

{
  // 設定の確認用（一時的に追加）
  "workbench.startupEditor": "none",
  "window.openFoldersInNewWindow": "on"
}

パフォーマンス問題の解決

重い設定の特定

{
  // パフォーマンスに影響する可能性がある設定
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

ベストプラクティス

設定管理のコツ

1. 段階的な設定追加

{
  // まず基本設定から
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  
  // 慣れてきたら詳細設定を追加
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange"
}

2. コメントの活用

{
  // エディタの基本設定
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  
  // 自動保存設定
  "files.autoSave": "onFocusChange",
  
  // フォーマット設定
  "editor.formatOnSave": true
}

3. バックアップの重要性

設定ファイルは定期的にバックアップを取りましょう：

# ユーザー設定のバックアップ
cp ~/.config/Code/User/settings.json ~/backup/settings.json.bak

チーム開発での活用

1. 共通設定の定義

// .vscode/settings.json（プロジェクト共通）
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2. 個人設定との使い分け

  • プロジェクト設定: コードスタイル、フォーマッタ設定
  • 個人設定: フォントサイズ、テーマ、UI設定

3. ドキュメント化

README.mdに推奨設定を記載：

## 開発環境設定

### 推奨VS Code設定
以下の設定を`.vscode/settings.json`に追加してください：

\`\`\`json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
\`\`\`

まとめ

VS Codeのsettings.jsonを活用することで、開発効率を大幅に向上させることができます。

重要なポイント

  • settings.jsonの場所: ユーザー設定とワークスペース設定の使い分け
  • 基本設定: フォント、テーマ、自動保存、フォーマット設定
  • 言語別設定: プログラミング言語ごとの最適化
  • プロジェクト管理: チーム開発での設定共有

効果的な活用方法

  • 段階的導入: 基本設定から始めて徐々に高度な設定を追加
  • バックアップ: 定期的な設定ファイルのバックアップ
  • チーム共有: プロジェクト固有設定でチーム統一
  • 継続改善: 作業効率を見ながら設定を調整

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました