Vue+TypeScriptプロジェクトでのESLint 9 Flat Config設定方法

ESLint 9で導入されたFlat Config形式では、Vue.jsとTypeScriptを併用するプロジェクトの設定に特有の課題が発生します。本記事では動作可能な構成例を解説します。

問題の核心

ESLint 9のFlat Configでは:

1. Vue単体またはTypeScript単体の設定は公式ドキュメントにあるが、両者を組み合わせた場合の正式な手順が不明確
2. eslint-plugin-vue の設定が.vueファイル内のTypeScriptコードを認識しない
3. パーサー競合 (vue-eslint-parser vs @typescript-eslint/parser) が頻発
4. Prettier連携時にルール衝突が発生

重要: typescript-eslint v7.7.0はESLint 8.57.0までしかサポートせず、ESLint 9利用時は最新版の使用が必須

最適な設定方法

以下の手順で動作確認済み環境を構築します:

1. 必須パッケージのインストール

npm install --save-dev \
  eslint@latest \
  typescript \
  vue-eslint-parser \
  eslint-plugin-vue@latest \
  @typescript-eslint/eslint-plugin@latest \
  @typescript-eslint/parser@latest \
  eslint-config-prettier

2. eslint.config.js の基本構成

import eslintJs from '@eslint/js';
import tsEslint from 'typescript-eslint';
import vueParser from 'vue-eslint-parser';
import pluginVue from 'eslint-plugin-vue';
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
  // グローバル無視設定
  {
    ignores: ['**/dist/**', '**/node_modules/**', '**/coverage/**']
  },
  
  // ESLint基本設定
  eslintJs.configs.recommended,
  
  // TypeScript設定
  ...tsEslint.configs.recommended,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsEslint.parser,
      parserOptions: {
        project: true, // tsconfig.jsonを自動検出
        extraFileExtensions: ['.vue']
      }
    }
  },
  
  // Vue設定
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsEslint.parser, // Vue内のTS解析に使用
        sourceType: 'module',
        ecmaVersion: 'latest'
      }
    },
    rules: {
      // Vue固有ルールのカスタマイズ例
      'vue/multi-word-component-names': 'off',
      'vue/html-self-closing': ['error', {
        html: { normal: 'never', component: 'always' },
        svg: 'always',
        math: 'always'
      }]
    }
  },
  
  // Prettier連携 (必ず最後に配置)
  eslintConfigPrettier
];

3. tsconfig.json の設定例

.vueファイルをTypeScriptコンパイラに認識させる設定:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["src/**/*", "src/**/*.vue"]
}

重要なポイント解説

1. パーサー階層化: Vueファイル解析時はvueParserが最上位レイヤーで動作し、内部の<script>タグにはtsEslint.parserが適用されます

parser: vueParser, // .vueファイル全体の解析
parserOptions: {
  parser: tsEslint.parser // <script>内のTypeScript解析
}

2. 設定継承の最適化:

   • ...pluginVue.configs['flat/recommended'] はstrongly-recommendedとessentialを含むため個別指定不要
   • tseslint.config()より配列形式が推奨（プラグイン間の競合回避）

3. Prettier統合の正しい順序:

eslintConfigPrettier // すべてのルールより後に配置

警告 ESLint 9利用時はVS Code設定必須:

// .vscode/settings.json
{
  "eslint.experimental.useFlatConfig": true
}

動作確認コマンド

npx eslint . --ext .ts,.vue

TypescriptとVueの組み合わせに関する注意事項

• 型チェックは別処理: ESLintは型チェックを行わないため、tsc --noEmitの併用が必要
• Single File Components(SFC): .vueファイル内のTypeScript検証にはvue-tscの使用を推奨
• ルール競合の対処: VueとTypeScriptルールが競合する場合はoverridesでファイル毎に無効化

{
  files: ['**/*.vue'],
  rules: {
    '@typescript-eslint/rule-name': 'off'
  }
}

---

本設定により、ESLint 9のFlat Config環境でVue3とTypeScriptの統合リンターが実現します。プロジェクト構造に応じてfiles指定やルールカスタマイズを調整してください。