如何在Nuxt 3中配置ESLint与Prettier？现有配置未生效如何解决

你当前安装的依赖存在版本不兼容、功能重复问题：@nuxtjs/eslint-module@3 仅适配Nuxt2，vite-plugin-eslint 和 @nuxtjs/eslint-module 功能重复会互相冲突，eslint-plugin-vue@7 不支持Vue3/Nuxt3语法。
执行以下命令调整依赖：

# 卸载不兼容/冲突包
npm uninstall @nuxtjs/eslint-module@3 eslint-plugin-vue@7 vite-plugin-eslint
# 安装适配Nuxt3的正确依赖
npm install -D @nuxtjs/eslint-module@latest eslint-plugin-vue@latest

调整后package.json的devDependencies核心相关字段如下：

{
  "devDependencies": {
    "@intlify/nuxt3": "^0.2.5",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "eslint": "^8.50.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.17.0",
    "nuxt3": "latest",
    "prettier": "3.0.3",
    "sass": "^1.69.0"
  }
}

你原有配置缺少解析器、运行环境等必填项，完整配置如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  extends: [
    'eslint:recommended',
    'plugin:nuxt/recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: {
    // 可自定义规则，比如关闭不需要的校验
    'vue/no-multiple-template-root': 'off'
  }
}

Nuxt3已经废弃buildModules配置项，所有模块统一放在modules数组中，同时移除冲突的vite eslint插件配置：

export default defineNuxtConfig({
  // 所有模块统一写到modules数组
  modules: ['@intlify/nuxt3', '@nuxtjs/eslint-module'],
  // 如需配置i18n，可在这里加intlify配置项
  intlify: {
    localeDir: 'locales',
    vueI18n: {
      locale: 'zh-CN',
      fallbackLocale: 'en'
    }
  },
  eslint: {
    // 配置开发启动时就执行校验
    lintOnStart: true,
    failOnError: false // 开发阶段可设为false，不阻断编译流程
  }
})

• 完全关闭当前开发服务，重新执行npm run dev启动
• 故意在代码中写一段不符合规则的内容（比如定义未使用的变量），查看终端是否输出ESLint校验提示
• 若使用VS Code开发，需安装ESLint插件，并在右下角授权ESLint运行权限

内容的提问来源于stack exchange，提问作者NonOrganicCreature