@seulhyi/eslint-config

JavaScript / TypeScript / React 프로젝트를 위한 통합 ESLint + Prettier 설정 패키지입니다.

프로젝트마다 ESLint를 복붙할 필요 없이, 이 패키지를 설치하면 일관된 코드 스타일과 린팅 규칙을 적용할 수 있습니다.

설치

npm i -D @seulhyi/eslint-config

npm i -D eslint prettier \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-plugin-react eslint-plugin-react-hooks \
  eslint-plugin-import eslint-plugin-no-relative-import-paths \
  eslint-plugin-unused-imports prettier-plugin-tailwindcss

사용법

프로젝트 루트에 eslint.config.mjs 파일을 생성합니다.

import config from "@seulhyi/eslint-config";

export default [...config];

Prettier는 함께 포함된 prettier.config.cjs를 자동으로 인식합니다.

구성

Config 설명

@seulhyi/base JavaScript / TypeScript 공통 규칙

@seulhyi/typescript TS 네이밍 컨벤션 및 any 제한

@seulhyi/react React 및 Hooks 관련 규칙

각 설정은 다음과 같이 export됩니다.

규칙 상세

Base 규칙

• no-unused-vars 경고

• no-undef 오류

• no-console 경고

• eqeqeq, curly, no-var, object-curly-spacing

• unused-imports 자동 감지 및 제거

• import 정렬 자동화(import/order)

TypeScript 규칙

• @typescript-eslint/no-explicit-any: any 사용 경고

• @typescript-eslint/naming-convention

  • 변수: camelCase, UPPER_CASE

  • 타입: PascalCase

React 규칙

• react/react-in-jsx-scope 비활성화

• Hooks 규칙

  • rules-of-hooks: 오류

  • exhaustive-deps: 경고

Prettier 설정

prettier.config.cjs 포함:

module.exports = {
singleQuote: false,
tabWidth: 2,
semi: true,
trailingComma: "all",
printWidth: 100,
plugins: [require("prettier-plugin-tailwindcss")],
};

TailwindCSS 클래스 자동 정렬 기능이 포함됩니다.