ESLint 설정

17.1.1. Flat Config 사용

ESLint v9 이상의 Flat Config 형식(eslint.config.js)을 사용합니다. 레거시 .eslintrc.* 형식은 사용하지 않습니다.

---

17.1.2. 필수 패키지

yarn add -D eslint @eslint/js typescript-eslint eslint-plugin-vue eslint-config-prettier

패키지	역할
eslint	린터 코어
@eslint/js	ESLint 기본 규칙
typescript-eslint	TypeScript 파서 및 규칙
eslint-plugin-vue	Vue SFC 린트 규칙
eslint-config-prettier	Prettier 충돌 방지

---

17.1.3. eslint.config.js 전체 예시

import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import prettierConfig from 'eslint-config-prettier'

export default tseslint.config(
  {
    ignores: ['dist/', 'node_modules/', '*.config.js'],
  },

  js.configs.recommended,

  ...tseslint.configs.recommended,

  ...pluginVue.configs['flat/recommended'],

  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
      },
    },
  },

  {
    rules: {
      // TypeScript
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/consistent-type-imports': 'error',

      // Vue
      'vue/multi-word-component-names': 'off',
      'vue/define-macros-order': ['error', {
        order: ['defineProps', 'defineEmits'],
      }],
      'vue/block-order': ['error', {
        order: ['script', 'template', 'style'],
      }],
      'vue/component-api-style': ['error', ['script-setup']],

      // General
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      'no-debugger': 'error',
    },
  },

  prettierConfig,
)

---

17.1.4. 주요 규칙 설명

규칙	설정	이유
no-console	warn	console.log 남용 방지. warn, error는 허용
no-debugger	error	디버거 문 잔류 방지
@typescript-eslint/no-explicit-any	warn	any 타입 최소화
@typescript-eslint/consistent-type-imports	error	import type 일관성 강제
vue/component-api-style	error	<script setup> 사용 강제
vue/block-order	error	SFC 블록 순서 통일