ESLintエラーの自動修正でデバッグコードが勝手に消されてしまう問題

追記

以下はESLint v5.1.0以前の問題とその対処を記したものです。
v5.1.0以上のバージョンでは debugger ステートメントは自動修正されないようになりました。

@mysticatea さんご指摘ありがとうございました

問題

エディタのプラグインなどで、ESLintエラーの自動修正を有効にしていると、デバッグ時に困ることがあります。

たとえば、 no-debugger のルールを有効にすると、コード中に埋め込んだ debugger ステートメントが保存時に自動で消されてしまい困るわけです。これではデバッグができません。

とはいえ、 debugger の消し忘れをプロダクションに出してしまうリスクがあるので、ルールを削除するわけにはいきません。

特定のルールをCI環境でのみ有効にする

そこで、no-debugger など、ローカル開発環境では有効にしたくないけど、オフにするわけにはいかないルールはCI環境のみで有効にする方法をオススメします。

そうすれば、デバッグ時に困ることもありませんし、プロダクションにデバッグコードが不用意にデプロイされてしまうことも防げます。

環境ごとに特定のルールのon/offを切り替える

環境ごとに特定のルールのon/offを切り替えるには、環境変数を利用できます。

たとえば、このような .eslintrc ファイルがあるとします。

.eslintrc

{
    "rules": {
        "no-debugger": "error",
    }
}

これを、このように書き換えます。

.eslintrc.js

// 環境変数は文字列として取得されるので注意!!
const ERROR_IN_CI = process.env.CI === "true" ? "error" : "off";

module.exports = {
    rules: {
        "no-debugger": ERROR_IN_CI,
    }
};

CIとしてよく使われるCircleCIやTravisCIではデフォルトで CI という環境変数に true が設定されているので、この値を利用して環境ごとに切り替えることが可能です。

• CircleCIドキュメント
• TravisCIドキュメント

その他のCIを使っていて process.env.CI で値を取得できない場合は、下のように npm-scripts を書いて、環境ごとに呼び分けると良いでしょう。

package.json

{
  "scripts": {
    "eslint:dev": "eslint 'src/**/*.js'",
    "eslint:ci": "CI=true eslint 'src/**/*.js'",
  }
}