feat(eslint-config): support for multiple src dirs and auto infer directories structure (#370)

Author: antfu

Diff for: eslint.config.js

@@ -6,30 +6,22 @@ export default createConfigForNuxt({
     stylistic: true,
   },
   dirs: {
-    src: 'playground',
-    pages: [
-      'playground/pages',
-      'docs/pages',
-    ],
-    layouts: [
-      'playground/layouts',
-      'docs/layouts',
-    ],
-    components: [
-      'playground/components',
-      'docs/components',
-    ],
-  },
-}).append(
-  {
-    ignores: [
-      'packages-legacy/**',
+    src: [
+      'playground',
+      'docs',
     ],
   },
-  {
-    files: ['docs/**/*.vue'],
-    rules: {
-      'vue/no-v-html': 'off',
+})
+  .append(
+    {
+      ignores: [
+        'packages-legacy/**',
+      ],
     },
-  },
-)
+    {
+      files: ['docs/**/*.vue'],
+      rules: {
+        'vue/no-v-html': 'off',
+      },
+    },
+  )

Diff for: packages/eslint-config/package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "@eslint/js": "^8.57.0",
     "@nuxt/eslint-plugin": "workspace:*",
-    "@rushstack/eslint-patch": "^1.9.0",
+    "@rushstack/eslint-patch": "^1.10.1",
     "@stylistic/eslint-plugin": "^1.7.0",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",

Diff for: packages/eslint-config/src/flat/configs/disables.ts

@@ -2,24 +2,26 @@ import { join } from 'pathe'
 import { GLOB_EXTS } from '../constants'
 import type { NuxtESLintConfigOptions } from '../types'
 import type { FlatConfigItem } from 'eslint-flat-config-utils'
+import { resolveOptions } from '../utils'
 
 export default function disables(options: NuxtESLintConfigOptions): FlatConfigItem[] {
-  const dirs = options.dirs ?? {}
+  const resolved = resolveOptions(options)
+  const dirs = resolved.dirs
   const nestedGlobPattern = `**/*.${GLOB_EXTS}`
 
   const fileRoutes = [
     // These files must have one-word names as they have a special meaning in Nuxt.
-    ...dirs.layers?.flatMap(layersDir => [
+    ...dirs.src.flatMap(layersDir => [
       join(layersDir, `app.${GLOB_EXTS}`),
       join(layersDir, `error.${GLOB_EXTS}`),
     ]) || [],
 
     // Layouts and pages are not used directly by users so they can have one-word names.
-    ...(dirs.layouts?.map(layoutsDir => join(layoutsDir, nestedGlobPattern)) || []),
-    ...(dirs.pages?.map(pagesDir => join(pagesDir, nestedGlobPattern)) || []),
+    ...(dirs.layouts.map(layoutsDir => join(layoutsDir, nestedGlobPattern)) || []),
+    ...(dirs.pages.map(pagesDir => join(pagesDir, nestedGlobPattern)) || []),
 
     // These files should have multiple words in their names as they are within subdirectories.
-    ...(dirs.components?.map(componentsDir => join(componentsDir, '*', nestedGlobPattern)) || []),
+    ...(dirs.components.map(componentsDir => join(componentsDir, '*', nestedGlobPattern)) || []),
   ]
 
   const configs: FlatConfigItem[] = []

Diff for: packages/eslint-config/src/flat/configs/nuxt.ts

@@ -3,9 +3,11 @@ import type { NuxtESLintConfigOptions } from '../types'
 import nuxtPlugin from '@nuxt/eslint-plugin'
 import { GLOB_EXTS } from '../constants'
 import type { FlatConfigItem } from 'eslint-flat-config-utils'
+import { resolveOptions } from '../utils'
 
 export default function nuxt(options: NuxtESLintConfigOptions): FlatConfigItem[] {
-  const dirs = options.dirs ?? {}
+  const resolved = resolveOptions(options)
+  const dirs = resolved.dirs
 
   const fileSingleRoot = [
     ...(dirs.layouts?.map(layoutsDir => join(layoutsDir, `**/*.${GLOB_EXTS}`)) || []),

Diff for: packages/eslint-config/src/flat/configs/vue.ts

@@ -4,10 +4,12 @@ import * as parserTs from '@typescript-eslint/parser'
 // @ts-expect-error missing types
 import pluginVue from 'eslint-plugin-vue'
 import type { NuxtESLintConfigOptions } from '../types'
-import { removeUndefined } from '../utils'
+import { removeUndefined, resolveOptions } from '../utils'
 import type { FlatConfigItem } from 'eslint-flat-config-utils'
 
 export default function vue(options: NuxtESLintConfigOptions): FlatConfigItem[] {
+  const resolved = resolveOptions(options)
+
   return [
     {
       name: 'nuxt:setup-vue',
@@ -92,7 +94,7 @@ export default function vue(options: NuxtESLintConfigOptions): FlatConfigItem[]
         'prefer-spread': 'error', // ts transpiles spread to apply, so no need for manual apply
         'valid-typeof': 'off', // ts(2367)
 
-        ...(options.features?.stylistic
+        ...(resolved.features.stylistic
           ? {}
           : {
               // Disable Vue's default stylistic rules when stylistic is not enabled

Diff for: packages/eslint-config/src/flat/index.ts

@@ -9,6 +9,7 @@ import stylistic from './configs/stylistic'
 import type { FlatConfigItem, ResolvableFlatConfig } from 'eslint-flat-config-utils'
 import { FlatConfigPipeline } from 'eslint-flat-config-utils'
 import { pipe } from 'eslint-flat-config-utils'
+import { resolveOptions } from './utils'
 
 export * from './types'
 
@@ -34,24 +35,26 @@ export function defineFlatConfigs(
 export function createConfigForNuxt(options: NuxtESLintConfigOptions = {}): FlatConfigPipeline<FlatConfigItem> {
   const pipeline = pipe()
 
-  if (options.features?.standalone !== false) {
+  const resolved = resolveOptions(options)
+
+  if (resolved.features.standalone !== false) {
     pipeline.append(
       base(),
       javascript(),
       typescript(),
-      vue(options),
+      vue(resolved),
     )
   }
 
-  if (options.features?.stylistic) {
+  if (resolved.features.stylistic) {
     pipeline.append(
-      stylistic(options.features.stylistic === true ? {} : options.features.stylistic),
+      stylistic(resolved.features.stylistic === true ? {} : resolved.features.stylistic),
     )
   }
 
   pipeline.append(
-    nuxt(options),
-    disables(options),
+    nuxt(resolved),
+    disables(resolved),
   )
 
   return pipeline

Diff for: packages/eslint-config/src/flat/types.ts

@@ -26,7 +26,12 @@ export interface NuxtESLintConfigOptions {
     /**
      * Nuxt source directory
      */
-    src?: string
+    src?: string[]
+
+    /**
+     * Root directory for nuxt project
+     */
+    root?: string[]
 
     /**
      * Directory for pages
@@ -67,12 +72,14 @@ export interface NuxtESLintConfigOptions {
      * Directory for server
      */
     servers?: string[]
-
-    /**
-     * Directory for layers
-     */
-    layers?: string[]
   }
 }
 
+type NotNill<T> = T extends null | undefined ? never : T
+
+export interface NuxtESLintConfigOptionsResolved {
+  features: Required<NotNill<NuxtESLintFeaturesOptions>>
+  dirs: Required<NotNill<NuxtESLintConfigOptions['dirs']>>
+}
+
 export type Awaitable<T> = T | Promise<T>

Diff for: packages/eslint-config/src/flat/utils.ts

@@ -1,3 +1,41 @@
+import type { NuxtESLintConfigOptions, NuxtESLintConfigOptionsResolved } from '../flat'
+
 export function removeUndefined<T extends object>(obj: T): T {
   return Object.fromEntries(Object.entries(obj).filter(([, value]) => value !== undefined)) as T
 }
+
+export function resolveOptions(
+  config: NuxtESLintConfigOptions,
+): NuxtESLintConfigOptionsResolved {
+  if ('__resolved' in config) {
+    return config as NuxtESLintConfigOptionsResolved
+  }
+
+  const dirs = {
+    ...config.dirs,
+  } as NuxtESLintConfigOptionsResolved['dirs']
+
+  dirs.root ||= [process.cwd()]
+  dirs.src ||= dirs.root
+  dirs.pages ||= dirs.src.map(src => `${src}/pages`)
+  dirs.layouts ||= dirs.src.map(src => `${src}/layouts`)
+  dirs.components ||= dirs.src.map(src => `${src}/components`)
+  dirs.composables ||= dirs.src.map(src => `${src}/composables`)
+  dirs.plugins ||= dirs.src.map(src => `${src}/plugins`)
+  dirs.modules ||= dirs.src.map(src => `${src}/modules`)
+  dirs.middleware ||= dirs.src.map(src => `${src}/middleware`)
+  dirs.servers ||= dirs.src.map(src => `${src}/servers`)
+
+  const resolved: NuxtESLintConfigOptionsResolved = {
+    features: {
+      standalone: true,
+      stylistic: false,
+      ...config.features,
+    },
+    dirs,
+  }
+
+  Object.defineProperty(resolved, '__resolved', { value: true, enumerable: false })
+
+  return resolved
+}

Diff for: packages/module/package.json

@@ -54,8 +54,8 @@
     "@nuxt/kit": "^3.11.1",
     "chokidar": "^3.6.0",
     "eslint-flat-config-utils": "^0.1.2",
-    "eslint-flat-config-viewer": "^0.1.14",
-    "eslint-typegen": "^0.1.5",
+    "eslint-flat-config-viewer": "^0.1.20",
+    "eslint-typegen": "^0.1.6",
     "get-port-please": "^3.1.2",
     "pathe": "^1.1.2",
     "unimport": "^3.7.1"

Diff for: packages/module/src/modules/config.ts

@@ -203,15 +203,15 @@ function getDirs(nuxt: Nuxt): NuxtESLintConfigOptions['dirs'] {
     plugins: [],
     middleware: [],
     modules: [],
-    layers: [],
     servers: [],
-    src: nuxt.options.srcDir,
+    root: [nuxt.options.rootDir],
+    src: [nuxt.options.srcDir],
   }
 
   for (const layer of nuxt.options._layers) {
     const r = (t: string) => relative(nuxt.options.rootDir, resolve(layer.config.srcDir, t))
 
-    dirs.layers.push(r(''))
+    dirs.src.push(r(''))
     dirs.pages.push(r(nuxt.options.dir.pages || 'pages'))
     dirs.layouts.push(r(nuxt.options.dir.layouts || 'layouts'))
     dirs.plugins.push(r(nuxt.options.dir.plugins || 'plugins'))