---
title: "Nuxt 통합"
description: "Nuxt 프로젝트에서 @pleaseai/eslint-config를 @nuxt/eslint와 함께 사용하는 방법."
---

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

# Nuxt 통합

[`@nuxt/eslint`](https://eslint.nuxt.com/packages/module)는 Nuxt의 공식 ESLint 모듈입니다. `./.nuxt/eslint.config.mjs`에 프로젝트를 이해하는 flat config를 생성하는데, auto-import, components 디렉토리, pages를 알고 있어서 ESLint가 수동 규칙 없이도 Nuxt 전역을 정확히 해석할 수 있습니다.

`@pleaseai/eslint-config`는 `@nuxt/eslint`와 깔끔하게 조합됩니다 — 모듈은 Nuxt 전용 규칙을 제공하고, `@pleaseai/eslint-config`가 나머지를 담당합니다.

## 빠른 설정

Nuxi로 모듈을 추가하세요 — `@nuxt/eslint`를 설치하고 `nuxt.config.ts`에 자동으로 연결합니다:

```bash title="Terminal"
npx nuxi@latest module add eslint
```

이렇게 하면 Nuxt 인지 규칙 위에 ESLint의 JS, TS, Vue 플러그인을 얹은 기본 설정이 갖춰집니다.

## 커스텀 설정 프리셋

기본적으로 모듈은 JS, TS, Vue 플러그인을 권장 규칙과 함께 설치합니다. `@pleaseai/eslint-config`(`@antfu/eslint-config`를 통해)가 이미 그 부분을 다루고 있으므로, `standalone: false`로 설정하여 기본 프리셋을 비활성화하고 모듈이 Nuxt 전용 규칙만 내보내도록 하세요:

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
  ],
  eslint: {
    config: {
      standalone: false,
    },
  },
})
```

그런 다음 모듈이 생성한 `withNuxt` 헬퍼로 `@pleaseai/eslint-config`를 감싸는 `eslint.config.mjs`를 생성하세요:

```js title="eslint.config.mjs"
// @ts-check
import pleaseai from '@pleaseai/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  pleaseai({
    // ...@pleaseai/eslint-config 옵션
    vue: true,
  }),
  // ...다른 flat config 항목들
)
```

`withNuxt`는 인자를 Nuxt 인지 규칙 뒤에 병합하므로, 전달한 모든 항목(`@pleaseai/eslint-config` 출력 포함)이 `@nuxt/eslint`의 기본값보다 우선 적용됩니다.

## 왜 `standalone: false`인가요?

이 옵션 없이는 `@nuxt/eslint`와 `@pleaseai/eslint-config`가 모두 JS/TS/Vue 플러그인을 설치해서 중복 규칙 경고가 발생하고, 해결된 설정 크기가 두 배가 됩니다. `standalone: false`로 설정하면 모듈을 Nuxt만 아는 부분(auto-import, component 디렉토리 전역, 페이지 구조)으로 한정하고, 언어 도구는 `@pleaseai/eslint-config`가 담당하도록 할 수 있습니다.

## ESLint 실행

[ESLint Config 메인 페이지](/ko/eslint-config#npm-스크립트)에 문서화된 표준 `lint` / `lint:fix` 스크립트는 `@nuxt/eslint`을 연결한 뒤에도 그대로 동작합니다.

:::note
커스텀 규칙 오버라이드, 디렉토리별 설정, dev 모드 통합과 같은 추가 옵션은 [`@nuxt/eslint` 모듈 문서](https://eslint.nuxt.com/packages/module)를 참고하세요.
:::

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