.babelrc はJSON5で書ける
公式のドキュメントにも書いてあるし割と一般的な事だと思ってたけど、知らない人ばっかだったので布教がてら。
そもそもJSON5とは
JSON5とは
- コメントが書けない
- Stringでシングルクォートが使えない
- Arrayでケツカンマが書けない
などの、JSONの難点を解消したフォーマット。
公式サイトの例のように、JavaScriptと同じような感じでJSONを書けます。
.babelrc
はJSON5で書ける
あまり知られていませんが、.babelrc
はJSONではなくJSON5として解釈されます。
この事はドキュメントにしれっと書かれています。
Any file that isn't a .js file will be parsed as JSON5 and should contain an object matching the options format that Babel accepts.
https://babeljs.io/docs/en/config-files#json5
普通のJSONで.babelrc
を書いた例。
ごく一般的な.babelrc
です。
{ "presets": [ "@babel/preset-env" ], "compact": false }
上記の.babelrc
をJSON5で使える書式で書いた例。
よりJavaScriptに近い書式で書けます。
{ // コメント presets: [ '@babel/preset-env', ], compact: false, }
普通のJSONに準じた書き方をして、コメントだけ書くとかも可能。
{ // コメント "presets": [ "@babel/preset-env" ], "compact": false }
JSON5で書くとシンタックスハイライトが厳しい
.babelrc
の書式はJSONだと思っている人が多いからなのか、JSONで解釈するエディターが殆どです。
PhpStormでの例。
JSON5ではなく、JSONとして解釈されている為エラーが出ます。
VSCodeでの例。
VSCodeにはJSON with Commentsというモードがありコメントだけはエラーが出ませんが、他のJSON5特有の書き方は普通にエラーになります。
JSON5で書けるけど、書こうとするとエラーに見舞われる点だけが厳しいです。
エディターが標準でJSON5に対応してくれればJSON5で書く.babelrc
も増えるだろうし、エディターはJSON5に対応してください…(他力本願)
JSONにコメントを書く時や、JSON5を書く時はJavaScriptでハイライトすると便利。
たまに役に立つかもしれないライフハックです。
コメント入りのJSONをJSONでハイライトすると色々残念
設定などの説明でJSONにコメントを入れた時、普通にJSONでシンタックスハイライトをさせると、残念な感じになります。
{ // presetの設定 "presets": [ "@babel/preset-env" ], // compactオプションを使わない "compact": false }
JSON5で書いた物をJSONでハイライトさせると、こっちは更に残念な感じに。
{ // presetの設定 presets: [ '@babel/preset-env', ], // compactオプションを使わない compact: false, }
JavaScriptでハイライトするといい感じに
こういう時はJavaScriptでハイライトさせると色々いい感じになります。
{ // presetの設定 "presets": [ "@babel/preset-env" ], // compactオプションを使わない "compact": false }
JSON5の例。
{ // presetの設定 presets: [ '@babel/preset-env', ], // compactオプションを使わない compact: false, }