Nuxt3中如何启用模板属性顺序校验？原Nuxt2默认具备该功能

Nuxt2默认的模板属性顺序校验依赖eslint-plugin-vue的vue/attributes-order规则，Nuxt3中该规则默认未启用，可通过以下步骤恢复：

1. 安装必要依赖 #

执行命令安装ESLint及相关插件、Nuxt集成模块：

npm install eslint eslint-plugin-vue @nuxtjs/eslint-config @nuxtjs/eslint-module --save-dev
# 或用pnpm/yarn
pnpm add eslint eslint-plugin-vue @nuxtjs/eslint-config @nuxtjs/eslint-module -D

2. 配置ESLint规则 #

在项目根目录创建或修改.eslintrc.js，启用并自定义属性顺序规则：

module.exports = {
  extends: [
    '@nuxtjs/eslint-config',
    'plugin:vue/vue3-essential' // 可选：vue3-strongly-recommended 或 vue3-recommended
  ],
  rules: {
    'vue/attributes-order': [
      'error', // 设为warn则只提示警告
      {
        order: [
          'DEFINITION', // v-for、v-if 这类定义性指令
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL', // id、ref 这类全局属性
          'UNIQUE', // key 这类唯一标识属性
          'BINDING', // v-bind 绑定属性
          'EVENTS', // v-on 事件属性
          'CONTENT', // v-text、v-html 内容属性
          'OTHER_ATTR' // 其他剩余属性
        ],
        alphabetical: false // 可设为true开启同组属性字母排序
      }
    ]
  }
}

3. 配置Nuxt3启用ESLint #

修改nuxt.config.ts，让ESLint在开发和构建阶段生效：

export default defineNuxtConfig({
  modules: ['@nuxtjs/eslint-module'],
  eslint: {
    lintOnStart: true, // 项目启动时自动校验
    include: ['**/*.vue', '**/*.ts', '**/*.js'] // 指定需要校验的文件类型
  }
})

4. 验证功能 #

启动Nuxt3项目后，若模板中属性顺序不符合规则，ESLint会立即抛出错误（或警告），效果与Nuxt2一致。

内容的提问来源于stack exchange，提问作者Cyril N.