Edited at

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


:warning: 追記 :warning:

以下はESLint v5.1.0以前の問題とその対処を記したものです。

v5.1.0以上のバージョンでは debugger ステートメントは自動修正されないようになりました。

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


問題

エディタのプラグインなどで、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 が設定されているので、この値を利用して環境ごとに切り替えることが可能です。

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


package.json

{

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