Nuxt 통합

@nuxt/eslint는 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에 자동으로 연결합니다:

npx nuxi@latest module add eslint

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

커스텀 설정 프리셋

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

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
  ],
  eslint: {
    config: {
      standalone: false,
    },
  },
})

그런 다음 모듈이 생성한 withNuxt 헬퍼로 @pleaseai/eslint-config를 감싸는 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 메인 페이지에 문서화된 표준 lint / lint:fix 스크립트는 @nuxt/eslint을 연결한 뒤에도 그대로 동작합니다.