アルアカ - Arcadia Academia

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

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

Featured image of the post

Visual Studio Code (VSCode)は、多くの開発者に愛用されているテキストエディタで、その柔軟な設定機能が大きな特徴です。

VSCodeでは、settings.jsonというファイルを使ってエディタの挙動や環境設定を細かくカスタマイズすることができます。

このファイルに設定を追加することで、自分の作業スタイルに合わせた最適な開発環境を作り上げることができます。

また最近では「Cursor」というAIコードエディタも人気ですがCursor自体がVSCodeをもとに作れれているため本記事の内容でsettings.jsonの編集ができます。

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

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

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

[目次を開く]

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にアクセスしましょう。

Image in a image block

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

Image in a image block

これでユーザー設定の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関連のおすすめ記事

📄Arrow icon of a page linkVSCodeのsettings.jsonを徹底解説!プロジェクトごとに設定する方法

📄Arrow icon of a page linkVSCodeでデフォルトのターミナルを変更する方法

📄Arrow icon of a page linkVSCodeで自動成型の設定方法

よくある質問

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

質問をみる

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をリポジトリに含めることで、チームメンバーと共有できます。このファイルをリポジトリに追加しておけば、クローンしたメンバーが同じ設定で開発を進めることができます。

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

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

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

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

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

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

開発環境の構築、一緒に解決しませんか?

メンタープログラムの詳細を見る
無料相談はこちら