ESLint 설정과 활용법: 기본부터 고급 기능까지

2025-07-31 | dev / tools | Tools, Eslint, Javascript, Typescript, Code-quality

프론트엔드 프로젝트의 코드 품질을 한 단계 올리는 ESLint 활용법

ESLint는 현대 JavaScript 개발에서 필수적인 도구입니다. 단순한 문법 검사를 넘어서 코드 품질을 향상시키고 팀 전체의 코딩 스타일을 일관되게 유지하는 데 큰 도움을 줍니다. 이번 글에서는 ESLint의 핵심 개념부터 실무에서 활용할 수 있는 고급 설정까지 자세히 알아보겠습니다.

🔍 ESLint의 핵심 개념

ESLint는 크게 두 가지 주요 특징을 가지고 있습니다:

플러그인 시스템

ESLint의 기능을 확장할 수 있는 플러그인 시스템입니다. 플러그인은 추가적인 규칙, 환경, 또는 구성을 제공합니다. 예를 들어, React, Vue, TypeScript 등 특정 프레임워크나 언어에 대한 플러그인이 있습니다.

규칙 설정

프로젝트의 필요에 따라 구성할 수 있는 린팅 규칙입니다. 규칙은 .eslintrc 파일에서 설정할 수 있으며, 각 규칙의 심각도를 다음 중 하나로 지정할 수 있습니다:

"error" (또는 2): 에러로 처리하여 빌드 실패
"warn" (또는 1): 경고로 처리
"off" (또는 0): 규칙 비활성화

🚀 기본 설정과 설치

ESLint 설치

# 프로젝트에 ESLint 설치
npm install --save-dev eslint

# 설정 파일 생성
npx eslint --init

참고: ESLint 9부터는 새로운 “flat config” 방식도 지원합니다. 하지만 기존 .eslintrc 방식도 여전히 널리 사용되고 있어서, 이 글에서는 더 친숙한 기존 방식을 소개합니다.

기본 설정 파일 예시

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

🔌 플러그인 사용하기

플러그인 설치 및 설정

플러그인을 사용하려면 먼저 설치한 후, .eslintrc 파일에 추가해야 합니다:

# React 플러그인 설치
npm install --save-dev eslint-plugin-react

{
  "plugins": ["react"],
  "extends": ["plugin:react/recommended"],
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react/prop-types": "warn"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

플러그인의 확장 가능성

플러그인은 다른 플러그인을 기반으로 확장될 수 있습니다. 예를 들어, React에서 Next.js로 확장하는 경우:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "next/core-web-vitals"
  ]
}

이렇게 계층적으로 설정을 확장함으로써 더 구체적이고 특화된 린팅 규칙을 적용할 수 있습니다.

⭐ 인기 있는 ESLint 설정: Airbnb

Airbnb의 JavaScript 스타일 가이드를 ESLint 규칙으로 구현한 eslint-config-airbnb는 업계에서 가장 널리 사용되는 설정 중 하나입니다.

Airbnb 설정 설치

# peer dependencies 자동 설치
npx install-peerdeps --dev eslint-config-airbnb

# 또는 수동 설치
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Airbnb 설정 사용

{
  "extends": ["airbnb"],
  "rules": {
    // 프로젝트에 맞게 특정 규칙 오버라이드
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "import/prefer-default-export": "off"
  }
}

Airbnb 설정의 장점

업계 표준: 많은 회사와 개발자들이 사용하는 검증된 스타일 가이드
포괄적: JavaScript, React, JSX, 접근성 등 다양한 영역을 커버
엄격함: 코드 품질을 높이는 엄격한 규칙들
문서화: 각 규칙에 대한 자세한 설명과 예시 제공

🔧 규칙 충돌 해결

여러 플러그인을 사용하다 보면 규칙이 충돌할 수 있습니다. ESLint는 다음 우선순위로 규칙을 적용합니다:

직접 설정한 규칙이 최고 우선순위: rules 섹션에서 설정한 규칙
나중에 선언된 extends가 이전 것을 덮어씀: extends 배열의 순서가 중요

충돌 해결 예시

{
  "extends": [
    "airbnb",           // 먼저 적용
    "plugin:prettier/recommended"  // 나중에 적용되어 Airbnb 규칙 일부를 덮어씀
  ],
  "rules": {
    // 최고 우선순위 - 위의 모든 설정을 덮어씀
    "indent": ["error", 4],  // Airbnb는 2칸, Prettier는 다를 수 있지만 4칸으로 강제
    "no-console": "off"      // 개발 중에는 console.log 허용
  }
}

🎯 프론트엔드 개발을 위한 추천 플러그인 조합

실무에서 검증된 효과적인 ESLint 플러그인 조합을 소개합니다:

핵심 플러그인들

# 기본 설정
npm install --save-dev eslint-config-airbnb

# TypeScript 지원
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

# 코드 포맷팅
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

# 추가 유용한 플러그인들
npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks

완성된 설정 예시

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "@typescript-eslint",
    "import",
    "prettier"
  ],
  "rules": {
    // TypeScript 관련
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn",
    
    // Import 관련
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never",
        "js": "never",
        "jsx": "never"
      }
    ],
    
    // React 관련
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".tsx", ".jsx"] }
    ],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    
    // 기타
    "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
    "prettier/prettier": "error"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    },
    "react": {
      "version": "detect"
    }
  }
}

각 플러그인의 역할

eslint-config-airbnb: 업계 표준 JavaScript/React 스타일 가이드
@typescript-eslint: TypeScript 특화 규칙 및 파서
eslint-plugin-react-hooks: React Hooks 사용 규칙
eslint-plugin-jsx-a11y: 웹 접근성 강화 규칙
eslint-plugin-import: 모듈 import/export 관련 규칙
eslint-plugin-prettier: 코드 포맷팅 통합

🛠️ 고급 설정 및 팁

환경별 설정

{
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true
  },
  "overrides": [
    {
      "files": ["**/*.test.js", "**/*.test.jsx"],
      "env": {
        "jest": true
      },
      "rules": {
        "no-console": "off"
      }
    }
  ]
}

특정 파일/폴더 제외

{
  "ignorePatterns": [
    "build/",
    "dist/",
    "*.min.js",
    "node_modules/"
  ]
}

인라인 주석으로 규칙 제어

/* eslint-disable no-console */
console.log('이 줄은 eslint 검사 제외');

// eslint-disable-next-line no-unused-vars
const unusedVariable = 'temporary';

/* eslint-enable no-console */

VS Code 통합

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "eslint.workingDirectories": ["./"]
}

📝 스크립트 설정

package.json에 유용한 스크립트를 추가할 수 있습니다:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "lint:check": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 0"
  }
}

🚀 성능 최적화

캐시 활용

# 캐시를 사용하여 린팅 속도 향상
npx eslint --cache --cache-location .eslintcache .

병렬 처리

큰 프로젝트에서는 병렬 처리를 위한 도구를 사용할 수 있습니다:

npm install --save-dev eslint-parallel

📊 팀 협업을 위한 설정

프리커밋 훅 설정

npm install --save-dev husky lint-staged

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}

마무리

ESLint는 처음 설정할 때 복잡해 보일 수 있지만, 한 번 제대로 설정해 놓으면 코드 품질 관리에 많은 도움이 됩니다. 이 글에서 소개한 내용들을 참고하여 프로젝트에 맞는 ESLint 설정을 찾아보세요.

중요한 것은 팀 전체가 비슷한 규칙을 사용하는 것입니다. 규칙이 너무 엄격하면 개발이 불편할 수 있고, 너무 느슨하면 코드 품질에 도움이 안 될 수 있으니, 팀 상황에 맞게 조정해가며 사용하시면 될 것 같습니다.

ESLint 설정과 활용법: 기본부터 고급 기능까지

🔍 ESLint의 핵심 개념

플러그인 시스템

규칙 설정

🚀 기본 설정과 설치

ESLint 설치

기본 설정 파일 예시

🔌 플러그인 사용하기

플러그인 설치 및 설정

플러그인의 확장 가능성

⭐ 인기 있는 ESLint 설정: Airbnb

Airbnb 설정 설치

Airbnb 설정 사용

Airbnb 설정의 장점

🔧 규칙 충돌 해결

충돌 해결 예시

🎯 프론트엔드 개발을 위한 추천 플러그인 조합

핵심 플러그인들

완성된 설정 예시

각 플러그인의 역할

🛠️ 고급 설정 및 팁

환경별 설정

특정 파일/폴더 제외

인라인 주석으로 규칙 제어

VS Code 통합

📝 스크립트 설정

🚀 성능 최적화

캐시 활용

병렬 처리

📊 팀 협업을 위한 설정

프리커밋 훅 설정

마무리

SmPark's Blog

오류

🔍 ESLint의 핵심 개념

플러그인 시스템

규칙 설정

🚀 기본 설정과 설치

ESLint 설치

기본 설정 파일 예시

🔌 플러그인 사용하기

플러그인 설치 및 설정

플러그인의 확장 가능성

⭐ 인기 있는 ESLint 설정: Airbnb

Airbnb 설정 설치

Airbnb 설정 사용

Airbnb 설정의 장점

🔧 규칙 충돌 해결

충돌 해결 예시

🎯 프론트엔드 개발을 위한 추천 플러그인 조합

핵심 플러그인들

완성된 설정 예시

각 플러그인의 역할

🛠️ 고급 설정 및 팁

환경별 설정

특정 파일/폴더 제외

인라인 주석으로 규칙 제어

VS Code 통합

📝 스크립트 설정

🚀 성능 최적화

캐시 활용

병렬 처리

📊 팀 협업을 위한 설정

프리커밋 훅 설정

마무리

Templates (for web app):

오류