🎰 커스텀 ESLint 만들기

팀에서 사용할 ESLint 만들기

팀 프로젝트에서 사용할 ESLint 설정을 만들고 배포하는 과정을 다루며, 이를 통해 코드 품질을 향상시키고 개발 효율성을 높이는 방법을 제시합니다.

ESLint란?

정의

ESLint는 자바스크립트와 타입스크립트 코드의 품질을 유지하기 위한 정적 분석 도구입니다. 소스 코드를 실행하지 않고 코드의 문법과 논리적 오류, 스타일 문제 등을 분석하여 결함을 사전에 발견할 수 있습니다.

주요 기능

• 문법 검사: 코드의 문법 오류를 자동으로 감지
• 스타일 가이드 준수: 팀에서 정한 코드 스타일 규칙을 적용
• 플러그인 지원: 다양한 플러그인을 통해 기능 확장
• 자동 수정: 일부 오류와 스타일 문제를 자동으로 수정

ESLint의 필요성

코드 품질 향상

ESLint는 코드의 일관성을 유지하고 잠재적인 버그를 사전에 발견하여 코드 품질을 높입니다.

팀 간 협업 강화

팀원 간의 코드 스타일과 규칙이 일관되면 협업이 원활해집니다. ESLint는 팀 전체가 동일한 규칙을 따르도록 강제하여 코드베이스의 일관성을 유지합니다.

자동화된 개발 워크플로우

ESLint는 CI/CD 파이프라인에 통합하여 코드가 병합되기 전에 자동으로 검사할 수 있습니다. 이를 통해 오류가 포함된 코드가 메인 브랜치에 합쳐지는 것을 방지할 수 있습니다.

ESLint 설정 파일 이해하기

기본 구조

ESLint 설정 파일은 JSON 또는 JavaScript 형식으로 작성할 수 있으며, 일반적으로 프로젝트 루트 디렉토리에 .eslintrc.json 또는 .eslintrc.js 파일로 위치합니다. 기본 구조는 다음과 같습니다:

{
  "env": {
    "browser": true,
    "es2021": true},
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

주요 옵션

• env: 코드가 실행될 환경을 지정 (예: 브라우저, Node.js)
• extends: 기존의 ESLint 설정을 확장 (예: eslint:recommended)
• parserOptions: ECMAScript 버전과 모듈 시스템 등을 설정
• rules: 적용할 개별 규칙과 그 강도를 정의

root 옵션

모노레포와 같은 다중 프로젝트 환경에서 ESLint 설정 파일의 상속 관계를 관리하기 위해 root 옵션을 사용합니다.

• root: true: 이 설정 파일을 최상위로 간주하고 상위 디렉토리의 설정을 무시
• root: false: 상위 디렉토리의 설정을 상속받음

예시: 프로젝트 최상위 디렉토리의 .eslintrc.json:

{
  "root": true,
  "extends": ["eslint:recommended"],
  "rules": { /* 공통 규칙 */ }
}

나만의 린트 만들어보기

https://www.npmjs.com/package/eslint-plugin-jsk-rules

https://github.com/jsk3342/eslint-plugin-jsk-rules

참고 자료

1. Prettier, ESLint 이해하고 사용하기 - velog
   Prettier와 ESLint의 기본 개념 및 설정 방법을 소개하는 글입니다.

2. PoiemaWeb - ESLint
   ESLint를 사용하여 코드 품질을 향상시키는 방법을 다룬 기술 블로그입니다.

3. 우아한형제들 기술블로그 - 우리 팀을 위한 ESLint, Prettier 공유 컨피그 만들어보기
   팀 협업을 위해 ESLint와 Prettier의 공유 설정을 만드는 과정을 설명합니다.

4. 우아한테크 - [10분 테크톡] 낙타의 ESLint
   ESLint의 개념과 활용법을 짧게 다룬 우아한테크 영상입니다.

5. Kakao Tech - ESLint 조금 더 잘 활용하기
   Kakao Tech 블로그에서 ESLint를 효과적으로 활용하는 방법을 소개합니다.

6. Medium - ESLint 알고 사용하기
   ESLint의 설정과 활용법을 다룬 Medium의 기술 포스트입니다.

7. 나만의 ESLint 룰 만들어보기 - yceffort
   ESLint 룰을 커스터마이징하여 자신만의 규칙을 만드는 방법을 설명합니다.

8. 정현수 기술 블로그 - ESLint 설정을 나만의 라이브러리로 만들어보자
   ESLint 설정을 공유 가능한 라이브러리로 제작하고 모노레포에서 활용하는 방법을 다룹니다.

9. ESLint 공식 문서 - Shareable Configurations
   ESLint의 공유 가능한 설정을 만드는 방법에 대한 공식 문서입니다.