JSONってコメント書けなかったり、制約が多くて使いづらいですよね。ESLintの.eslintrc
みたいにJSONとYAMLが両方使える場合は僕はYAML使うんですが、Babelの.babelrc
はYAML未対応でした。
しかし調べてみると、.babelrc
はJSON5に対応しているので、コメント書いたり普通にできるとのこと!
https://babeljs.io/docs/usage/babelrc/
https://github.com/babel/babel/issues/4980#issuecomment-266035749
試してみると、確かにこれで動きました。
{
// コメント付き
// キーにダブルクォートなし、
// 文字列にシングルクォート使用、
// ケツカンマ
presets: ['env'],
}
しかーし、ATOMエディタでは.babelrc
のシンタックスハイライトはJSON扱いになるので、このように真っ赤っかになって、正しいのに「悪いことしてる感」極まりないのです。。。
拡張子を付けて .babelrc.json5
とか .babelrc.js
にしてやると綺麗にハイライトはされるけど、肝心のBabelの設定としては拒否られるので無意味。.babelrc
という名前しか認めぬ!という硬派ぶりであります。
さすが全人類が同じ言語を使っていた伝説を体現するツールって感じですね。ファイル名もブレない!
そんな時は、ATOMの設定ファイルconfig.cson
を編集して、「customFileTypes」を追加してやりましょう。
http://flight-manual.atom.io/using-atom/sections/basic-customization/#customizing-language-recognition
JSONで真っ赤になるような状態を解消したいだけなら、以下のようにsource.js
にすればOK。
core:
customFileTypes:
"source.js": [
"babelrc"
]
すると、
いい感じっすね!
ただ、以下のように「JSON5として正しくない」コードを書いた場合、
console.log('hello, json5!');
{
// コメント付き
// キーにダブルクォートなし、
// 文字列にシングルクォート使用、
// ケツカンマ
presets: ['env'],
}
綺麗にシンタックスハイライトされちゃいます。JavaScript扱いだからね。
当然これでBabelを動かしたらエラー。
実は、ファイルの拡張子を .json5
にした場合も、デフォルトでは上の画像の .js
と同じハイライトになっちゃうんですよね。手抜きか!
ちゃんと「JS風ではなくJSON5風のシンタックスハイライト」にしたい場合は、まずATOMにパッケージ language-json5 をインストールします。
これによって .json5
の拡張子は .js
とは違うハイライトになるし、上記の config.cson
で source.json5
というフォーマットが使えるようになります。
core:
customFileTypes:
"source.json5": [
"babelrc"
]
console.log
の部分、真っ赤にはならないけど、.js
のハイライトを見慣れてるJavaScripterの皆さんなら、「なんか変だな。。JSON5ではこれダメなのか?」って気づきますよね!
めでたしめでたし。
ちなみにQiitaのコードブロックで使えるシンタックスハイライトには、json5
はありませんでした。。。やっぱマニアックなフォーマットなのかしら?だからこの記事の.babelrc
コードはjs
でハイライト。cson
もなかったから、config.cson
はcoffeescript
でハイライトしたけどね。
シンタックスハイライト絡みのネタって、意外と解説記事が少ないんですが、こだわる人少ないのかなぁ?僕は見た目が悪いとめちゃくちゃ気持ち悪くなって集中できないタチなので、まず「見た目を綺麗にすること」に全力を尽くしちゃうんですよねー。
ではまた!