VSCode の JSON の整形設定を直そうとした話
VSCode を何年もの間ずっと使ってるから、設定ファイルも大分古くなっていて、いつ何を変更したのかまったく記憶にございません。そのせいで、いろんなバグとか想定外のことが発生しているけれど、いろいろ忙しくて直す暇もなかった。今日はたまたま JSON をちゃんと beautify したいけど、いつもながら動いてなくて、あぁー困ったな思っていろいろ調べて直したという話をお届けいたします。
目標
- Beautify できない原因を究明しそれを直したい！
経緯
現状把握
まず VSCode でデフォルトで Shift + Alt + F とか右下のあのボタンを「✓」にしたら、保存の時に自動的にやってくれるとかという機能であるというふうに認識している。
そして、その機能は何かしらのプラグインなり、組み込み機能の Formatter によって Format できるというわけである。
ただし、なんか以前設定が上手く弄れず、トラウマになったから、普段は全然自動フォーマット使っていなかった。そして、今日はそれをしようとしたところ、なんか全然利いていないようだ。
ログを見る
Prettier のログを見ると、なんかエラってる。メッセージからすると、json ファイルを ts ファイルとかに誤認識しているっぽい（JSON の Object を Scoped Block と誤解したご様子、まぁどっちでも{...}だから仕方ない）。
よくわからないけど、現在の設定したフォーマッターがちゃんとjsonできないらしい。
調べる
とりあえず簡単に調べてみたけど、下の記事が見つかった。
う～ん、なんかそもそも何も設定していないのに動いているな……と気づいて、あー多分 VSCode の組み込み機能になったというか、設定せずにできるっぽい。
settings.json を見る
Ctrl + , で設定を開いて、ファイルを見たら、こうなってた。
よくわからないけど、これで以前動いてたはずだし、この記事を読んでも、去年なのに、動いている様子……
多分何かしらうちの環境上の問題（バージョンとか）があって、それで効いていないかもしれない。それを追求して直すということもできるけど、代替案が見えたのでそれをする。
VSCode のデフォルトの言語機能にする
{
[...]
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
例の設定を削除して、再度 Format コマンドを実行すると、
今度は、複数のフォーマッターがあって、それを選べと仰せ付けたので、「設定」を選ぶとこの中から選べるということらしい。
気になったのは JSON Language Features といういかにも公式なやつがあって、それにしてみると、正常に作動したので、めでたしめでたし！
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
[jsonc] と [json] を一括設定する
しかし、もう一つのことに気づいてしまった、そもそも現在言語が JSON (json）ではなくて、JSON with Comments（jsonc）だったことを……
これも同様に設定するとできるけど、さすがにまとめたいなと思う。
まず VSCode の公式ドキュメントを参照して、複数言語に同じ設定を指定できるかと調べてざっと目を通したところ、特に書いてなくて困った（詳しく確認していないけど……）。
ということで、vscode language-specific editor settings multiple と Google 先生に聞いてみたところ、この Issue を案内してもらった
そこから、バージョン 1.63.0 で新しく追加された設定ということで、以下のリリースノートを見つけた
なるほど、以下のような構文で行けるのかと分かったので書いた。それで、通ったわけです。
{
"[json][jsonc]": {
[...]
}
}
結論
これで行けた。いずれは Prettier の設定も修正したいけど、今回はここまでとしましょう。めでたし、めでたし。
{
[...]
"[json][jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
Discussion