도구

GitLab 프론트엔드 개발에서 사용하는 ESLint와 Prettier 도구의 구성 및 사용 방법을 설명합니다.

ESLint # ESLint를 사용하여 프론트엔드 코드 표준을 캡슐화하고 적용합니다. 구성은 gitlab-eslint-config 프로젝트에서 확인할 수 있습니다. 환경 변수 REVEAL_ESLINT_TODO 를 환경(및 IDE)에서 1 로 설정하면 .eslint_todo/*.mjs 에서 제외된 보류 중인 eslint todo 항목을 확인할 수 있습니다. 이를 통해 기존의 eslint 예외 항목을 드러내어 일상 작업 중에 수정할 수 있습니다. Yarn 스크립트 # 이 섹션에서는 ESLint를 사용하여 파일을 검증하고 자동 수정을 적용하는 데 사용할 수 있는 yarn 스크립트를 설명합니다. ESLint로 스테이지된 모든 파일( git diff 기반)을 검사하려면 다음 스크립트를 실행합니다: yarn run lint:eslint:staged 발견된 문제 목록이 콘솔에 출력됩니다. ESLint 자동 수정을 스테이지된 모든 파일( git diff 기반)에 적용하려면 다음 스크립트를 실행합니다: yarn run lint:eslint:staged:fix 수동 변경이 필요한 경우 변경 사항 목록이 콘솔에 출력됩니다. 리포지터리에서 특정 파일을 ESLint로 검사하려면 다음 스크립트를 실행합니다($PATH_TO_FILE를 실제 경로로 교체): yarn run lint:eslint $PATH_TO_FILE 리포지터리의 모든 파일을 ESLint로 검사하려면 다음 스크립트를 실행합니다: yarn run lint:eslint:all 발견된 문제 목록이 콘솔에 출력됩니다. ESLint 자동 수정을 리포지터리의 모든 파일에 적용하려면 다음 스크립트를 실행합니다: yarn run lint:eslint:all:fix 수동 변경이 필요한 경우 변경 사항 목록이 콘솔에 출력됩니다. 전역 규칙 업데이트에만 사용하세요. 그렇지 않으면 변경 사항으로 인해 대규모 머지 리퀘스트가 발생할 수 있습니다. 새 파일에서 ESLint 비활성화 # 새 파일을 생성할 때 ESLint를 비활성화하지 마세요. 기존 파일에는 레거시 호환성 이유로 기존 규칙이 비활성화되어 있을 수 있지만, 현재 리팩토링 중입니다. 특정 ESLint 규칙을 비활성화하지 마세요. 기술 부채 발생을 방지하기 위해, 기존 코드 모듈을 호출/인스턴스화하는 경우에만 다음 규칙을 비활성화할 수 있습니다. no-new class-method-use-this 이러한 규칙은 줄 단위로 비활성화하세요. 그러면 향후 리팩토링이 더 쉬워집니다. 예를 들어 eslint-disable-next-line 또는 eslint-disable-line 을 사용하세요. 단일 위반에 대해 ESLint 비활성화 # 단일 위반에 대해 규칙을 비활성화해야 하는 경우, 필요한 최소한의 코드 범위에서만 비활성화하세요: // bad /* eslint-disable no-new */ import Foo from 'foo'; new Foo(); // better import Foo from 'foo'; // eslint-disable-next-line no-new