기존 반응 프로젝트에 ESLint 추가

기존 프로젝트에 ESLint를 추가하는 것은 복잡하고 git 히스토리와 개발자에게 방해가 됩니다. 가능한 한 중단을 최소화해야 하므로 점진적 접근 방식을 따르는 것이 좋습니다. 사용할 ESLint 구성에 관계없이 접근 방식을 배치할 것입니다.

전제 조건

package.json 및 ESLint 구성

git 사전 커밋 후크 또는 허스키

ESLint 구성 결정

구성과 빨간색/노란색 밑줄이 보이도록 편집기를 준비합니다. 또한 콘솔에서 lint를 실행하고 결과를 팀과 공유하십시오. 그런 다음 팀과 논의하고 비활성화, 추가 또는 경고로 변환해야 하는 규칙을 나열합니다.

"rules": {
    "no-unused-vars": "warn",
    "react/jsx-indent": "off",
  }

경고를 무시하도록 배포 워크플로 구성을 편집해야 합니다.

전략

Disable ESLint for all files at the top

Disable ESLint using the env variable

Fix the most and disable the rest

Convert all errors to warnings

👉🏽 상단의 모든 파일에 대해 ESLint 비활성화

이 경우 sed를 사용하여 모든 파일의 맨 위에 모든 주석을 달았습니다.

find . -name "*.js" -exec sed -i '' '1i\
/* eslint-disable */
' {} + 

이것이 구현되면 풀 요청을 제출할 때 개발자가 댓글을 제거했는지 확인하십시오. 이렇게 하면 앱이 문제 없이 컴파일되고 git 변경이 최소화됩니다.

👉🏽 env 변수를 사용하여 ESLint 비활성화

이 경우 특정 기간 동안 ESLint를 비활성화하지만 pre-commit 후크에서 여전히 linting을 활성화합니다.

ESLint를 비활성화하려면

CRA를 사용하는 경우

.env 파일에서

DISABLE_ESLINT_PLUGIN=true

제거된 CRA 또는 webpack을 사용하는 다른 사용자의 경우

webpack 구성에서 규칙 내부에 ESLint 규칙이 적용되는 부분을 주석 처리하거나 env 검사를 추가할 수 있습니다.

webpack의 ESLint 확인자는 아래 코드와 같습니다.

const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';

!disableESLintPlugin &&
        new ESLintPlugin({
          // Plugin options
          // ....
        }

👉🏽 대부분 수정하고 나머지는 비활성화

현재 동일한 기능을 개발하는 많은 개발자가 있는 대규모 코드 기반에서는 이 방법을 권장하지 않습니다. 완전히 새로운 git 저장소에서 코드 기반의 완전한 리팩터링을 수행하는 경우에 적합합니다.

먼저 스타일 포맷터(즉, prettify와 같은)를 사용하는 경우 먼저 실행하십시오. 더 예쁜 CLI가 있는 경우 직접 실행할 수 있습니다.

prettier --write

또는 package.json에서 구성할 수 있습니다.

"scripts": {
    "format": "prettier --write \"**/*.{js,jsx,json,md}\""
}

그런 다음 ESLint 수정 명령을 진행하십시오.

"scripts": {
    "lint:fix": "eslint --fix src/**/*.{js,jsx}"
}

그런 다음 여전히 많은 오류로 끝날 수 있습니다.

자동 서프레서 사용

https://github.com/amanda-mitchell/suppress-eslint-errors

이 도구는 모든 오류를 한 줄씩 비활성화합니다.

// eslint-disable-line
모든 단일 오류에 대해. 이는 많은 변경 사항일 수 있지만 비활성화할 규칙을 선택할 수 있습니다. suppress-eslint-errors 프로젝트는 작고 이해하기 쉬운 코드이므로 목적에 맞게 복제하고 수정할 수 있습니다.

👉🏽 모든 오류를 경고로 변환

https://github.com/bfanger/eslint-plugin-only-warn

eslint-plugin-only-warn 설치

$ npm install eslint-plugin-only-warn --save-dev

.eslintrc 구성 파일의 플러그인 섹션에 only-warn을 추가합니다.

{
  "plugins": ["only-warn"]
}

이 ESLint 플러그인은 모든 오류를 경고로 변환합니다. 모든 경고를 천천히 제거할 수 있습니다. 그러나 경고를 제거하려면 커밋 전 후크에 조건을 추가해야 합니다.

"scripts": {
  "lint": "eslint src/**/*.{js,jsx} --max-warnings=0",
},

결론

전략 중 하나 또는 조합을 선택할 수 있습니다. 가장 좋은 전략은 프로젝트 자체의 시작 부분에 ESLint 구성을 추가하는 것입니다.

어떤 전략을 선택하든 Husky과 같은 사전 커밋 솔루션이 있고 CI 파이프라인에서도 Lint 검사가 있습니다.