feat(eslint-plugin): new nuxt-config-keys-order rule (#491)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: antfu

docs/nuxt.config.ts

@@ -1,14 +1,6 @@
 export default defineNuxtConfig({
   extends: '@nuxt/ui-pro',
 
-  routeRules: {
-    '/guide': { redirect: '/guide/getting-started' },
-  },
-
-  site: {
-    url: 'https://eslint.nuxt.com',
-  },
-
   modules: [
     '@nuxt/image',
     '@nuxt/content',
@@ -20,6 +12,18 @@ export default defineNuxtConfig({
     'nuxt-og-image',
   ],
 
+  $production: {
+    nitro: {
+      experimental: {
+        wasm: true,
+      },
+    },
+  },
+
+  site: {
+    url: 'https://eslint.nuxt.com',
+  },
+
   colorMode: {
     preference: 'dark',
   },
@@ -28,6 +32,12 @@ export default defineNuxtConfig({
     icons: ['heroicons', 'simple-icons', 'ph'],
   },
 
+  routeRules: {
+    '/guide': { redirect: '/guide/getting-started' },
+  },
+
+  compatibilityDate: '2024-09-01',
+
   nitro: {
     prerender: {
       routes: ['/api/search.json'],
@@ -46,14 +56,4 @@ export default defineNuxtConfig({
       }
     },
   },
-
-  $production: {
-    nitro: {
-      experimental: {
-        wasm: true,
-      },
-    },
-  },
-
-  compatibilityDate: '2024-09-01',
 })

packages/eslint-config/src/flat/configs/nuxt.ts

@@ -15,10 +15,17 @@ export default function nuxt(options: NuxtESLintConfigOptions): Linter.Config[]
     ...(dirs.components?.map(componentsDir => join(componentsDir, `**/*.server.${GLOB_EXTS}`)) || []),
   ].sort()
 
+  const {
+    sortConfigKeys = !!(options.features?.stylistic),
+  } = options.features?.nuxt || {}
+
   const configs: Linter.Config[] = []
 
   configs.push({
-    name: 'nuxt/configs',
+    name: 'nuxt/setup',
+    plugins: {
+      nuxt: nuxtPlugin,
+    },
     languageOptions: {
       globals: {
         // Nuxt's runtime globals
@@ -38,13 +45,22 @@ export default function nuxt(options: NuxtESLintConfigOptions): Linter.Config[]
 
   configs.push({
     name: 'nuxt/rules',
-    plugins: {
-      nuxt: nuxtPlugin,
-    },
     rules: {
       'nuxt/prefer-import-meta': 'error',
     },
   })
 
+  if (sortConfigKeys) {
+    configs.push({
+      name: 'nuxt/sort-config',
+      files: [
+        '**/nuxt.config.?([cm])[jt]s?(x)',
+      ],
+      rules: {
+        'nuxt/nuxt-config-keys-order': 'error',
+      },
+    })
+  }
+
   return configs
 }

packages/eslint-config/src/flat/types.ts

@@ -23,6 +23,15 @@ export interface ToolingOptions {
   jsdoc?: boolean
 }
 
+export interface NuxtSpecificOptions {
+  /**
+   * Sort keys in nuxt.config to maintain a consistent order
+   *
+   * @default true when `features.stylistic` is enabled
+   */
+  sortConfigKeys?: boolean
+}
+
 export interface NuxtESLintFeaturesOptions {
   /**
    * Setup basic JavaScript, TypeScript and Vue plugins and rules.
@@ -49,6 +58,11 @@ export interface NuxtESLintFeaturesOptions {
    */
   stylistic?: boolean | StylisticCustomizeOptions<true>
 
+  /**
+   * Options for Nuxt specific rules
+   */
+  nuxt?: NuxtSpecificOptions
+
   /**
    * Enable TypeScript support. Can also be an object to config the options.
    *

packages/eslint-config/src/flat/utils.ts

@@ -34,6 +34,7 @@ export function resolveOptions(
       stylistic: false,
       typescript: isPackageExists('typescript'),
       tooling: false,
+      nuxt: {},
       ...config.features,
     },
     dirs,

packages/eslint-config/test/__snapshots__/flat-compose.test.ts.snap

@@ -57,7 +57,7 @@ exports[`flat config composition > custom src dirs 1`] = `
     "name": "nuxt/import/rules",
   },
   {
-    "name": "nuxt/configs",
+    "name": "nuxt/setup",
   },
   {
     "files": [
@@ -148,7 +148,7 @@ exports[`flat config composition > empty 1`] = `
     "name": "nuxt/import/rules",
   },
   {
-    "name": "nuxt/configs",
+    "name": "nuxt/setup",
   },
   {
     "files": [
@@ -185,7 +185,7 @@ exports[`flat config composition > empty 1`] = `
 exports[`flat config composition > non-standalone 1`] = `
 [
   {
-    "name": "nuxt/configs",
+    "name": "nuxt/setup",
   },
   {
     "files": [
@@ -218,3 +218,103 @@ exports[`flat config composition > non-standalone 1`] = `
   },
 ]
 `;
+
+exports[`flat config composition > with stylistic 1`] = `
+[
+  {
+    "ignores": [
+      "**/node_modules",
+      "**/*.iml",
+      "**/.idea",
+      "**/*.log",
+      "**/.nuxt",
+      "**/.output",
+      "**/.yarn/cache",
+      "**/.yarn/*state*",
+      "**/dist",
+      "**/.eslintcache",
+    ],
+    "name": "gitignore",
+  },
+  {
+    "ignores": [
+      "**/dist",
+      "**/node_modules",
+      "**/.nuxt",
+      "**/.output",
+      "**/.vercel",
+      "**/.netlify",
+      "**/public",
+    ],
+  },
+  {
+    "name": "nuxt/javascript",
+  },
+  {
+    "name": "nuxt/typescript/setup",
+  },
+  {
+    "files": [
+      "**/*.ts",
+      "**/*.tsx",
+      "**/*.mts",
+      "**/*.cts",
+      "**/*.vue",
+    ],
+    "name": "nuxt/typescript/rules",
+  },
+  {
+    "name": "nuxt/vue/setup",
+  },
+  {
+    "files": [
+      "**/*.vue",
+    ],
+    "name": "nuxt/vue/rules",
+  },
+  {
+    "name": "nuxt/import/rules",
+  },
+  {
+    "name": "nuxt/setup",
+  },
+  {
+    "files": [
+      "app/components/**/*.server.{js,ts,jsx,tsx,vue}",
+      "app/layouts/**/*.{js,ts,jsx,tsx,vue}",
+      "app/pages/**/*.{js,ts,jsx,tsx,vue}",
+      "components/**/*.server.{js,ts,jsx,tsx,vue}",
+      "layouts/**/*.{js,ts,jsx,tsx,vue}",
+      "pages/**/*.{js,ts,jsx,tsx,vue}",
+    ],
+    "name": "nuxt/vue/single-root",
+  },
+  {
+    "name": "nuxt/rules",
+  },
+  {
+    "files": [
+      "**/nuxt.config.?([cm])[jt]s?(x)",
+    ],
+    "name": "nuxt/sort-config",
+  },
+  {
+    "name": "nuxt/stylistic",
+  },
+  {
+    "files": [
+      "app.{js,ts,jsx,tsx,vue}",
+      "app/app.{js,ts,jsx,tsx,vue}",
+      "app/components/*/**/*.{js,ts,jsx,tsx,vue}",
+      "app/error.{js,ts,jsx,tsx,vue}",
+      "app/layouts/**/*.{js,ts,jsx,tsx,vue}",
+      "app/pages/**/*.{js,ts,jsx,tsx,vue}",
+      "components/*/**/*.{js,ts,jsx,tsx,vue}",
+      "error.{js,ts,jsx,tsx,vue}",
+      "layouts/**/*.{js,ts,jsx,tsx,vue}",
+      "pages/**/*.{js,ts,jsx,tsx,vue}",
+    ],
+    "name": "nuxt/disables/routes",
+  },
+]
+`;

packages/eslint-config/test/flat-compose.test.ts

@@ -43,4 +43,15 @@ describe('flat config composition', () => {
     expect(getFlatConfigDigest(configs))
       .toMatchSnapshot()
   })
+
+  it('with stylistic', async () => {
+    const configs = await createConfigForNuxt({
+      features: {
+        stylistic: true,
+      },
+    })
+
+    expect(getFlatConfigDigest(configs))
+      .toMatchSnapshot()
+  })
 })

packages/eslint-plugin/src/rules/index.ts

@@ -1,5 +1,7 @@
 import { rule as preferImportMetaRule } from './prefer-import-meta'
+import { rule as nuxtConfigOrderKeysRule } from './nuxt-config-keys-order'
 
 export default {
   'prefer-import-meta': preferImportMetaRule,
+  'nuxt-config-keys-order': nuxtConfigOrderKeysRule,
 }