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

試してみると、確かにこれで動きました。

.babelrc

{
  // コメント付き
  // キーにダブルクォートなし、
  // 文字列にシングルクォート使用、
  // ケツカンマ
  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。

config.cson

  core:
    customFileTypes:
      "source.js": [
        "babelrc"
      ]

すると、

いい感じっすね！
ただ、以下のように「JSON5として正しくない」コードを書いた場合、

.babelrc

console.log('hello, json5!');
{
  // コメント付き
  // キーにダブルクォートなし、
  // 文字列にシングルクォート使用、
  // ケツカンマ
  presets: ['env'],
}

綺麗にシンタックスハイライトされちゃいます。JavaScript扱いだからね。
当然これでBabelを動かしたらエラー。

実は、ファイルの拡張子を .json5 にした場合も、デフォルトでは上の画像の .js と同じハイライトになっちゃうんですよね。手抜きか！

ちゃんと「JS風ではなくJSON5風のシンタックスハイライト」にしたい場合は、まずATOMにパッケージ language-json5 をインストールします。

これによって .json5 の拡張子は .js とは違うハイライトになるし、上記の config.cson で source.json5 というフォーマットが使えるようになります。

config.cson

  core:
    customFileTypes:
      "source.json5": [
        "babelrc"
      ]

その結果がコチラ。

console.logの部分、真っ赤にはならないけど、.js のハイライトを見慣れてるJavaScripterの皆さんなら、「なんか変だな。。JSON5ではこれダメなのか？」って気づきますよね！
めでたしめでたし。

ちなみにQiitaのコードブロックで使えるシンタックスハイライトには、json5はありませんでした。。。やっぱマニアックなフォーマットなのかしら？だからこの記事の.babelrcコードはjsでハイライト。csonもなかったから、config.csonはcoffeescriptでハイライトしたけどね。

シンタックスハイライト絡みのネタって、意外と解説記事が少ないんですが、こだわる人少ないのかなぁ？僕は見た目が悪いとめちゃくちゃ気持ち悪くなって集中できないタチなので、まず「見た目を綺麗にすること」に全力を尽くしちゃうんですよねー。

ではまた！