VSCodeのsettings.jsonサンプルと書き方

Visual Studio Code (VSCode)は、多くの開発者に愛用されているテキストエディタで、その柔軟な設定機能が大きな特徴です。VSCodeでは、settings.jsonというファイルを使ってエディタの挙動や環境設定を細かくカスタマイズすることができます。このファイルに設定を追加することで、自分の作業スタイルに合わせた最適な開発環境を作り上げることができます。

`settings.json`とは？

settings.jsonは、VSCodeのユーザー設定やワークスペース設定を記述するためのファイルです。ユーザー設定はVSCode全体に適用され、ワークスペース設定は特定のプロジェクトやフォルダに対してのみ適用されます。このファイルはJSON形式で記述され、キーと値のペアで設定を指定します。

ユーザー設定とワークスペース設定の違い

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

`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`の開き方

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

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

これでユーザー設定のsettings.json に簡単にアクセスできます。ワークスペース設定の場合は.vscode フォルダに保存される settings.json を編集してください。

`settings.json`の基本的な書き方

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

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.wordWrap: 長い行を折り返すかどうかを設定します。"on"にすると、画面の幅に合わせて自動で折り返されます。
files.autoSave: ファイルの自動保存のタイミングを設定します。"afterDelay"に設定すると、指定された遅延時間後に自動保存されます。
files.autoSaveDelay: 自動保存が行われるまでの遅延時間をミリ秒で指定します。この例では1000ミリ秒（1秒）です。
terminal.integrated.shell.osx: macOSで使用するデフォルトのシェルを指定しています。ここでは/bin/zshが指定されています。
workbench.colorTheme: VSCodeのカラーテーマを設定します。この例では"Visual Studio Dark"が選択されています。

よく使われる設定

コード整形の設定

jsonコードをコピーする
{
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "all"
}

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

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

jsonコードをコピーする
{
    "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を自分好みに設定し、効率的な開発環境を整えることが可能です。自分のワークフローに合った設定を見つけ、最適な開発環境を作り上げてください。

アルアカ - Arcadia Academia