ESLintrc 생성기

생성된 설정의 내용

생성기는 항상 eslint:recommended에서 시작하여 선택에 해당하는 항목만 추가합니다.

• browser 및/또는 node가 있는 env, 그리고 es2022
• TypeScript가 켜져 있으면 @typescript-eslint/parser와 plugin:@typescript-eslint/recommended
• React가 켜져 있으면 plugin:react/recommended
• warn으로 설정된 no-console과 no-unused-vars

출력은 기존 .eslintrc.json 형태의 단순한 JSON 객체로, 붙여넣고 나만의 규칙으로 확장할 수 있습니다.

플랫 설정 vs 레거시

ESLint 9는 .eslintrc.* 형식을 폐기하고 플랫 설정(eslint.config.js)을 권장합니다. 주요 차이:

새 프로젝트는 플랫 설정을 써야 합니다. 기존 프로젝트는 10.x 라인까지 레거시를 유지할 수 있지만 마이그레이션을 권장합니다.

플러그인 생태계

일반적인 React/TS 프로젝트 플러그인:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

적당히 의견이 강한 설정 하나에 여섯 개 패키지입니다. 생성기는 선택한 것만 추가하므로 설정이 참조하는 것만 설치하면 됩니다.

Prettier 공존

Prettier는 포맷을, ESLint는 포맷 이외의 정확성과 스타일을 담당합니다. 충돌을 피하려면:

1. eslint-config-prettier를 설치하고 extends/config의 마지막 항목으로 추가하세요.
2. 이것은 Prettier 출력과 충돌하는 모든 ESLint 규칙을 끕니다.
3. Prettier를 별도로 실행하세요(에디터 저장 시, pre-commit 훅, CI에서).

새 프로젝트에서는 eslint-plugin-prettier를 쓰지 마세요. ESLint 안에서 Prettier를 실행해 ESLint를 느리게 만듭니다. 두 도구를 분리하세요.

규칙 조정 팁

• 느슨하게 시작해 점점 조이세요. 에러보다 경고를 먼저 켜세요.
• 테스트용 오버라이드. 테스트 파일은 종종 no-unused-expressions 완화와 Jest 글로벌이 필요합니다.
• 스크립트용 오버라이드. 빌드 스크립트는 env: node를 전역으로 추가하지 않고도 Node 글로벌이 필요할 수 있습니다.
• 오버라이드를 문서화하세요. 모든 규칙 오버라이드에는 이유를 설명하는 주석이 필요합니다.

에디터에 맞는 설정

VS Code는 ESLint 확장이 설치·설정되어 있어야 합니다. 저장 시 자동 수정을 위해 워크스페이스 설정에 다음을 추가하세요:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}