xoとavaでお手軽リント・テスト環境構築
元旦にStyleStats v7.0をリリースした。めでたいことだ(知らんけど)。バージョンアップ作業は例のごとく依存するnpm modulesをアップデートして終わりというのがt32kの伝家の宝刀だが、せっかくなので今回はES6に書き換えようと思った。
しかし、それもfunction
をアロー関数に変更するぐらいだろうと、タカをくくっていたが、書き出してみると、1000ch君パイセンの煽り意識高いレビューコメントのおかげで、いろいろ勉強させてもらった、多謝( ˘ω˘)!
ESLint
アロー関数に変更するだけってのもあれだから、ちゃんとESlintもES6用の設定にカスタマイズしようと思い必死こいて.eslintrc
とにらめっこしていた。といっても下記の記事を参考にしただけだが。
ESlintの仰せのままにコードを書き換えていく。書き終えたところで助言。
.eslintrcメンテしていくのつらいから、xo使ったらどうですか?
タシ蟹!設定項目いっぱいあってめんどくさいです!しかし、xoってなんぞ( ˘ω˘)?
xo: JavaScript happiness style linter
いっぱいnpm作ってるかの有名なsindresorhus氏のリンター。内部的にはESlintを使っていて、氏が思うESlintの設定でリントしてくれるというもの。なるほど検索しづらい!
僕みたいな、あまりJSにこだわりがない三等兵にとっては、こうゆう業界の先いってる人の考えを真似て従うのは性に合ってる。というかリントの設定で時間つぶしたくないもんね。
似たようなものでfeross/standardがある。この圧倒的な名前の王道感のおかげが、こっちのほうが有名だ。ただこっちはセミコロンなしが既定のルールとなっている。さきほど、こだわりはないと言ったが、こだわりがないからこそ小さい頃に『JSはセミコロンを必ずつけろ!』と教わって生きてきたので敷かれたレールから外れるのがこわい。そうゆう人も多いのか、Flet/semistandardというリンターもある。さっそくスタンダード分裂してんじゃねーか!と思ったのはいざ知らず。
xoのほうはセミコロンつけるな!とは言わないしログもきれい( ˘ω˘) ただ、デフォルトでインデントはタブというルールがある。これが気に食わない人はpackage.json
にxo
のフィールドを作って設定を変更できる。その他のいくつかの設定もpackage.json
から変更できる。
{
"name": "awesome-package",
"xo": {
"spacce": true
}
}
またスペース派だったけど、今回からタブ派に切り替えようかしらって思った人はxo --fix
ですぐに対応できる。今まで使ってたESlintの設定よりもチョイ厳し目だが、全体的に納得感あるので気に入っている。
ava: Futuristic JavaScript test runner
xoのドキュメントを読んでいるとavaという単語が目につく。同じsindresorhus氏作のテストランナーだ。自分で未来的って言っちゃうほどなんだから、新しい仕様が採用されているのだろうと思い、せっかくなのでxoと一緒にこっちも採用してみた。1000ch君パイセンも最近使ってると言ってたし。
以前まではMochaを使用していたが、非同期のテストがしづらいというか、よくわかんないままやってた。avaはテストの実行自体も非同期にやってくれて早い。またPromiseをサポートしているので、done()
とかいちいち呼び出さなくてもいい。
test('Promiseを返す関数のテスト', t => {
return somePromise().then(result => {
t.is(result, 'おんなじあたい');
});
});
ちょうど、StyleStats#parse()
もPromiseを返すように変更したのでだいぶ楽に書けるようになった。と思っていたが、xoとavaを併用していると、上記のテストは『Async/Awaitを使えよー!』とxoに怒られる( ˘ω˘)
test('Promiseを返す関数のテスト', async t => {
const result = await somePromise();
t.is(result, 'おんなじあたい');
});
言われたとおりにしたら、さらに見やすくなって感動した。
あとは、Mochaを使ってるとdescribe
やit
といったグローバル変数を使うはめになって、ESlintで『そんなもん宣言されてないやんけ!』と怒られて、テストファイルだけ、その変数を除外するとかゆうめんどくさいことからも開放されてよい( ˘ω˘)
nyc: the Istanbul command line interface
avaでコードのカバレッジを取るにあたって、istanbulは使えなくて、代わりにサブプロセスのnycというのを使うのだが、なんしかうまくいかない。
同じ設定・コードなのに、うまくいく時といかない時がある。よくわからないので寝て待つことにする。
まとめ
最初のセットアップもxo --init
、ava --init
で出来るので楽ちんである。あとなんとかrcファイルもルートディレクトリに貯まらないのもいい(package.jsonは肥大化するが許容範囲だと思う…)。できるかぎり開発環境構築に手間を取らず、アプリケーションのコードに集中したいものですな( ˘ω˘)