Eslint

2013년 Nicholas C. Zakas가 만든 JavaScript 코드 분석 도구로, 코드의 품질을 향상시키고 잠재적인 문제를 미리 발견하는 것이 주요 목적이다.
정적 코드 분석을 통해 문법 오류부터 코딩 스타일까지 다양한 측면을 검사할 수 있다.

2023년 11월 3일 금요일에 릴리즈된 ESLint 8.53.0 버전에서 포맷팅 규칙이 공식적으로 폐기됨. 포맷팅 규칙은 띄어쓰기, 세미콜론, 문자열 형식 등을 아우르는 코드 컨벤션을 강화시켜 주는 규칙을 의미한다.

주요 특징

  1. 규칙 시스템
    ESLint는 매우 유연한 규칙 시스템을 가지고 있다. 각 규칙은 세 가지 수준으로 설정할 수 있다:

    • “error”: 규칙 위반 시 오류로 처리
    • “warn”: 규칙 위반 시 경고로 처리
    • “off”: 규칙 비활성화

  2. 플러그인 시스템
    ESLint는 플러그인을 통해 기능을 확장할 수 있다. 대표적인 플러그인들은 다음과 같다:

    • eslint-plugin-react: React 관련 규칙
    • @typescript-eslint/eslint-plugin: TypeScript 관련 규칙
    • eslint-plugin-import: import/export 문법 검사
    • eslint-plugin-prettier: Prettier와의 통합

  3. 설정 상속 시스템
    여러 설정을 상속하고 조합할 수 있다:

    • eslint:recommended: ESLint 추천 규칙
    • airbnb: Airbnb의 JavaScript 스타일 가이드
    • google: Google의 JavaScript 스타일 가이드
    • standard: JavaScript Standard Style

  4. 자동 수정 기능
    많은 규칙들은 자동 수정 기능을 제공한다:

    • 들여쓰기 수정
    • 세미콜론 추가/제거
    • 따옴표 스타일 변경
    • 불필요한 공백 제거

  5. IDE 통합
    대부분의 주요 IDE와 통합되어 실시간으로 문제를 표시할 수 있다:

    • Visual Studio Code
    • WebStorm
    • Sublime Text
    • Atom

설정하는 단계별 과정

  1. 설치:

    1

    npm install eslint --save-dev

  2. 초기 설정:

    1

    npx eslint --init

  3. 추가 플러그인 설치 (필요한 경우):

    1

    npm install eslint-plugin-react @typescript-eslint/eslint-plugin --save-dev

효과적으로 사용하기 위한 팁들

  1. 프로젝트의 성격에 맞는 규칙 설정하기

    • 팀의 코딩 스타일과 일치하는 규칙 선택
    • 불필요한 규칙은 과감히 비활성화
    • 점진적으로 규칙 추가하기

  2. Git Hooks 활용

    • husky와 lint-staged를 사용하여 커밋 전 자동 검사
    • CI/CD 파이프라인에 통합

  3. VSCode 설정 최적화

    1
2
3
4
5

    {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

설정 예시

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

// .eslintrc.json 기본 설정 예시
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    // 오류 방지 규칙
    "no-console": "warn",
    "no-unused-vars": "error",
    "no-undef": "error",
    
    // 코드 스타일 규칙
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    
    // React 관련 규칙
    "react/prop-types": "error",
    "react/jsx-uses-react": "error",
    
    // TypeScript 관련 규칙
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-explicit-any": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  // 특정 파일/디렉토리 무시
  "ignorePatterns": ["dist/*", "node_modules/*"]
}

// package.json 스크립트 예시
{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
  }
}

참고 및 출처

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter