ESLint Config

@pleaseai/eslint-config는 @antfu/eslint-config 위에 구축된 의견이 반영된 ESLint flat config입니다. 단일 pleaseai() 함수만으로 JS/TS/JSX/Vue/JSON/YAML/Markdown에 대한 린팅 과 포매팅을 기본 제공 — Prettier가 필요하지 않습니다.

주요 기능

• ESLint flat config 형식, 조합 가능하고 미래 지향적
• 포매팅 자동 수정 — Prettier 없이 독립적으로 사용
• TypeScript, JSX, Vue, JSON, YAML, Markdown, TOML, XML, GraphQL, Svelte, Astro, CSS 지원
• 선택적 React, Nextjs, Svelte, UnoCSS, Astro, Solid, Angular 통합
• eslint-plugin-format을 통한 CSS / HTML / Markdown의 선택적 포매터
• eslint-plugin-package-json 설정 포함
• .gitignore 패턴 자동 감지
• ESLint v9.10.0 이상 필요

설치

bun add -D @pleaseai/eslint-config eslint

pnpm add -D @pleaseai/eslint-config eslint

npm install -D @pleaseai/eslint-config eslint

사용법

프로젝트 루트에 eslint.config.ts (또는 eslint.config.mjs)를 생성하세요:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai()

이게 전부입니다. ESLint가 다음 실행 시 자동으로 인식합니다.

옵션과 함께

pleaseai()는 @antfu/eslint-config와 동일한 옵션을 받습니다:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai({
  // PleaseAI 기본값 오버라이드
  stylistic: {
    indent: 4,
  },

  // 프레임워크 지원 활성화
  vue: true,
  react: true,

  // ignore 추가
  ignores: [
    '**/fixtures',
  ],
})

프레임워크 플래그와 peer dependency 전체 목록은 프레임워크 통합에서 확인하세요.

추가 설정과 함께

추가 flat config 항목을 나머지 인자로 전달할 수 있습니다 — PleaseAI 프리셋 뒤에 병합됩니다:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai(
  {
    typescript: true,
  },
  {
    files: ['**/*.ts'],
    rules: {
      'no-console': 'warn',
    },
  },
)

규칙 오버라이드

모든 프레임워크 통합은 overrides 객체를 받기 때문에, 전체 프리셋을 교체하지 않고도 규칙을 조정할 수 있습니다:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai({
  vue: {
    overrides: {
      'vue/operator-linebreak': ['error', 'before'],
    },
  },
  typescript: {
    overrides: {
      'ts/consistent-type-definitions': ['error', 'interface'],
    },
  },
})

특정 통합에 속하지 않는 오버라이드는 추가 설정과 함께에서 보여준 것처럼 두 번째 인자로 rules 객체를 전달하세요.

NPM 스크립트

린트 명령을 package.json에 추가하세요:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

npm run lint로 검사하거나 npm run lint:fix로 자동 수정할 수 있습니다.

PleaseAI 기본값

이 설정은 @antfu/eslint-config를 다음 PleaseAI 전용 기본값으로 감쌉니다:

lessOpinionated: true + curly: ['error', 'all'] 조합이 antfu 기본값과의 핵심 차이입니다: 제어문 본문은 항상 중괄호를 사용해야 하지만, antfu의 최상위 함수 선호는 그대로 유지됩니다.

포매터

ESLint는 .css, .html, .xml, Markdown frontmatter를 기본으로 포매팅하지 못합니다. formatters 기능을 opt-in하면 eslint-plugin-format(Prettier / dprint를 감쌈)에 위 파일들을 위임하고, 나머지는 순수 ESLint에 맡길 수 있습니다:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai({
  formatters: {
    css: true,
    html: true,
    markdown: 'prettier',
  },
})

bun add -D eslint-plugin-format

pnpm add -D eslint-plugin-format

npm install -D eslint-plugin-format

타입 인지 규칙

가장 강력한 TypeScript 규칙은 타입 정보가 필요합니다. tsconfig.json을 가리켜 opt-in 하세요:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai({
  typescript: {
    tsconfigPath: 'tsconfig.json',
  },
})

자세한 내용은 고급 사용법 → 타입 인지 규칙에서 확인하세요.

다음 단계

FAQ

Prettier?

이 설정은 린트 와 포매팅 모두에 ESLint를 사용하므로 Prettier가 필요하지 않습니다. 이유는 Anthony Fu의 Why I don't use Prettier를 참고하세요.

ESLint가 아직 처리하지 못하는 파일(.css, .html 등)을 포매팅해야 한다면 포매터 옵션을 사용하세요 — 내부적으로 Prettier/dprint를 감싸므로 별도의 도구를 워크플로우에 추가할 필요가 없습니다.

CSS를 어떻게 포매팅하나요?

formatters 기능을 opt-in 하세요. 포매팅만 수행하며 린트는 하지 않습니다 — 제대로 된 CSS 린트를 원한다면 Stylelint와 함께 사용하세요.

중괄호 스타일?

PleaseAI는 curly: ['error', 'all']을 강제합니다 — 제어문 본문은 항상 중괄호로 감싸야 합니다:

// ✓ 필수
function example() {
  if (foo) {
    return true
  }
}

// ✗ 거부됨
function example() {
  if (foo) return true
}

이는 중괄호 없는 한 줄짜리 if를 허용하는 antfu 기본값과 다릅니다. 우리가 이 선택을 한 이유는 중괄호 없는 본문이 style/max-statements-per-line과 같은 다른 규칙과 상호작용할 때 읽기 어려운 한 줄짜리 코드가 되기 쉽기 때문입니다.

최상위 함수 스타일?

PleaseAI는 antfu/top-level-function을 재활성화하므로, 최상위 함수는 const에 할당된 arrow function이 아닌 function 선언을 사용해야 합니다:

// ✓ 권장
export function greet(name: string) {
  return `Hello, ${name}`
}

// ✗ 경고
export const greet = (name: string) => `Hello, ${name}`

함수 본문 내부, 콜백, 인라인 JSX 핸들러의 arrow function은 여전히 문제없습니다 — 이 규칙은 최상위 선언만 대상으로 합니다. 동의하지 않는다면 오버라이드하세요:

import pleaseai from '@pleaseai/eslint-config'

export default pleaseai({
  rules: {
    'antfu/top-level-function': 'off',
  },
})