VSCode 設定で開発環境を最適化する

Visual Studio Code（VSCode）は、世界中の開発者に愛用されるコードエディタです。しかし、デフォルト設定のままでは、その真価を発揮できていません。VSCode 設定をカスタマイズすることで、開発効率は飛躍的に向上します。

本記事では、VSCode 設定の要であるsettings.jsonを活用し、作業効率化と快適な開発環境構築に役立つ主要設定をカテゴリ別に解説します。エディタ表示からフォント、ミニマップ、保存時の自動整形、ファイル除外まで、実践的な設定例と期待される効果を網羅しています。

この記事で得られること

  • VSCode 設定の基本構造とsettings.jsonの編集方法
  • カテゴリ別の主要設定項目と推奨値
  • 保存時の自動整形やファイル除外など作業効率化の設定
  • ワークスペース設定を活用したチーム開発の効率化

前提条件と実行環境

VSCode 設定をカスタマイズするための前提条件を確認します。

項目 要件
VSCode バージョン1.80以上を推奨
OS Windows 10/11、macOS 10.15以上、Linux
権限 設定ファイルへの書き込み権限

設定ファイルの場所

settings.jsonの保存場所はOSによって異なります。

OS ユーザー設定ファイルのパス
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に保存されます。

VSCode 設定の基本構造

VSCode 設定を理解するには、設定スコープと優先順位を把握することが重要です。

設定スコープの種類

VSCode 設定には複数のスコープがあり、下位のスコープが上位を上書きします。

flowchart TD
    A[デフォルト設定] --> B[ユーザー設定]
    B --> C[リモート設定]
    C --> D[ワークスペース設定]
    D --> E[ワークスペースフォルダ設定]
    E --> F[言語固有設定]
    
    style A fill:#e8f5e9
    style F fill:#ffebee
スコープ 適用範囲 用途
ユーザー設定 全プロジェクト共通 個人の好みや習慣に基づく設定
ワークスペース設定 特定プロジェクト プロジェクト固有のルールやチーム共有設定
言語固有設定 特定言語のファイル 言語ごとのフォーマットルール

設定エディタへのアクセス方法

VSCode 設定にアクセスする方法は複数あります。

方法 Windows/Linux macOS
設定エディタ（GUI） Ctrl+, Cmd+,
settings.json直接編集 Ctrl+Shift+P → “Open User Settings (JSON)” Cmd+Shift+P → 同上
ワークスペース設定 Ctrl+Shift+P → “Open Workspace Settings (JSON)” Cmd+Shift+P → 同上

エディタ表示のVSCode 設定

エディタの見た目や表示に関する設定は、長時間のコーディング作業における疲労軽減と視認性向上に直結します。

フォント設定

フォントはコーディングの快適さを左右する重要な要素です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{
  // フォントファミリー（プログラミング用等幅フォント推奨）
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace",

  // フォントサイズ（ピクセル単位）
  "editor.fontSize": 14,

  // 行の高さ（0で自動計算、数値で固定指定）
  "editor.lineHeight": 1.6,

  // フォントの太さ（100-900、"normal"、"bold"）
  "editor.fontWeight": "400",

  // リガチャ（合字）の有効化
  "editor.fontLigatures": true,

  // 文字間隔の調整
  "editor.letterSpacing": 0.5
}

期待される効果: リガチャ対応フォント（Cascadia Code、Fira Codeなど）を使用すると、=> や === などの記号が見やすくなり、コードの可読性が向上します。

行番号と空白文字の表示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{
  // 行番号の表示形式
  // "on": 絶対行番号, "relative": 相対行番号, "interval": 10行ごと
  "editor.lineNumbers": "on",

  // 空白文字の表示
  // "none", "boundary", "selection", "trailing", "all"
  "editor.renderWhitespace": "boundary",

  // インデントガイドの表示
  "editor.guides.indentation": true,

  // アクティブなインデントガイドをハイライト
  "editor.guides.highlightActiveIndentation": true,

  // 括弧のペアガイド
  "editor.guides.bracketPairs": true,

  // 現在行のハイライト
  "editor.renderLineHighlight": "all"
}

期待される効果: インデントガイドと括弧ペアガイドを有効にすることで、ネストの深いコードでも構造を視覚的に把握でき、バグの発見が容易になります。

ミニマップ設定

ミニマップはファイル全体の俯瞰と素早いナビゲーションに役立ちます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  // ミニマップの有効化
  "editor.minimap.enabled": true,

  // ミニマップの表示位置（"left" または "right"）
  "editor.minimap.side": "right",

  // ミニマップの最大幅（ピクセル）
  "editor.minimap.maxColumn": 80,

  // レンダリングモード
  // "proportional": 比例表示, "fill": 幅いっぱい, "fit": 高さに合わせる
  "editor.minimap.size": "proportional",

  // 文字の表示（true: 実際の文字, false: カラーブロック）
  "editor.minimap.renderCharacters": false,

  // スケール（0.1-3）
  "editor.minimap.scale": 1,

  // クリック時の動作
  "editor.minimap.autohide": false
}

期待される効果: 大規模ファイルでも全体構造を把握でき、目的の箇所への移動時間を短縮できます。

カーソルとスクロール設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  // カーソルのスタイル
  // "line", "block", "underline", "line-thin", "block-outline", "underline-thin"
  "editor.cursorStyle": "line",

  // カーソルの点滅アニメーション
  // "blink", "smooth", "phase", "expand", "solid"
  "editor.cursorBlinking": "smooth",

  // カーソル幅（ピクセル）
  "editor.cursorWidth": 2,

  // スムーズスクロールの有効化
  "editor.smoothScrolling": true,

  // スクロール時の追加行数（上下の余白）
  "editor.cursorSurroundingLines": 5,

  // マウスホイールのスクロール速度
  "editor.mouseWheelScrollSensitivity": 1,

  // 水平スクロールの感度
  "editor.fastScrollSensitivity": 5
}

自動整形と保存時動作のVSCode 設定

保存時の自動整形は、コード品質の維持と作業効率化に欠かせない設定です。

保存時の自動フォーマット

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

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

  // フォーマット対象の制限（変更箇所のみ）
  "editor.formatOnSaveMode": "modificationsIfAvailable",

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

  // 入力時に自動フォーマット（セミコロンや閉じ括弧入力時）
  "editor.formatOnType": true,

  // デフォルトのフォーマッター
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

期待される効果: 保存のたびに自動でコードが整形されるため、フォーマットを意識せずにコーディングに集中できます。

言語別のフォーマッター設定

言語ごとに異なるフォーマッターを指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

{
  // JavaScript/TypeScript
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

  // Python
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.tabSize": 4
  },

  // JSON
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },

  // Markdown
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": false
    }
  }
}

自動保存設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  // 自動保存のタイミング
  // "off", "afterDelay", "onFocusChange", "onWindowChange"
  "files.autoSave": "afterDelay",

  // 自動保存の遅延時間（ミリ秒）
  "files.autoSaveDelay": 1000,

  // 自動保存時のフォーマット（別途設定が必要）
  "files.autoSaveWhenNoErrors": true
}

期待される効果: 作業中のファイルが自動的に保存されるため、保存忘れによるデータ損失を防げます。

末尾の処理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  // ファイル末尾に改行を挿入
  "files.insertFinalNewline": true,

  // 末尾の空白を自動削除
  "files.trimTrailingWhitespace": true,

  // 最終行以降の空行を削除
  "files.trimFinalNewlines": true
}

ファイル・フォルダ除外のVSCode 設定

不要なファイルやフォルダを除外することで、検索速度の向上とエクスプローラーの視認性改善が期待できます。

エクスプローラーからの除外

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "files.exclude": {
    // バージョン管理
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,

    // macOS
    "**/.DS_Store": true,

    // Windows
    "**/Thumbs.db": true,

    // Node.js
    "**/node_modules": true,

    // ビルド成果物
    "**/dist": true,
    "**/build": true,
    "**/out": true,

    // キャッシュ
    "**/.cache": true,
    "**/__pycache__": true,
    "**/*.pyc": true
  }
}

検索からの除外

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{
  "search.exclude": {
    // files.excludeに加えて、検索対象から除外
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,

    // ロックファイル
    "**/package-lock.json": true,
    "**/yarn.lock": true,
    "**/pnpm-lock.yaml": true,

    // 生成ファイル
    "**/coverage": true,
    "**/.nyc_output": true,

    // ログ
    "**/logs": true,
    "**/*.log": true
  }
}

ファイル監視の除外

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "files.watcherExclude": {
    // 大量のファイルを含むディレクトリを除外してパフォーマンス向上
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/.hg/store/**": true
  }
}

期待される効果: ファイル監視の除外設定により、大規模プロジェクトでもVSCodeのパフォーマンスが安定します。

インデントとタブのVSCode 設定

インデントの一貫性は、チーム開発においてコードの可読性を保つ基本です。

基本的なインデント設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
  // タブサイズ（スペース数）
  "editor.tabSize": 2,

  // タブをスペースに変換
  "editor.insertSpaces": true,

  // インデントの自動検出
  "editor.detectIndentation": true,

  // 自動インデント
  // "none", "keep", "brackets", "advanced", "full"
  "editor.autoIndent": "full",

  // 改行時のインデント維持
  "editor.wrappingIndent": "indent"
}

言語別インデント設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  // Go言語（タブ推奨）
  "[go]": {
    "editor.insertSpaces": false,
    "editor.tabSize": 4
  },

  // Python（PEP 8準拠）
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },

  // YAML（2スペース）
  "[yaml]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.autoIndent": "advanced"
  },

  // Makefile（タブ必須）
  "[makefile]": {
    "editor.insertSpaces": false
  }
}

コード補完と提案のVSCode 設定

コード補完の挙動を調整することで、入力効率が大幅に向上します。

IntelliSense設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
  // 自動補完の有効化
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },

  // 提案の遅延時間（ミリ秒）
  "editor.quickSuggestionsDelay": 10,

  // 提案リストの表示方法
  "editor.suggestSelection": "first",

  // スニペットの表示位置
  // "top", "bottom", "inline", "none"
  "editor.snippetSuggestions": "inline",

  // 提案の受け入れ方法
  "editor.acceptSuggestionOnCommitCharacter": true,
  "editor.acceptSuggestionOnEnter": "on",

  // 提案リストのプレビュー
  "editor.suggest.preview": true,

  // 提案の詳細情報を表示
  "editor.suggest.showStatusBar": true
}

括弧の自動補完

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
  // 括弧の自動閉じ
  // "always", "languageDefined", "beforeWhitespace", "never"
  "editor.autoClosingBrackets": "languageDefined",

  // クォートの自動閉じ
  "editor.autoClosingQuotes": "languageDefined",

  // 選択範囲を括弧で囲む
  "editor.autoSurround": "languageDefined",

  // 括弧ペアの色分け
  "editor.bracketPairColorization.enabled": true,

  // 独立した括弧ペアガイド
  "editor.bracketPairColorization.independentColorPoolPerBracketType": true
}

期待される効果: 括弧の色分けにより、対応する括弧が一目で分かり、構文エラーの早期発見につながります。

ターミナルのVSCode 設定

統合ターミナルをカスタマイズすることで、エディタとターミナル間の作業がシームレスになります。

ターミナル基本設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  // デフォルトのシェル（Windows）
  "terminal.integrated.defaultProfile.windows": "PowerShell",

  // デフォルトのシェル（macOS/Linux）
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash",

  // フォントファミリー
  "terminal.integrated.fontFamily": "'Cascadia Code', 'MesloLGS NF', monospace",

  // フォントサイズ
  "terminal.integrated.fontSize": 13,

  // 行の高さ
  "terminal.integrated.lineHeight": 1.2,

  // カーソルスタイル
  "terminal.integrated.cursorStyle": "line",

  // カーソルの点滅
  "terminal.integrated.cursorBlinking": true
}

ターミナルプロファイルの定義

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Command Prompt": {
      "path": ["${env:windir}\\System32\\cmd.exe"],
      "icon": "terminal-cmd"
    },
    "Git Bash": {
      "source": "Git Bash",
      "icon": "terminal-bash"
    },
    "WSL": {
      "path": "wsl.exe",
      "icon": "terminal-linux"
    }
  }
}

ターミナルの動作設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  // コピー時に選択解除
  "terminal.integrated.copyOnSelection": false,

  // 右クリックで貼り付け
  "terminal.integrated.rightClickBehavior": "default",

  // スクロールバック行数
  "terminal.integrated.scrollback": 10000,

  // 警告の確認
  "terminal.integrated.confirmOnExit": "hasChildProcesses",

  // ターミナルパネルの位置
  "terminal.integrated.defaultLocation": "bottom"
}

拡張機能連携のVSCode 設定

主要な拡張機能と連携した設定例を紹介します。

ESLint設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
  // ESLintの有効化
  "eslint.enable": true,

  // 保存時に自動修正
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // 検証対象の言語
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // フラットコンフィグの使用
  "eslint.useFlatConfig": true
}

Prettier設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  // Prettierをデフォルトフォーマッターに設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Prettierの設定（設定ファイルがない場合のフォールバック）
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 100
}

Git関連設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  // 自動フェッチ
  "git.autofetch": true,
  "git.autofetchPeriod": 180,

  // 確認ダイアログ
  "git.confirmSync": false,

  // デフォルトのクローン先
  "git.defaultCloneDirectory": "~/Projects",

  // Gitデコレーション
  "git.decorations.enabled": true,

  // 差分エディタの表示
  "diffEditor.renderSideBySide": true,
  "diffEditor.ignoreTrimWhitespace": false
}

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

チーム開発では、ワークスペース設定を活用してプロジェクト固有の設定を共有できます。

.vscode/settings.jsonの例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  // プロジェクト共通のフォーマット設定
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,

  // TypeScriptプロジェクト用設定
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // プロジェクト固有の除外設定
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },

  // ESLint設定
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

.vscode/extensions.jsonの例

推奨拡張機能をチームで共有できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "streetsidesoftware.code-spell-checker",
    "eamodio.gitlens",
    "usernamehw.errorlens"
  ],
  "unwantedRecommendations": []
}

期待される効果: チームメンバー全員が同じ拡張機能と設定を使用することで、コードスタイルの統一とレビュー工数の削減が実現できます。

トラブルシューティング

VSCode 設定で問題が発生した場合の対処法を紹介します。

設定が反映されない場合

  1. 設定ファイルの構文エラー確認: settings.jsonを開き、赤い波線がないか確認します
  2. 設定スコープの確認: ワークスペース設定がユーザー設定を上書きしていないか確認します
  3. VSCodeの再起動: 一部の設定は再起動後に反映されます
  4. 拡張機能の競合確認: 同種の拡張機能が競合していないか確認します

設定のリセット方法

1
2

// settings.jsonの内容をすべて削除し、空のオブジェクトにする
{}

変更した設定の確認

設定エディタで@modifiedフィルターを使用すると、デフォルトから変更した設定のみを表示できます。

期待される効果のまとめ

適切なVSCode 設定を行うことで、以下の効果が期待できます。

カテゴリ 期待される効果
エディタ表示 視認性向上、眼精疲労の軽減
自動整形 コード品質の均一化、フォーマット作業の自動化
ファイル除外 検索速度の向上、ノイズの削減
コード補完 入力効率の向上、タイポの削減
ワークスペース設定 チーム開発の効率化、設定共有の簡素化

まとめ

本記事では、VSCode 設定の全体像をカテゴリ別に解説しました。主要なポイントを振り返ります。

  • エディタ表示: フォント、ミニマップ、インデントガイドで視認性を向上
  • 自動整形: 保存時のフォーマットと末尾処理でコード品質を維持
  • ファイル除外: 不要ファイルの除外で検索とパフォーマンスを改善
  • 拡張機能連携: ESLint、Prettierとの連携で自動化を推進
  • ワークスペース設定: チーム開発での設定共有を実現

これらの設定を組み合わせることで、VSCodeを自分好みの開発環境にカスタマイズし、開発効率を最大化できます。まずは本記事で紹介した設定を試し、自分のワークフローに合った設定を見つけてください。

参考リンク