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ブロック順序の統一