eslint 규칙을 점진적으로 추가하는 방법

자바스크립트 프로젝트가 성장하고 새로운 엔지니어가 팀에 합류함에 따라 새로운 eslint 플러그인과 규칙을 추가하여 코드 기반을 더욱 견고하게 만들 수 있습니다.

문제는 종종 이러한 새로운 eslint 규칙이 모든 프로젝트 파일의 변경을 요구할 수 있고 프로젝트가 충분히 크기 때문에 eslint 규칙이 2000+ files 에서 변경이 필요한 상황이 있을 수 있다는 것입니다.

프로젝트의 CI를 깨지 않고 점진적으로 eslint 규칙을 적용할 수 있다면 어떨까요?

lint-staged , husky 및 .eslintrc.js 파일의 일부 변경 사항을 사용하여 이를 수행할 수 있습니다.
lint-staged와 함께 husky를 이미 사용하고 있기를 바랍니다. 그렇지 않은 경우 설정하십시오.
.lintstagedrc.js 파일은 다음과 같을 수 있습니다.

// .lintstagedrc.js
module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};

package.json 파일에 eslint 규칙을 따르기 위해 CI에서 실행하는 스크립트가 있을 수도 있습니다.

...
"scripts": {
  "eslint:run": "eslint --ext=.js,.jsx,.ts,.tsx --quiet .",
}

이제 eslint 규칙no-console을 사용하여 모든 콘솔 로그를 강제로 제거하려고 한다고 가정해 보겠습니다.
.eslintrc.js 파일에서 규칙을 경고로 설정합니다.

// .eslintrc.js
module.exports = {
  ...
  rules: {
    'no-console': 'warn',
  ...

이제 npm run eslint:run를 실행하면 많은 경고가 표시되지만 확인을 통과합니다.
다음으로 lint-staged 에서만 사용할 새 eslintrc 파일을 만들어야 합니다. eslintrc-staged.js 이름을 지정해 보겠습니다.
여기에서 기본 eslint 구성을 확장하고 규칙을 오류로 재정의해야 합니다.

// .eslintrc-staged.js
module.exports = {
  extends: './.eslintrc.js',
  rules: {
    'no-console': 'error',
  }
};

eslint를 실행할 때 다른 구성 파일을 사용하도록 lint-staged에 지시하려면 .lintstagedrc.js에서 마지막 변경을 수행해야 합니다.

module.exports = {
  '*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint -c eslintrc-staged.js --no-eslintrc --quiet --fix'],
  '*.css': 'stylelint --fix',
  '*.md': 'prettier --write'
};

이제 프로젝트를 변경할 때 eslint는 커밋 전에 변경된 파일에만 오류를 발생시킵니다.