ESLint 오류의 자동 수정으로 디버그 코드가 제대로 지워지는 문제

추가

다음은 ESLint v5.1.0 이전의 문제와 그 해결 방법을 설명합니다.
v5.1.0 이상 버전에서는 debugger 문이 자동 수정되지 않습니다.

@mysticatea 씨 지적 해 주셔서 감사합니다

문제

편집기 플러그인 등에서 ESLint 오류 자동 수정을 사용하도록 설정하면 디버깅 중에 문제가 발생할 수 있습니다.

예를 들어 no-debugger 의 규칙을 사용하면 코드에 포함된 debugger 문이 저장될 때 자동으로 지워지게 됩니다. 이제 디버깅을 할 수 없습니다.

그렇다고는 해도 debugger 의 지워 잊을 것을 프로덕션에 내버리는 위험이 있으므로, 규칙을 삭제할 수는 없습니다.

특정 규칙을 CI 환경에서만 사용하도록 설정

따라서 no-debugger와 같은 로컬 개발 환경에서는 활성화하지 않지만 끄지 않을 규칙은 CI 환경에서만 활성화하는 방법을 권장합니다.

그렇게 하면, 디버그시에 곤란한 일도 없고, 프로덕션에 디버그 코드가 부주의하게 배치되어 버리는 것도 막습니다.

환경별로 특정 규칙을 켜고 끕니다.

환경별로 특정 규칙의 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'",
  }
}