はじめに
こんにちは、がんがんです。
以前 Nuxt ESLint に関する記事を執筆しました。Nuxt ESLint の設定方法が気になる方はこちらをご覧ください。
Nuxt ESLint ではほとんど追加の設定をせずに ESLint の設定が完了します。
これは @nuxt/eslint-config でよしなに設定がされているからです。
ほぼゼロコンフィグで進められるのはありがたいです。
では、この @nuxt/eslint-config ではどんな ESLint rules が設定されているのでしょうか？ 🤔
中身をある程度理解した上で必要最低限の設定をすることが好ましいですね。本記事では @nuxt/eslint-config の中身について調査していきたいと思います。
@nuxt/eslint-config の package.json を眺める
まずは package.json を眺めます。
ESLint Flat Config の設定でよく見かける @eslint/js、 @typescript-eslint/*、 globalsはもちろんのこと、 Vue 用の設定である eslint-plugin-vue が設定されています。
そのほかにも eslint-plugin-import-x、 eslint-plugin-jsdoc、 eslint-plugin-unicorn が設定されています。
ESLint Stylistic 用の @stylistic/eslint-plugin も設定されていました。
TypeScript + Vue 開発で必要なルールはもちろんインストールされていますし、 eslint-plugin-unicorn や JSDoc 用の eslint-plugin-jsdoc なども最初から設定されていることが分かりました。
@nuxt/eslint-conifg の config 設定を探す
リポジトリを掘ってみると packages/eslint-config/src/flat/configs に config 設定がまとまっていました。
ESLint Flat Config 対応で設定し得るルールを中心に掘っていきます。
ignores 設定
ignores では主要なファイルが設定されており追加の設定は特には必要なさそうです。
languageOptions 設定
ignores 設定と同様に重複しがちな languageOptions を見てみます。こちらは configs/javascript.ts 内で設定されています。
globals をインストールして追加対応することが多い browser や node は設定済みです。
Vue の設定は何処に
Vue の設定は configs/vue.ts で設定されています。vue-eslint-parserの設定もすでに設定済みでありユーザー側で追加の設定を行う必要がありません。
Vue.js の設定ルールを拡張したい場合は以下のように eslint.config.{mjs,js} を設定すれば良いです。
// @nuxt/eslint-config で設定した場合
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
export default createConfigForNuxt({}).override('nuxt/vue/rules', {
rules: {
// add your rules
}
})
// Nuxt ESLint モジュールを利用した場合
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt().override('nuxt/vue/rules', {
rules: {
// add your rules
}
})
TypeScript ESLint の設定は何処に
TypeScript ESLint の設定は configs/typescript.ts で設定されています。こちらもパーサーの設定が完了済みです。
拡張したい場合は Vue.js の拡張時と同じように拡張すれば大丈夫です。
// @nuxt/eslint-config で設定した場合
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
- export default createConfigForNuxt({}).override('nuxt/vue/rules', {
+ export default createConfigForNuxt({}).override('nuxt/typescript/rules', {
rules: {
// add your rules
}
})
// Nuxt ESLint モジュールを利用した場合
import withNuxt from './.nuxt/eslint.config.mjs'
- export default withNuxt().override('nuxt/vue/rules', {
+ export default withNuxt().override('nuxt/typescript/rules', {
rules: {
// add your rules
}
})
関連として...
Nuxt ESLint は Anthony Fu 氏が主導で開発しています。
彼が開発した物の中に @antfu/eslint-config という ESLint 用の presets がありますが、
@nuxt/eslint-config の設定内容および実装方法は本 presets と類似しているところが多くあります。
@nuxt/eslint-configにデフォルトで入っていないルールを追加したい場合は本リポジトリの実装方法が参考になるかと思います。
おわりに
今回は @nuxt/eslint-config の設定内容について調査してみました。
Anthony Fu 氏が ESLint に対して与えた影響は大きく、リポジトリや実装内容を追っていて非常に参考になることが多いです。
Nuxt ESLint の v3 対応は滞っていた歴史があり、この滞っていた期間に @antfu/eslint-config を設定されているプロダクトも多くあるかと思います。
次回記事では @antfu/eslint-config から @nuxt/eslint-config へのマイグレーションを考えている方に向けた記事を執筆致します。
Nuxt Org 内のマイグレーション対応を実施したときに発見したマイグレーション差分を中心に調査内容をまとめられたらと執筆できたらと思います。
Discussion