@taejun.goo/eslint-config-radpub

퍼블리싱 팀을 위한 공용 ESLint 설정 패키지

📦 지원 버전

• ESLint 9 (권장) - Flat Config 형식
• ESLint 8 (Legacy) - 전통적인 .eslintrc 형식

🚀 빠른 시작 (ESLint 9)

최신 프로젝트 (Next.js 15+, Vite 등)

1️⃣ 설치

React(Vite) 및 Next.js 프로젝트

npm install -D @taejun.goo/eslint-config-radpub

참고: @taejun.goo/eslint-config-radpub을 설치하면 필요한 모든 플러그인이 자동으로 함께 설치됩니다.

2️⃣ 설정 파일 생성

Next.js 프로젝트

⚠️ 중요: radpub({ tool: 'next' })는 반드시 Next.js 설정(nextVitals, nextTs) 뒤에 추가해야 합니다.

기존 eslint.config.mjs 파일의 설정 배열 마지막에 radpub을 추가합니다.

// eslint.config.mjs
import radpub from "@taejun.goo/eslint-config-radpub";

const eslintConfig = [
  // ...기존 설정들
  ...nextVitals,
  ...nextTs,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
  // radpub 설정 추가 (반드시 마지막에!)
  ...radpub({ tool: 'next' }),
];

export default eslintConfig;

React(Vite) 프로젝트

// eslint.config.mjs
import radpub from "@taejun.goo/eslint-config-radpub";

export default defineConfig([
  // ...기존 설정들
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
  // radpub 설정 추가
  ...radpub(),
]);

3️⃣ 완료!

이제 프로젝트에서 ESLint를 실행하면 보안, 접근성, 컴포넌트 품질 규칙이 자동으로 적용됩니다.

Next.js 14 이하 또는 ESLint 8을 사용하는 프로젝트

1️⃣ 설치

React (Vite) 및 Next.js 프로젝트

npm install -D @taejun.goo/eslint-config-radpub @typescript-eslint/parser @typescript-eslint/eslint-plugin

참고: @taejun.goo/eslint-config-radpub을 설치하면 필요한 모든 플러그인(@stylistic/eslint-plugin, eslint-plugin-react, eslint-plugin-jsx-a11y, eslint-plugin-import)이 자동으로 함께 설치됩니다.

2️⃣ 설정 파일 생성

Next.js 프로젝트

⚠️ 중요: @taejun.goo/eslint-config-radpub/legacy/next는 반드시 Next.js 설정(next/core-web-vitals, next/typescript) 뒤에 추가해야 합니다.

.eslintrc.json:

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript",
    "@taejun.goo/eslint-config-radpub/legacy/next"
  ]
}

React(Vite) 프로젝트

.eslintrc.json:

{
  "extends": ["@taejun.goo/eslint-config-radpub/legacy"]
}

개별 모듈 사용

module.exports = {
  extends: [
    '@taejun.goo/eslint-config-radpub/legacy/base',
    '@taejun.goo/eslint-config-radpub/legacy/security',
    '@taejun.goo/eslint-config-radpub/legacy/stylistic',
    // 필요한 것만 선택
  ]
}

3️⃣ 완료!

이제 프로젝트에서 ESLint를 실행하면 보안, 접근성, 컴포넌트 품질 규칙이 자동으로 적용됩니다.

🛠 VS Code 자동 수정 설정 (권장)

[저장 시 자동으로 코드를 교정하려면 프로젝트 루트에 .vscode/settings.json 파일을 생성하고 아래 설정을 추가하세요.

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

각 설정의 의미

• editor.codeActionsOnSave: 파일 저장 시 실행할 코드 액션을 지정합니다.
  • "source.fixAll.eslint": "explicit": ESLint가 자동으로 수정 가능한 모든 문제를 저장 시 자동으로 고칩니다.
• editor.formatOnSave
  • false: Prettier 등 다른 포맷터가 저장 시 자동으로 실행되는 것을 방지합니다. (ESLint가 스타일까지 관리하므로 충돌 방지)
• eslint.validate
  • ["javascript","javascriptreact",typescript","typescriptreact"] ESLint가 검사할 파일 유형을 지정합니다. (js, jsx, ts, tsx)

특징

• ✅ 보안 - XSS 방지, 코드 인젝션 방지
• ✅ 접근성 (a11y) - ARIA, 키보드 탐색, 시맨틱 HTML
• ✅ 코드 스타일 - 일관된 들여쓰기, 따옴표, 세미콜론
• ✅ 컴포넌트 품질 - key prop, self-closing, 중첩 컴포넌트 방지
• ✅ Import 최적화 - 자동 정렬, 중복/순환 참조 방지

왜 React/Next.js 기본 규칙이 없나요?

Next.js는 이미 자체 ESLint 설정(eslint-config-next)을 제공하며, React 및 TypeScript 규칙도 포함되어 있습니다. @taejun.goo/eslint-config-radpub은 프레임워크 규칙과 독립적으로 작동하는 코어 규칙만 제공하여 플러그인 충돌을 방지합니다.

radpub(options?)

ESLint 설정을 생성하는 팩토리 함수입니다.

Options:

| 옵션 | 타입 | 기본값 | 설명 | |------|------|--------|------| | tool | 'next' | 'react' | 'react' | 프로젝트 타입. 'next'는 Next.js용, 'react'는 React (Vite/CRA 등)용 | | typescript | boolean | true | TypeScript 규칙 포함 여부. tool: 'react'일 때만 적용 |

Returns: Array<ESLintConfig>

예제

// Next.js + TypeScript
...radpub({ tool: 'next' });

// React + TypeScript
...radpub({ tool: 'react' });

// React + JavaScript (TypeScript 규칙 제외)
...radpub({ tool: 'react', typescript: false });

필요한 규칙만 선택적으로 import하여 사용할 수 있습니다:

import { base, typescript, security, accessibility } from "@taejun.goo/eslint-config-radpub";

export default [
  ...base,
  ...typescript,
  ...security,
  ...accessibility,
];

사용 가능한 모듈

| 모듈 | 설명 | |------|------| | base | JavaScript/TypeScript 기본 규칙 | | typescript | TypeScript 엄격성 규칙 | | security | 보안 규칙 (eval, XSS 방지 등) | | reactSecurity | React 보안 및 컴포넌트 품질 규칙 | | accessibility | 웹 접근성 규칙 (jsx-a11y) | | stylistic | 코드 스타일 규칙 | | imports | Import 정렬 및 최적화 |

규칙 오버라이드

import radpub from "@taejun.goo/eslint-config-radpub";

export default [
  ...radpub({ tool: 'next' }),
  {
    rules: {
      // 프로젝트별 규칙 오버라이드
      "no-console": "off",
      "jsx-a11y/alt-text": "error", // warn → error로 강화
    },
  },
];

ignores 패턴 추가

import radpub from "@taejun.goo/eslint-config-radpub";

export default [
  ...radpub({ tool: 'next' }),
  {
    ignores: ["**/custom-ignore/**", "dist/"],
  },
];

🔒 보안

• no-console: console.log 경고 (보안을 위해 warn)
• no-debugger: debugger 구문 금지
• no-alert: alert/confirm/prompt 경고 (보안 및 UX를 위해 warn)
• no-eval: eval() 사용 금지
• react/no-danger: dangerouslySetInnerHTML 사용 경고

♿ 접근성 (a11y)

• 이미지 alt 텍스트 필수
• ARIA 속성 검증
• 키보드 탐색 지원
• 시맨틱 HTML 강제
• 비인터랙티브 요소에 이벤트 핸들러 금지

🎨 컴포넌트 품질

• 배열 렌더링 시 key prop 필수 (Next.js/React 일관성 위해 error)
• 배열 인덱스를 key로 사용 금지 (warn)
• 자식이 없는 컴포넌트는 self-closing 태그 사용 (warn)
• Boolean props 명시적 작성 (warn)
• 컴포넌트 내부에 컴포넌트 정의 금지 (성능 error)

📐 코드 스타일

• 들여쓰기: 스페이스 2칸
• 따옴표: 작은따옴표 사용
• 세미콜론: 필수
• Trailing comma: 멀티라인에서 필수
• 파일 끝 빈 줄: 필수
• 콜백 함수: 화살표 함수 권장

📦 Import 정렬 (tool: 'react'일 때)

자동으로 import를 다음 순서로 정렬:

1. Node.js 내장 모듈
2. React (최우선)
3. npm 패키지
4. 내부 경로 (@/ 별칭)
5. 상대 경로

추가 최적화:

• import/no-duplicates: 동일한 모듈에서 여러 번 import 금지
• import/no-cycle: 순환 참조 방지

📘 TypeScript (tool: 'react'일 때)

• @typescript-eslint/no-explicit-any: any 타입 명시적 사용 금지 (error)
• @typescript-eslint/consistent-type-imports: 타입 import 분리 (import type { ... }) 및 인라인 타입 사용 금지
• @typescript-eslint/no-unused-vars: 미사용 변수 감지 (error, _로 시작하는 변수 제외)
• @typescript-eslint/no-non-null-assertion: non-null assertion 제한

이 패키지는 다음 플러그인들을 포함하고 있어 별도로 설치할 필요가 없습니다:

• @stylistic/eslint-plugin - 코드 스타일 규칙
• eslint-plugin-jsx-a11y - React 웹 접근성 규칙
• eslint-plugin-react - React 보안 및 컴포넌트 품질 규칙
• eslint-plugin-import - Import 정렬 및 최적화
• typescript-eslint - TypeScript 규칙

참고: ESLint 및 TypeScript의 기본 권장 설정(recommended), React Hooks 규칙, 그리고 기본적인 파일 매칭, 언어 옵션(globals), 무시 패턴(ignores)은 프레임워크(Next.js, Vite 등)에서 기본적으로 제공하거나 프로젝트별로 다르므로, 중복 방지를 위해 이 패키지에서는 제외하고 커스텀 규칙만 제공합니다.

필수 의존성:

• eslint ^9.0.0

라이센스

MIT