CircleCIでeslint-disable-lineを検出する
2019.09.26
ついやりがちな `eslint-disable-line` を残さないために、やっておくといいかもしれないこと。
ESLint
JavaScriptのプロジェクトを複数人(もちろん個人でも)で開発する際は、ESLintを使うことでコーディングルールを統一することができます。
またESLintをCI上でも実行することでレビューの前段階としてミスなど発見がしやすくなります。
eslint-disable-line
ESLintではインラインコメントで部分的にルールを無効にすることができます。
ローカルで開発する際はちょっと確認のために eslint-disable-line
を使ってあれこれすることもあるかと思いますが、これを残したままコードをプッシュしてしまうと意図せずコーディングルールにそぐわないコードが紛れてしまう可能性がでてきます。
例えば console
を禁止するルールがあっても、以下のようなコードはESLintでは検出できません。(もしできる方法があったら教えてほしい) ↓追記へ
console.log('hello') // eslint-disable-line
CircleCIで検出する
eslint-disable-line
が使われていないかチェックするため、CirleCIで以下のコマンドを実行します。
- run:
name: Search eslint-disable-line
command: |
git grep --heading --break -n -e 'eslint-disable-line' -- '*.js' '*.vue' || status=$?
if [ -z "$status" ]; then exit 1; fi
git grep --heading --break -n -e 'eslint-disable-line' -- '*.js' '*.vue'
これはjs(この例ではvueも、他のパターンも指定可能)に eslint-disable-line
がないか探すコマンドです、オプションはお好みで。
後ろに続く || status=$?
について、上記の git-grep
コマンドは該当する行があった場合はステータスが0となりますが、該当する行が無かった場合はステータスが1となります。
つまり該当する行があった場合は $status
には値がセットされないので、値がセットされていなければ exit 1
するというのが以下のコマンドです。
if [ -z "$status" ]; then exit 1; fi
これでCircleCI上で eslint-disable-line
を検出することができるようになりました。
追記
ESLintのCLIのドキュメントを見たら --no-inline-config
というオプションがありました。
このオプションをつけるとインラインでルールを変更している箇所も元々のルールで見るので、CI上でESLintを実行する時にこのオプションを渡せば目的は達成できそうです。
インラインのルール変更自体を禁止する設定もできるようなので、必要であればこちらを設定しても良さそうです。