---
title: "프레임워크 통합"
description: "React, Vue, Nextjs, Svelte, Astro, Solid, UnoCSS, Angular를 위한 선택적 프레임워크 설정."
---

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

# 프레임워크 통합

`@pleaseai/eslint-config`는 `@antfu/eslint-config`의 모든 선택적 프레임워크 설정 매트릭스를 상속받습니다. 각각 **opt-in** 방식으로 — 해당 플래그를 `pleaseai()`에 전달하고 통합에 필요한 peer dependency를 설치하세요.

## React

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

export default pleaseai({
  react: true,
})
```

```bash
bun add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
```

```bash
pnpm add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
```

```bash
npm install -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
```

## Nextjs

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

export default pleaseai({
  nextjs: true,
})
```

```bash
bun add -D @next/eslint-plugin-next
```

```bash
pnpm add -D @next/eslint-plugin-next
```

```bash
npm install -D @next/eslint-plugin-next
```

:::note
Nextjs 전용 규칙 위에 React 규칙도 함께 사용하고 싶다면 `nextjs: true`와 함께 `react: true`도 활성화하세요.
:::

## Vue

Vue 지원은 `package.json`에서 **자동 감지**됩니다. 거의 명시적으로 활성화할 필요가 없지만, 원한다면 다음과 같이 할 수 있습니다:

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

export default pleaseai({
  vue: true,
})
```

Nuxt 프로젝트는 [Nuxt 통합](/ko/eslint-config/nuxt) 전용 가이드를 참고하세요 — 이 설정을 `@nuxt/eslint`과 짝지어 Nuxt 모듈이 auto-import 인지 기능까지 함께 제공합니다.

## Svelte

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

export default pleaseai({
  svelte: true,
})
```

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

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

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

## Astro

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

export default pleaseai({
  astro: true,
})
```

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

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

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

## Solid

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

export default pleaseai({
  solid: true,
})
```

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

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

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

## UnoCSS

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

export default pleaseai({
  unocss: true,
})
```

```bash
bun add -D @unocss/eslint-plugin
```

```bash
pnpm add -D @unocss/eslint-plugin
```

```bash
npm install -D @unocss/eslint-plugin
```

## Angular

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

export default pleaseai({
  angular: true,
})
```

```bash
bun add -D @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
```

```bash
pnpm add -D @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
```

```bash
npm install -D @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser
```

## 통합별 규칙 오버라이드

모든 프레임워크 통합은 `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'],
    },
  },
})
```

이 방식이 선호되는 확장 지점입니다 — `overrides`로 충분하지 않을 때만 [Config Composer](/ko/eslint-config/advanced#config-composer)를 사용하세요.

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