Help us understand the problem. What is going on with this article?

ESLintをオレオレレベル設定してCIでだけ警告したりする

More than 3 years have passed since last update.

ESLintでCIのときだけエラー警告してほしい

おさらい:ESLint の標準的なレベル分け

ESLintでのレベル分けは3つ定義されている

http://eslint.org/docs/user-guide/configuring#configuring-rules

  • off, 0 - オフ。何も警告しない
  • warn, 1 - 警告するが、exit codeに影響を与えない(CIではコケない)
  • error, 2 - 警告する。exit codeを1にする

問題:いい具合のレベル感がない

プロダクション環境でESLintをかけていると、no-consoleno-unused-varなど、「これproductionビルドまでにはエラーとして検出したいのだけど、開発中は見逃してほしい」みたいなのがたまにある。
errorにしてしまうとstorybookとかでエグくなって辛い等もあった)

ESLint自体のエラーレベルは三段階のみで、CLIからwarnがあってもexit codeを1で返すようなコマンドも見つからなかった(多分このへんはレベル管理をシンプルにしているからだと推測できる)

解決法:レベル分けの定数管理を利用してCI判定

reactのeslintrc.jsを見てみるとこのエラーレベルを定数定義していることがわかる

const OFF = 0;
const WARNING = 1;
const ERROR = 2;
 :
 rules: {
    'accessor-pairs': OFF,
    'brace-style': [ERROR, '1tbs'],
 }

なるほど。そういうのもあるのか。

これを応用して、CIの場合だけWARNINGの挙動をエラー化させれば良い。circle-ci, travis-ciはどちらもCI=trueという環境変数を設定しているので、これを利用する

const ERROR = "error"
const WARNING = (process.env.CI == true) ? "error" : "warn"
const OFF = "off"

これでCI時のみ警告出来るようなった。

process.env.CIが使えないなら自前で変数設定してもいいんじゃないかと思う

const ERROR = "error"
const WARNING = (process.env.STRICT_LINT == true) ? "error" : "warn"
const OFF = "off"

// こんな感じもアリだろう
// const WARNING = (process.env.STRICT_LINT == true || process.env.CI == true) ? "error" : "warn"



{
  "scripts": {
    "lint": "STRICT_LINT=true eslint"
  }
}

応用編:意味付けでオレオレレベル設定をする

上記のレベルの定数管理を見て思いついてやってみてる案。

ESLintはレベル分割を最低限の挙動の違いだけをシンプルに分割している。

だが実は実務上だと「このルールなんでつけたんだっけ?」みたいなのもあって、もうちょっと意味を持たせたくなったりする。ということで色々細分化させてみたら良いんじゃないかと思いついている(逆にわかりづらくなったりするかもしれない)

だいたいこんなイメージ

// no-evalとかコードの書き方が変わる禁止事項
const CRITICAL = "error"

// エラーなのだけどデバッグ時には無視していい警告だけする
const ERROR = (process.env.CI == true) ? "error" : "warn"

// たまに気が向いたら直すルール(無い方が良いかも?)
const WARNING = "warn"

// OFFはそのまま
const OFF = "off"

//// ここから読み手向けなど ////

// 「手で治すのめんどいけどfixableだったらつけとくか」的なルール。dev時は出さない
const FIXABLE = (process.env.CI == true) ? "error" : "off"

// おためしルール。きつかったらチームで相談しようね、という宣言
const TRIAL = "error"

// 本当はつけたいけど、直すの重くて妥協しているやつ。rubocop_todo的なやつに近いイメージ
const TODO = "off"

FIXABLEは結構「これなんでやったんだっけ」ってなるやつが多いので、結構いいと思っている。TRIALとTODOは思いついたものの使い所が無くて今のところ運用出来てない

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした