Classi Advent Calendar 2017 1 日目の記事です。
フロントエンドエンジニアの @kasaharu です。
9 月に入社し、今日ようやく試用期間が解除されました。解除されました？
会社に行ってみないとわからないですね。。

さて、今日は思い立ったその日にでも Lint を導入できるゾ！と言う話をします

今携わっているプロジェクトで使われている技術スタック

• Rails のプロジェクト
• HTML テンプレート : Slim
• JS : CoffeeScript
• CSS : SCSS

→ どこにも Lint ない

Lint ツール導入のモチベーション

モチベーション 1

Initial commit は実に 3 年前でかなり色んな人が携わってきた痕跡がある

にも関わらず、Lint 系のツールが何も入っていない…
ので、当然ファイルごとに書き方が違う
というか、同じファイル内でも書き方が違う、なにこれツラい

モチベーション 2

人が増えた
10 月はフロントほぼ一人だったので、既存のコードには一旦目を向けず、自分がルールみたいな感じで書いていた
が、人が増え相互レビューするようになると、色々齟齬が生まれる
「Trailing space 消して」とか「変数展開しないならシングルクォートで」みたいなのを毎回コメントするのはツラい
し、指摘される方もきっとツラい

そうだ！ Lint 入れよう

導入したツール

Slim-Lint

• 一番書く slim をいち早くルール化すべく導入

導入の手順

1. Gemfile 経由で gem を導入
2. default.yml を参考に .slim-lint.yml というファイル名で設定ファイルを用意
3. 当然このままでは大量にエラーが出るので、すべてのルールを無効化
   • 各ルールの enabled オプションをすべて false に
4. エラーが出なかったルールを有効化
   • enabled オプションを true
5. 1 つずつルールを有効化した上で、現時点で各ルールに違反しているファイルのみ対象外にする
   • enabled オプションの代わりに exclude を使い、対象外にしたいファイルを羅列する
   • すべてのルールに対して実施

これで既存のファイルに影響なく導入ができる！
し、以降ルールに沿わない書き方をしたら検出できる！

あとは、こまめに修正 & ルール変更をしていけば、自然と統一された書き方になる → ツラさ解消

RuboCop

• Slim-Lint の副産物で導入されたのでルールを設定

導入の手順

1. 下記コマンドを使っていま検出されるエラーをリスト化したファイルを作成(.rubocop_todo.yml というファイルができる)

   $ bundle exec rubocop --auto-gen-config app spec
   

2. .rubocop_todo.yml に書かれた問題を検出しないように設定ファイルを下記コマンドで用意

   $ echo "inherit_from: .rubocop_todo.yml" >> .rubocop.yml
   

これだけで Slim-Lint の手順 2, 3, 4, 5 と同等の状態になり、新規に埋め込まれたルール違反のコードだけが検出される
既存ファイルに影響しない！
さらに RuboCop には --auto-correct オプションがあり、一部自動で修正されるルールもある
Style/TrailingWhitespace など影響範囲が限りなくゼロに近いものはこのオプションでさくっと直すと精神衛生上よい

CoffeeLint

• フロントエンドエンジニアとしては JS もよく触るので導入

導入の手順

1. 上 2 つとは毛色が違い、npm で取得
2. 下記コマンドを入力して、設定ファイルを用意 $ coffeelint --makeconfig > coffeelint.json
3. エラーが出たルールを無効化
   • 各ルールの level オプションをすべて ignore に

これでとりあえず既存ファイルに影響なく導入完了！
ただ CoffeeLint は Slim-Lint などとは違い、ルールを有効にした上で一部ファイルを対象外にするということはできないので若干使い勝手が悪い印象…
CoffeeLint のチェックそのものを対象外にするリストを .coffeelintignore に定義することはできるので、既存のファイルに追加・編集よりも新規のファイルを作るほうが多いプロジェクトは、一旦すべてのルールを有効にした上で、既存ファイルを .coffeelintignore に定義したほうが効果的かもしれない

導入したかったもの

• stylelint : やはり CSS まわりもどうにかしたい

所感

• 既存の(しかも触ったときの影響範囲が測れていない)コードがばかばかエラーになったら困ると思っていたが、そこはさすがというか、ちゃんとどのタイミングからでも導入できるようになってた
• 今回は RuboCop がそうであったが、ものによっては auto fixing がオプションであるので軽微なルールの修正は簡単なように作られているものもある

ということで、Lint を導入するのに遅すぎるということはないという学びを得ました

明日は @enomotok_ さんです