ESLint 설정 파일 가이드

eslint.config.ts(file:///c:/vinci/aboutw3/eslint.config.ts) 파일은 자바스크립트/타입스크립트 프로젝트를 위한

ESLint 설정 파일이며, TypeScript로 작성되어 있습니다.

이 파일은 개발팀 전체에 걸쳐 일관된 코딩 표준을 유지하기 위한 코드 품질 및 스타일 규칙을 정의합니다. 

 

주요 기능

- 다중 언어 지원: `.js`, `.jsx`, `.ts`, `.tsx` 파일을 처리합니다

- 타입스크립트 통합: 타입 인식 린팅을 위한 TypeScript ESLint 파서 사용

- 리액트 특화 규칙: 리액트 플러그인 구성 포함

- 코드 포맷팅: Prettier와 통합하여 자동 포맷팅 제공

- 임포트 정렬: 임포트 문장을 자동으로 정리합니다

 

설정 구조

1. 기본 설정

{
  files: ["**/*.{js,jsx,ts,tsx}"],
  languageOptions: {
    parser: tseslint.parser,           // 타입스크립트 파서
    globals: globals.browser,          // 브라우저 전역 변수
  }
}

`

2. 핵심 플러그인

- `eslint-plugin-prettier`: 코드 포맷팅 규칙

- `eslint-plugin-react`: 리액트 전용 린팅

- `eslint-plugin-react-hooks`: 리액트 훅 모범 사례

- `eslint-plugin-simple-import-sort`: 임포트 정렬

- `typescript-eslint`: 타입스크립트 지원 ###

 

3. 적용된 중요한 규칙들

- **사용하지 않는 변수 없음**: 타입스크립트 전용 처리를 포함한 엄격한 검사

- **일관된 임포트 정렬**: 종속성 유형별로 정렬

- **리액트 훅 유효성 검사**: 올바른 훅 사용과 의존성 보장

- **타입 안전성**: 필요 시 명시적 `any` 타입 허용

 

개발자용 사용 가이드

시작하기

1. 이 설정은 ESLint 명령어 실행 시 자동으로 작동합니다

2. 대부분의 규칙은 실시간 피드백을 위해 IDE와 통합됩니다

 

 일반적인 명령어

# 모든 파일의 린팅 오류 확인
npx eslint .

# 자동 수정 가능한 문제 해결
npx eslint . --fix

# 특정 파일 확인
npx eslint src/your-file.tsx

 

 

규칙 커스터마이징

규칙을 수정해야 한다면:

1. `rules` 섹션에서 규칙 이름 찾기

2. 값 변경: `"off"` (비활성화), `"warn"` (경고), 또는 `"error"` (강제 적용)

rules: {
  // 기존 규칙들...
  "new-rule-name": "warn",  // 여기에 새 규칙 추가
}

 

 

 

유지 관리 팁

- 초보자를 위한 팁: 현재 구성으로 시작하세요; 산업 표준 모범 사례를 따릅니다

- 고급 사용자: 팀 선호도에 따라 `rules` 섹션의 규칙 수정 가능

- 예외 추가: // eslint-disable-next-line rule-name` 인라인 주석을 절제하여 사용하세요

- 성능: ignores 배열은 dist 같은 빌드 폴더의 린팅을 방지합니다

 

이 설정은 현대적인 리액트 및 타입스크립트 개발 워크플로우를 지원하면서도 일관된 코드 품질을 보장합니다.