Zenn
Open3

Vue+TSのESLint設定（ESLint v9, Flat Config版）

ESLint
Vue 3
ピン留めされたアイテム
bisquit_devbisquit_dev

色々調べた結果、最小構成は以下でok。
（2024/6/25現在、js, ts, vueプラグインいずれもv9対応しているため、compatは不要）

eslint.config.js
import eslintJs from '@eslint/js';
import eslintTs from 'typescript-eslint';
import eslintPluginVue from 'eslint-plugin-vue';

/** @type {import('eslint').Linter.FlatConfig} */
export default [
  // js
  eslintJs.configs.recommended,

  // ts
  ...eslintTs.configs.recommended,

  // vue
  ...eslintPluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: {
          ts: eslintTs.parser,
        },
        sourceType: 'module',
      },
    },
  },

  // 必要に応じて他のプラグインを追加
  // v9対応, flat config対応していないプラグインの場合はcompatレイヤーでラップする

  // ignores
  {
    ignores: ['**/some-ignore'],
  },
];

また、VSCodeのESLint拡張もv9対応したため、特別な設定は不要
https://github.com/eslint/eslint/issues/18391

bisquit_devbisquit_dev

eslintJs.configs.recommended

  • jsパーサー（espree）を設定
  • js関連のルールをロード
  • 推奨ルールの有効化

この設定を入れた時点で

  • .js: espreeでパースされlintされる
  • .ts: espreeでパースされるが構文が解析できずエラーになる
  • .vue: espreeでパースされるが構文が解析できずエラーになる

...eslintTs.configs.recommended

３つの設定を含む。

  • base
    • tsパーサー（typescript-eslint/parser）を設定
    • ts関連のルールをロード
  • eslint-recommended
    • eslintJs.configs.recommendedが有効にするルールのうち、TSが言語レベルで処理するルールを無効にする（e.g. no-const-assignは、TSではconstの再アサインを言語レベルでエラーにするため不要）
    • eslintJs.configs.recommendedが有効にしないルールでも、TSでは妥当なルールを有効にする（e.g. no-varは、TSではlet/constがvarにトランスパイルされるため、varを使う必要性が無い）
  • recommended
    • 推奨ルールを有効化
    • jsと重複するルールを無効化（e.g. no-unused-vars）

この設定を入れた時点で

  • .js: typescript-eslint/parserでパースされlintされる
  • .ts: typescript-eslint/parserでパースされlintされる
  • .vue: typescript-eslint/parserでパースされるが構文が解析できずエラーになる

...eslintPluginVue.configs['flat/recommended']

複数の設定を含む。

  • vueパーサー（vue-eslint-parser）を設定
  • vue関連のルールをロード
  • 推奨ルールの有効化

<script lang="ts">の場合はtypescript-eslint/parserを使うように追加の設定を書く。

  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: {
          ts: eslintTs.parser,
        },
        sourceType: 'module',
      },
    },
  },

この設定を入れると

  • .js: typescript-eslint/parserでパースされlintされる
  • .ts: typescript-eslint/parserでパースされlintされる
  • .vue: vue-eslint-parserでパースされlintされる