eslint config for remember web
npm install @remember-web/eslint-configRemember 프로젝트 ESLint 설정
bash
yarn add -D @remember-web/eslint-config
`$3
Yarn PnP(Plug'n'Play)를 사용하는 프로젝트에서는 TypeScript ESLint 의존성을 추가로 설치해야 합니다:`bash
Yarn PnP 프로젝트에서 필수 추가 설치
yarn add -D typescript-eslint @typescript-eslint/types @typescript-eslint/type-utils
`Yarn PnP 프로젝트 확인 방법:
- 프로젝트 루트에
.pnp.cjs 파일이 있으면 Yarn PnP 사용 중
- yarn --version이 4.x 이상이고 .yarnrc.yml에서 nodeLinker: pnp 설정이 있으면 PnP 사용 중마이그레이션 가이드
$3
먼저 프로젝트의 현재 ESLint 설정을 확인하세요:
`bash
현재 사용 중인 ESLint 버전 확인
yarn list eslint현재 설정 파일 확인
ls -la | grep eslint
.eslintrc.js, .eslintrc.json, .eslintignore 등이 있는지 확인
`$3
현재 설치된 ESLint 관련 패키지들을 제거하세요:
`bash
기존 ESLint config들 제거
yarn remove eslint-config-airbnb
yarn remove eslint-config-airbnb-typescript
yarn remove eslint-config-react-app
yarn remove eslint-config-prettier기존 ESLint 플러그인들 제거
yarn remove eslint-plugin-react
yarn remove eslint-plugin-react-hooks
yarn remove eslint-plugin-import
yarn remove eslint-plugin-jsx-a11y
yarn remove @typescript-eslint/eslint-plugin
yarn remove @typescript-eslint/parserNext.js 관련 (사용하는 경우만)
yarn remove @next/eslint-config-next
yarn remove eslint-config-next
`$3
`bash
ESLint 9.3+ 설치
yarn add -D eslint새로운 config 설치
yarn add -D @remember-web/eslint-config
`$3
`bash
기존 설정 파일들 삭제
rm .eslintrc.js
rm .eslintrc.json
rm .eslintignore또는 한번에
rm .eslintrc.* .eslintignore
`$3
프로젝트 루트에
eslint.config.mjs 파일을 생성하세요:#### React + TypeScript 프로젝트
`javascript
// eslint.config.mjs
import config from '@remember-web/eslint-config';export default [
{
ignores: [
'node_modules/**',
'build/**',
'dist/**',
'public/**',
'*.min.js'
],
},
...config.configs.react,
...config.configs.typescript
];
`#### Next.js 프로젝트
`javascript
// eslint.config.mjs
import config from '@remember-web/eslint-config';export default [
{
ignores: [
'node_modules/**',
'.next/**',
'out/**',
'build/**',
'public/**'
],
},
...config.configs.react,
...config.configs.typescript,
...config.configs.next
];
`$3
`bash
설정이 제대로 적용되는지 확인
yarn eslint --version
yarn eslint src/ --max-warnings 0자동 수정 실행
yarn eslint src/ --fix
`$3
`json
{
"scripts": {
"lint": "eslint src/",
"lint:fix": "eslint src/ --fix"
}
}
`마이그레이션 전후 비교
$3
`javascript
module.exports = {
extends: [
'airbnb-typescript',
'airbnb/hooks',
'plugin:@typescript-eslint/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'prettier'
],
plugins: ['react', '@typescript-eslint', 'import'],
rules: {
// 많은 커스텀 규칙들...
},
parserOptions: {
project: './tsconfig.json'
}
};
`$3
`javascript
import config from '@remember-web/eslint-config';export default [
{
ignores: ['node_modules/', 'build/', 'dist/**'],
},
...config.configs.react,
...config.configs.typescript
];
`자주 발생하는 문제
$3
`bash
Node.js 버전이 18+ 인지 확인
node --version캐시 삭제 후 재설치
rm -rf node_modules yarn.lock
yarn install
`$3
`javascript
// eslint.config.mjs에 TypeScript parser 설정 확인
export default [
// ... 기존 설정
{
files: ['*/.{ts,tsx}'],
languageOptions: {
parserOptions: {
project: './tsconfig.json'
}
}
}
];
`$3
`javascript
// eslint.config.mjs
import config from '@remember-web/eslint-config';export default [
...config.configs.react,
...config.configs.typescript,
// 프로젝트별 커스텀 규칙
{
files: ['src/*/.{js,jsx,ts,tsx}'],
rules: {
'no-console': 'warn',
'prefer-const': 'error',
// 기존에 사용하던 규칙들 추가
}
}
];
`설정 옵션
$3
| 설정 | 설명 | 사용 시점 |
|------|------|-----------|
|
react | React 관련 규칙 | React 프로젝트 필수 |
| typescript | TypeScript 규칙 | TypeScript 사용시 필수 |
| next | Next.js 규칙 | Next.js 프로젝트 |
| fsd | FSD 아키텍처 강제 | FSD 패턴 사용시 |
| reactCompiler | React Compiler 최적화 | React 19+ |$3
`javascript
// 모든 기능 사용
import config from '@remember-web/eslint-config';export default [
{
ignores: ['node_modules/', 'build/'],
},
...config.configs.react,
...config.configs.typescript,
...config.configs.next,
...config.configs.fsd,
...config.configs.reactCompiler,
// 테스트 파일별 규칙
{
files: ['*/.test.{js,jsx,ts,tsx}'],
rules: {
'@typescript-eslint/no-explicit-any': 'off'
}
}
];
``