@remember-web/eslint-config

Remember 프로젝트 ESLint 설정

설치

$3

``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/parser

Next.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'
}
}
];
``