VSCodeのエクステンションindent-rainbowカスタマイズ備忘録

タイトルの通りではありますが…。

VSCodeのエクステンション、indent-rainbowの初期設定では、インデントが色ごとに分けられて見やすくなりますよね。ただ、初期設定では閉じ括弧が示され無くなったりと微妙に不便だったので（私だけ？）カスタマイズしました。あと単純にデフォルトの見え方があまり好みではなかった。カラーではなくラインの見え方に変更しました。

この左側がデフォルトの見え方

完成形

結論からドン

// settings.json
  "indentRainbow.indicatorStyle": "light",
  "indentRainbow.lightIndicatorStyleLineWidth": 1,
  "editor.guides.indentation": false,
  "indentRainbow.colors": [
    "rgba(255,255,64,0.6)",
    "rgba(127,255,127, 0.6)",
    "rgba(255,127,255, 0.6)",
    "rgba(79,236,236, 0.6)"
  ]

settings.json内トップのオブジェクト直下に上のコードを追加します。線の太さは`indentRainbow.lightIndicatorStyleLineWidth`から変更できます。

参考

how can i do this? (i downloaded Indent-Rainbow extension but didn't know how to make it like this )

あと全然関係ないですがワークベンチも設定で見やすくできます。

こうして

// settings.json
  "workbench.editor.enablePreview": false,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.tree.indent": 12,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#05ef3c"
  },

こう

参考

Improve your VS Code Explorer file tree structure.

Add these settings in your configuration file for better visibility:

```
"workbench.tree.indent": 15,
"workbench.tree.renderIndentGuides": "always",
"workbench.colorCustomizations": {
"tree.indentGuidesStroke": "#05ef3c"
}
``` pic.twitter.com/02SiVKo1Yr

— Catalin (@catalinmpit) September 7, 2023