도구

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

ESLint # GitLab은 프론트엔드 코드 표준을 정의하고 강제하기 위해 ESLint를 사용합니다. 설정은 gitlab-eslint-config 프로젝트에 있습니다. 작업 환경과 IDE에서 환경 변수 REVEAL_ESLINT_TODO 를 1 로 설정하면 .eslint_todo/*.mjs 로 제외된 미처리 eslint todo를 볼 수 있습니다. 이를 통해 기존 eslint 예외를 드러내어 평소 작업 중에 함께 수정할 수 있습니다. Yarn 스크립트 # 이 절에서는 ESLint로 파일을 검사하고 자동 수정을 적용하는 yarn 스크립트를 설명합니다. 스테이징된 모든 파일( git diff 기준)을 ESLint로 검사하려면 다음 스크립트를 실행합니다. yarn run lint:eslint:staged 발견된 문제 목록이 콘솔에 출력됩니다. 스테이징된 모든 파일( git diff 기준)에 ESLint 자동 수정을 적용하려면 다음 스크립트를 실행합니다. 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 직접 수정해야 하는 항목이 있으면 변경 목록이 콘솔로 전달됩니다. Warning 전역 규칙 갱신에만 사용합니다. 그렇지 않으면 변경 규모가 매우 큰 머지 리퀘스트가 만들어질 수 있습니다. 새 파일에서 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 new Foo (); t