Vue3+TypeScriptプロジェクトでEslintをお手軽に設定するメモ(@antfu/eslint-config-vueについて)

tldr

devDependenciesに以下のパッケージを追加する

yarn add -D eslint @antfu/eslint-config-vue

.eslintrcは以下のようにextendsする

{
  "extends": [
    "@antfu/eslint-config-vue",
  ]
}

以上、楽ちん。

詳細

@antfuというVue本体のコミッターが@antfu/eslint-config-vueというパッケージをメンテナンスしている。 eslintのプリセットだが、設定をモノレポで管理しつつ、レイヤーになっていて、賢い管理の仕方だな思ったのでメモ。

モノレポの構造

モノレポでは↓のパッケージが管理されている。

• @antfu/eslint-config-basic(eslintの共通設定)
• @antfu/eslint-config-ts(ts用の設定)
• @antfu/eslint-config-vue(vue用の設定)
• @antfu/eslint-config-react(react用の設定)
• @antfu/eslint-config(全部入り)

これらのパッケージは, それぞれ依存関係があり、以下のようになっている。

@antfu/eslint-config-ts

@antfu/eslint-config-ts
  -> @antfu/eslint-config-basic

@antfu/eslint-config-vue

@antfu/eslint-config-vue
  -> @antfu/eslint-config-ts
    -> @antfu/eslint-config-basic

@antfu/eslint-config-react

@antfu/eslint-config-react
  -> @antfu/eslint-config-ts
    -> @antfu/eslint-config-basic

@antfu/eslint-config

@antfu/eslint-config
  -> @antfu/eslint-config-react
    -> @antfu/eslint-config-ts
      -> @antfu/eslint-config-basic
  -> @antfu/eslint-config-vue
    -> @antfu/eslint-config-ts
      -> @antfu/eslint-config-basic

@antfu/eslint-config-basicは共通設定として、他のすべてのパッケージから読み込まれている。
@antfu/eslint-config-tsはbasicを継承しつつ、TypeScript用のeslint設定が加えられている。
@antfu/eslint-config-vueはbasic, tsを継承しつつ、Vue用のeslint設定が加えられている。

...というように、@antfu/eslint-config-react, @antfu/eslint-configも同様に継承関係が作られている。

メリット

継承にはなるが、パッケージの組み合わせでeslintの設定管理ができる。

なので、例えばここに「svelteのプロジェクトを増やしたい」となったら、basicとts用の設定を継承したsvelte用パッケージを追加するだけで済む。

複数プロジェクトでESLIntの設定を共通化したいときに、レイヤーかは管理方法のひとつのアイデアとして良いかもしれない。

使い方

Vueのプロジェクトであれば、以下のパッケージを追加し、eslintrcなどでextendsに@antfu/eslint-config-vueを指定すれば良い。

• eslint
• @antfu/eslint-config-vue

※eslintはdependenciesに含まれていないので、プロジェクト側で明示的にインストールする必要がある。

余談

@antfu/eslint-config-vueについては、実際にVitesseという、ViteベースのVueアプリケーションのスケルトンで使われている。(Vitesseも@antfuが作ったものという) github.com

注意点

eslint-config-basicに色々なeslintのルールが設定済みなので、プロジェクトや人によってはそのまま使うと合う合わないがありそう。