Zenn
⚙️

VSCodeのsettings.jsonをソートして見やすくしよう

2022/06/21に公開
VS Code
tech

背景

  • 長年 vscode を使っていると settings.json が混沌としてくる
  • ずっと settings.json をアルファベット順にソートする手段を探していて、課題点はあるものの概ね満足する手段を見つけたのでそれをご紹介

手順

1. 下記の vscode 拡張を install する

https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json

2. よく使う設定項目を"sortJSON.orderOverride"に設定する

この設定をしないと、言語に対しての設定("[markdown]"など)が一番上に来てしまう

{
  "sortJSON.orderOverride": [
    // 一番上に"sortJSON.orderOverride"を固定する
    "sortJSON.orderOverride"
    // よく使う設定項目を記述
  ]
  // ...
}

3. cmd+shift+p でコマンドパレットを開きSort JSONを実行

色々なオプションがあるが、一番上の項目で OK

ソートした結果

以下は自分の settings.json を一部編集したもの

before
{
  // "editor.fontFamily": "Iosevka-light, 'TsukuARdGothic-Regular'",
  "editor.fontFamily": "'Fira Code',  'HiraMaruProN-W4'",
  // "editor.fontSize": 14.5,
  "editor.fontSize": 13,
  // "editor.fontSize": 11.5,
  // "window.zoomLevel": 1,
  "update.mode": "manual",
  "prettier.printWidth": 100,
  // "terminal.external.osxExec": "Hyper.app",
  "terminal.external.osxExec": "iTerm.app",
  "[markdown]": {
    // "editor.defaultFormatter": "vscode.configuration-editing"
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?　、。「」【】『』（）！？をはが"
  },
  "editor.suggestFontSize": 10,
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "json.schemas": [
    {
      "fileMatch": [".prettierrc"],
      "url": "http://json.schemastore.org/prettierrc"
    }
  ],
  "markdown.preview.fontSize": 12,
  "terminal.explorerKind": "external",
  "[plaintext]": {
    "editor.quickSuggestions": {
      "comments": false,
      "other": false,
      "strings": false
    },
    "files.autoGuessEncoding": true
  },
  "terminal.integrated.fontFamily": "Iosevka-semibold, 'HiraMaruProN-W4'",
  "git.ignoreMissingGitWarning": true,
  "terminal.integrated.fontSize": 11.5
}
after("sortJSON.orderOverride"なし)
{
  "[markdown]": {
    // "editor.defaultFormatter": "vscode.configuration-editing"
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?　、。「」【】『』（）！？をはが"
  },
  "[plaintext]": {
    "editor.quickSuggestions": {
      "comments": false,
      "other": false,
      "strings": false
    },
    "files.autoGuessEncoding": true
  },
  // "editor.fontFamily": "Iosevka-light, 'TsukuARdGothic-Regular'",
  "editor.fontFamily": "'Fira Code',  'HiraMaruProN-W4'",
  // "editor.fontSize": 14.5,
  "editor.fontSize": 13,
  "editor.suggestFontSize": 10,
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "git.ignoreMissingGitWarning": true,
  "json.schemas": [
    {
      "fileMatch": [".prettierrc"],
      "url": "http://json.schemastore.org/prettierrc"
    }
  ],
  "markdown.preview.fontSize": 12,
  "prettier.printWidth": 100,
  "terminal.explorerKind": "external",
  // "terminal.external.osxExec": "Hyper.app",
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.fontFamily": "Iosevka-semibold, 'HiraMaruProN-W4'",
  "terminal.integrated.fontSize": 11.5,
  // "editor.fontSize": 11.5,
  // "window.zoomLevel": 1,
  "update.mode": "manual"
}
after("sortJSON.orderOverride"あり)
{
  "sortJSON.orderOverride": [
    "sortJSON.orderOverride",
    "editor.fontFamily",
    "editor.fontSize",
    "terminal.integrated.fontFamily",
    "terminal.external.osxExec"
  ],
  // "editor.fontFamily": "Iosevka-light, 'TsukuARdGothic-Regular'",
  "editor.fontFamily": "'Fira Code',  'HiraMaruProN-W4'",
  // "editor.fontSize": 14.5,
  "editor.fontSize": 13,
  "terminal.integrated.fontFamily": "Iosevka-semibold, 'HiraMaruProN-W4'",
  // "terminal.external.osxExec": "Hyper.app",
  "terminal.external.osxExec": "iTerm.app",
  "[markdown]": {
    // "editor.defaultFormatter": "vscode.configuration-editing"
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?　、。「」【】『』（）！？をはが"
  },
  "[plaintext]": {
    "editor.quickSuggestions": {
      "comments": false,
      "other": false,
      "strings": false
    },
    "files.autoGuessEncoding": true
  },
  "editor.suggestFontSize": 10,
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "git.ignoreMissingGitWarning": true,
  "json.schemas": [
    {
      "fileMatch": [".prettierrc"],
      "url": "http://json.schemastore.org/prettierrc"
    }
  ],
  "markdown.preview.fontSize": 12,
  "prettier.printWidth": 100,
  "terminal.explorerKind": "external",
  "terminal.integrated.fontSize": 11.5,
  // "editor.fontSize": 11.5,
  // "window.zoomLevel": 1,
  "update.mode": "manual"
}

20241021追記 ソートしたくない項目を設定する

sortJSON.excludedPathsで設定する
sortJSON.excludedPathsでsortJSON.excludedPathsを2番目に設定するとわかりやすい

{
  "sortJSON.orderOverride": [
    "sortJSON.orderOverride",
    "sortJSON.excludedPaths",
    // ...
  ],
  "sortJSON.excludedPaths": ["explorer.fileNesting.patterns"],
  // ...
}

課題点

設定項目のコメントはソートされない

上記の json では、"update.mode"の上 2 つのコメントが、ソートされずにくっついている
それぞれに「コメントアウトを解除 → ソート → 再度コメント」すれば解決
(まとめてやると混乱するので注意)

"sortJSON.orderOverride"について

"sortJSON.orderOverride"は settings.json に限らず全ての json を対象とするため、他の json に対してSort JSONを使用したいときに不便
この拡張を settings.json 専用と割り切るなら問題にならない

総括

長年の悩みが解決できたのでとてもハッピー 🥰

Discussion