Hiroto's diary

プログラミングとか色々

.babelrc はJSON5で書ける

JavaScript

公式のドキュメントにも書いてあるし割と一般的な事だと思ってたけど、知らない人ばっかだったので布教がてら。

そもそもJSON5とは

JSON5とは

  • コメントが書けない
  • Stringでシングルクォートが使えない
  • Arrayでケツカンマが書けない

などの、JSONの難点を解消したフォーマット。

公式サイトの例のように、JavaScriptと同じような感じでJSONを書けます。

json5.org

.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として解釈されている為エラーが出ます。

f:id:Hiroto-K:20190209220012p:plain

VSCodeでの例。

VSCodeにはJSON with Commentsというモードがありコメントだけはエラーが出ませんが、他のJSON5特有の書き方は普通にエラーになります。

f:id:Hiroto-K:20190209220017p:plain

JSON5で書けるけど、書こうとするとエラーに見舞われる点だけが厳しいです。

エディターが標準でJSON5に対応してくれればJSON5で書く.babelrcも増えるだろうし、エディターはJSON5に対応してください…(他力本願)

© 2015 hiroxto