ESlint Nibble을 사용하여 깔끔한 방식으로 많은 ESlint 오류를 점진적으로 수정

우리 팀이 성장함에 따라 코드베이스를 오류 가능성이 적고 더 일관성기능적 및 미학적 규칙이 필요합니다. >. 다행히 백엔드와 프런트엔드 모두 JavaScript(동일한 버전의 TypeScript 사용)를 사용하므로 이러한 변경 사항은 전체 팀의 일상 업무에 큰 영향을 미칩니다.

우리는 일반적으로 스스로 선택한 작업을 수행할 수 있는 '기술의 날'(2주에 한 번씩 월요일)에 이러한 개선 작업을 수행합니다. 유지 관리 및 검토가 어려운

오래 지속되는 분기를 피하기 위해 이를 점진적으로 수행하려고 합니다.

최근에 우리는 수십 개의 ESlint 규칙이 포함된 Unicorn 플러그인을 추가하기로 결정했습니다. 수백 개의 오류가 발생하기 때문에 처음에는 부담스러울 수 있습니다. 다행히도 우리는 그래픽 인터페이스를 사용하여 규칙을 하나씩 추가하는 데 도움이 되는 명령줄 도구인 eslint-nibble을 발견했습니다.

사용방법

첫 번째 단계는 적용하려는 새 플러그인을 설치하는 것입니다. 그런 다음 규칙을 하나씩 활성화하는 대신 이제 .eslintrc.js에서 모든 규칙을 활성화할 수 있습니다. 마지막으로, eslint를 사용하여 모든 것을 한꺼번에 Lint하는 대신 다음과 같이 eslint-nibble을 사용할 수 있습니다.

npx eslint-nibble --fixable-only --no-warnings --cache "./src/**/*.{ts,js,vue}"

--fixable-only 규칙을 사용하면 처음에는 프로세스 속도가 빨라집니다
CI가 경고에 실패하도록 만들지 않으므로 문제를 해결하기 위해 --no-warnings를 사용합니다
--cache 옵션은 ESlint 옵션과 유사하며 반복 프로세스를 훨씬 빠르게 만듭니다

그러면 실패한 모든 규칙과 각 규칙의 오류 수를 보여주는 멋진 그래픽이 나타납니다.

인터페이스를 통해 규칙을 선택할 때 자동으로 수정하는 것이 좋습니다(가능한 경우). 그런 다음 이상한 일이 발생할 경우를 대비해 일반적으로 커밋하기 전에 수동으로 검토합니다.

또 다른 핵심 포인트는 한 줄의 코드에 여러 규칙 오류가 있더라도 한 번에 하나의 규칙만 수정할 수 있다는 것입니다. 커밋을 원자적으로 수행하므로 예를 들어 디버그 및 검토가 쉽습니다.

커밋하기 전에 추가로 변경하는 경우(예를 들어 변경된 줄에 Prettier를 적용해야 하는 경우가 있음)

파일을 저장하거나 린트하지 마세요. 이렇게 하면 다른 모든 오류가 수정됩니다. 파일의 다른 규칙과 관련됩니다. 올바른 방법은 해당 줄에 초점을 맞추고 Quick fix를 실행한 다음 VS Code를 포맷하지 않고 수정 명령을 사용하여 필요한 문제를 수동으로 수정하는 것입니다.

이익

가장 큰 장점은 다음에 추가할 가장 간단한 규칙이 무엇인지 쉽게 확인할 수 있다는 것입니다. 이제 우리는 매일 오류가 많은 규칙 하나를 수정하거나 발생 횟수가 적은 여러 규칙을 수정하도록 선택할 수 있습니다. 이전에는 규칙의 영향을 미리 알지 못한 채 맹목적으로 규칙을 하나씩 활성화했습니다.

문서를 읽고 규칙 자체를 이해할 수 있는 기회이기도 하며 이 방법으로 수행하는 것이 더 나은(또는 그렇지 않은) 이유를 새로운 것을 배웁니다.

우리의 요구 사항이나 코드 스타일에 맞지 않기 때문에 규칙을 맞춤설정하거나 완전히 비활성화하기로 결정하는 경우도 있습니다. 예를 들어, 어떤 경우에는 Set을 사용하도록 강제하는 규칙을 비활성화하기로 결정했습니다. Vue 2는 Map 및 Set의 반응성을 지원하지 않기 때문에 버그가 발생하거나 개발자가 예상치 못한 방식으로 사용하도록 권장할 수 있다고 생각했습니다.

마지막으로 검토자가 한 번에 하나의 규칙에 대한 커밋을 읽는 것이 더 쉽습니다. 이 도구를 사용하면 수시로 몇 가지 ESlint 규칙을 추가할 수 있어 점진적 개선이 수월해집니다.

위 내용은 ESlint Nibble을 사용하여 깔끔한 방식으로 많은 ESlint 오류를 점진적으로 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!