---
title: "ESLint Config"
description: "PleaseAI 프로젝트를 위한 의견이 반영된 ESLint flat config — @antfu/eslint-config 기반."
---

> Documentation Index
> Fetch the complete documentation index at: https://code-style.pages.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# ESLint Config

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

## 주요 기능

- [ESLint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) 형식, 조합 가능하고 미래 지향적
- 포매팅 자동 수정 — **Prettier 없이 독립적으로 사용**
- TypeScript, JSX, Vue, JSON, YAML, Markdown, TOML, XML, GraphQL, Svelte, Astro, CSS 지원
- 선택적 [React, Nextjs, Svelte, UnoCSS, Astro, Solid, Angular](/ko/eslint-config/frameworks) 통합
- `eslint-plugin-format`을 통한 CSS / HTML / Markdown의 선택적 [포매터](#포매터)
- [`eslint-plugin-package-json`](/ko/eslint-config/package-json) 설정 포함
- `.gitignore` 패턴 자동 감지
- ESLint v10.4.0 이상 필요

## 설치

```bash
bun add -D @pleaseai/eslint-config eslint
```

```bash
pnpm add -D @pleaseai/eslint-config eslint
```

```bash
npm install -D @pleaseai/eslint-config eslint
```

> **Tip**
>
> 직접 설정하고 싶지 않다면? `bunx @pleaseai/code-style`을 실행하세요 — CLI가 패키지를 설치하고 `eslint.config.mjs`를 작성해 주며, AI 코딩 어시스턴트를 위한 `AGENTS.md` 규칙 블록도 관리할 수 있습니다.

## 사용법

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

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

export default pleaseai()
```

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

### 옵션과 함께

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

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

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

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

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

프레임워크 플래그와 peer dependency 전체 목록은 [프레임워크 통합](/ko/eslint-config/frameworks)에서 확인하세요.

### 추가 설정과 함께

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

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

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

### 규칙 오버라이드

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

```ts title="eslint.config.ts"
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` 객체를 전달하세요.

> **Note**
>
> 플러그인 prefix는 편의를 위해 이름이 변경되어 있습니다 — `ts/*`, `style/*`, `test/*`, `import/*` 등을 사용하세요. 전체 매핑은 고급 사용법에서 확인할 수 있습니다.

## NPM 스크립트

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

```json title="package.json"
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

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

## PleaseAI 기본값

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

| 옵션 | 값 | 설명 |
| --- | --- | --- |
| `stylistic.indent` | `2` | 공백 2칸 들여쓰기 |
| `stylistic.quotes` | `single` | 홑따옴표 |
| `stylistic.semi` | `false` | 세미콜론 없음 |
| `typescript` | `true` | 기본 활성화 |
| `gitignore` | `true` | `.gitignore`의 모든 항목 무시 |
| `lessOpinionated` | `true` | `antfu/if-newline`과 `antfu/curly`를 비활성화하고 `curly: ['error', 'all']`을 활성화 |
| `antfu/top-level-function` | 재활성화 | 최상위 레벨에서는 `function` 선언 선호 |
| `test/prefer-lowercase-title` | 비활성화 | 테스트 제목은 어떤 대소문자로도 시작 가능 |

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

## 포매터

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

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

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

```bash
bun add -D eslint-plugin-format
```

```bash
pnpm add -D eslint-plugin-format
```

```bash
npm install -D eslint-plugin-format
```

:::note
`formatters`는 포매팅만 처리하며 린트는 하지 않습니다. 제대로 된 CSS **린트**가 필요하다면 [Stylelint](https://stylelint.io/)를 함께 사용하세요.
:::

## 타입 인지 규칙

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

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

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

자세한 내용은 [고급 사용법 → 타입 인지 규칙](/ko/eslint-config/advanced#타입-인지-규칙)에서 확인하세요.

## 다음 단계

- **[프레임워크 통합](/ko/eslint-config/frameworks)** — React, Nextjs, Vue, Svelte, Astro, Solid, UnoCSS, Angular — peer dependency 포함.

- **[고급 사용법](/ko/eslint-config/advanced)** — Config Composer, `command` codemod, 플러그인 이름 변경, 버전 정책.

- **[에디터 & CI](/ko/eslint-config/editor)** — VS Code, Neovim, 에디터 전용 비활성화, lint-staged.

- **[Nuxt 통합](/ko/eslint-config/nuxt)** — `@nuxt/eslint`과 조합하여 auto-import 인지 린트 사용.

## FAQ

### Prettier?

이 설정은 린트 **와** 포매팅 모두에 ESLint를 사용하므로 Prettier가 필요하지 않습니다. 이유는 Anthony Fu의 [Why I don't use Prettier](https://antfu.me/posts/why-not-prettier)를 참고하세요.

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

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

[`formatters`](#포매터) 기능을 opt-in 하세요. 포매팅만 수행하며 린트는 하지 않습니다 — 제대로 된 CSS 린트를 원한다면 [Stylelint](https://stylelint.io/)와 함께 사용하세요.

### 중괄호 스타일?

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

```ts
// ✓ 필수
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` 선언을 사용해야 합니다:

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

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

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

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

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

Source: https://code-style.pages.dev/ko/eslint-config/index.mdx