---
title: "고급 사용법"
description: "Config Composer, 타입 인지 규칙, command codemod, 플러그인 이름 변경, 버전 정책."
---

> 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.

# 고급 사용법

## 타입 인지 규칙

가장 강력한 TypeScript 린트 규칙 일부는 타입 정보가 필요합니다 — 로컬 구문이 어떻게 보이느냐가 아니라 런타임에 어떤 값인지 실제로 resolve해야 합니다. `tsconfig.json`을 가리켜 [타입 인지 린트](https://typescript-eslint.io/linting/typed-linting/)를 opt-in 하세요:

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

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

:::warning
타입 인지 린트는 ESLint가 매 실행마다 TypeScript 프로그램을 구축해야 하므로 구문만 보는 린트보다 느립니다. 작거나 중간 크기의 프로젝트에서 시작하고, 매우 큰 모노레포에서는 일부 파일에만 적용하는 것을 고려하세요.
:::

## Config Composer

`pleaseai()`는 [`FlatConfigComposer`](https://github.com/antfu/eslint-flat-config-utils#composer)를 반환하므로, 일반 옵션 객체만으로는 충분하지 않을 때 이름이 붙은 config 블록을 유연하게 override, prepend, remove, rename할 수 있습니다:

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

export default pleaseai()
  .prepend(
    // 메인 PleaseAI 설정 앞에 들어가는 flat config들
  )
  .override('antfu/stylistic/rules', {
    rules: {
      'style/generator-star-spacing': ['error', { after: true, before: false }],
    },
  })
  .renamePlugins({
    'old-prefix': 'new-prefix',
  })
  .remove('antfu/stylistic')
```

이 API는 다음과 같은 경우에 사용하세요:

- 이름이 붙은 config 블록을 완전히 **remove**하고 싶을 때
- 커스텀 설정을 작성하지 않고 플러그인 prefix를 **rename**해야 할 때
- 특정 이름의 블록 내부 규칙을 **override**하고 싶을 때 (최상위 `overrides`보다 더 정교함)

## `command` Codemod

`@pleaseai/eslint-config`는 [`eslint-plugin-command`](https://github.com/antfu/eslint-plugin-command)를 함께 배포합니다 — triple-slash 주석으로 트리거되는 온디맨드 마이크로 codemod 시스템입니다. 일반적인 린트 규칙이 아니라 사용자가 명시적으로 opt-in 하는 방식입니다.

기본 제공되는 트리거:

- `/// to-function` — arrow function → `function` 선언
- `/// to-arrow` — `function` 선언 → arrow function
- `/// to-for-each` — `for` 루프 → `.forEach()`
- `/// to-for-of` — `.forEach()` → `for-of`
- `/// keep-sorted` — 다음 객체/배열/인터페이스 정렬

전체 카탈로그는 [플러그인 문서](https://github.com/antfu/eslint-plugin-command#built-in-commands)에서 확인하세요.

사용법 — 트리거를 코드 한 줄 위에 배치합니다:

```ts title="before.ts"
/// to-function
const greet = async (name: string): Promise<void> => {
  console.log(`Hello, ${name}`)
}
```

`eslint --fix` 실행 후:

```ts title="after.ts"
async function greet(name: string): Promise<void> {
  console.log(`Hello, ${name}`)
}
```

트리거 주석은 일회성으로, 변환과 함께 제거됩니다.

## 플러그인 이름 변경

`@pleaseai/eslint-config`는 더 짧고 일관된 DX를 위해 `@antfu/eslint-config`의 플러그인 이름 변경을 상속받습니다:

| 새 prefix | 원본 prefix | 소스 플러그인 |
| --- | --- | --- |
| `import/*` | `import-lite/*` | [`eslint-plugin-import-lite`](https://github.com/9romise/eslint-plugin-import-lite) |
| `node/*` | `n/*` | [`eslint-plugin-n`](https://github.com/eslint-community/eslint-plugin-n) |
| `yaml/*` | `yml/*` | [`eslint-plugin-yml`](https://github.com/ota-meshi/eslint-plugin-yml) |
| `ts/*` | `@typescript-eslint/*` | [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint) |
| `style/*` | `@stylistic/*` | [`@stylistic/eslint-plugin`](https://github.com/eslint-stylistic/eslint-stylistic) |
| `test/*` | `vitest/*` | [`@vitest/eslint-plugin`](https://github.com/vitest-dev/eslint-plugin-vitest) |

따라서 규칙을 오버라이드할 때는 새 prefix를 사용하세요:

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

export default pleaseai({
  rules: {
    'ts/consistent-type-definitions': ['error', 'interface'],
    'style/max-statements-per-line': ['error', { max: 2 }],
  },
})
```

## 활성화된 규칙 보기

[`@eslint/config-inspector`](https://github.com/eslint/config-inspector)를 사용하면 완전히 해결된 설정을 브라우저에서 시각화할 수 있습니다 — 활성화된 모든 규칙, 모든 플러그인, 모든 파일 glob까지:

```bash title="Terminal"
npx @eslint/config-inspector
```

로컬 서버가 열리면서 flat config 그래프를 보여줍니다. "왜 이 규칙이 적용되는가" 또는 "어떤 프리셋이 이것을 추가했는가"를 디버깅할 때 없어서는 안 될 도구입니다.

## Re-exports

`@antfu/eslint-config`의 모든 export가 재export 되므로, `pleaseai()` 팩토리를 사용하지 않고 직접 세부 설정을 import해서 조합할 수도 있습니다:

```ts title="eslint.config.ts"
import { combine, javascript, typescript, vue } from '@pleaseai/eslint-config'

export default combine(
  javascript(),
  typescript(),
  vue(),
)
```

## 버전 정책

`@pleaseai/eslint-config`는 [Semantic Versioning](https://semver.org/)을 따르지만, 여러 가지가 얽힌 스타일 프리셋이기 때문에 **규칙 변경은 breaking change로 취급하지 않습니다**.

**Breaking (major 버전 업)**

- Node.js 버전 요구사항 변경
- 다운스트림 설정을 깨뜨릴 수 있는 대규모 리팩터
- 기존 규칙을 깨뜨릴 수 있는 주요 플러그인 업그레이드
- 대부분의 코드베이스에 영향을 미칠 가능성이 높은 변경

**Non-breaking (minor/patch)**

- 개별 규칙 활성화 또는 비활성화 (엄격해지더라도)
- 규칙 옵션 변경
- 의존성 버전 업데이트

규칙 강화로 빌드가 깨진다면 이전 minor 버전으로 고정하고, 트레이드오프를 논의할 수 있도록 [이슈를 열어](https://github.com/pleaseai/code-style/issues) 주세요.

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