以下是 Vue3 + Vite + JavaScript 项目的 eslint.config.js 标准配置参考，基于 ESLint 9+ 最新扁平配置格式（ESLint 9 推荐，兼容 Vite 工程化流程），整合了 Vue 官方规则、Prettier 代码格式化（避免风格冲突）、Vite 生态适配，兼顾代码质量与开发效率。

一、前置依赖安装

先安装所需依赖（ESLint 核心 + Vue 插件 + Prettier 兼容插件）：

# 核心依赖
npm install eslint -D
# Vue 语法检测插件（适配 Vue3 SFC）
npm install eslint-plugin-vue -D
# 兼容 Prettier（避免 ESLint 与 Prettier 规则冲突）
npm install eslint-config-prettier eslint-plugin-prettier -D
# Prettier 核心（代码格式化）
npm install prettier -D

二、完整 eslint.config.js 配置

// eslint.config.js（ESLint 9+ 扁平配置格式）
import eslintPluginVue from 'eslint-plugin-vue'
import prettier from 'eslint-plugin-prettier'
import prettierConfig from 'eslint-config-prettier'

export default [
  // 1. 全局配置：指定环境、解析器选项
  {
    // 应用范围：所有文件
    files: ['**/*.js', '**/*.vue'],
    // 排除文件（无需检测的目录）
    ignores: [
      'node_modules/',
      'dist/',
      'public/',
      '*.config.js', // 忽略 Vite/构建配置文件（可选，若需检测可删除）
      'src/assets/'  // 忽略静态资源目录
    ],
    // 运行环境（告知 ESLint 代码运行在哪些环境，避免未定义变量报错）
    env: {
      browser: true, // 浏览器环境（window、document 等）
      node: true,    // Node 环境（require、module 等，Vite 构建时用到）
      es2021: true   // ES2021 语法支持（async/await、可选链等）
    },
    // 解析器选项（指定 JavaScript 版本和模块系统）
    parserOptions: {
      ecmaVersion: 'latest', // 支持最新 ES 语法
      sourceType: 'module',  // 模块类型（ES Modules，Vue3/Vite 默认）
      ecmaFeatures: {
        jsx: false // 若项目不用 JSX，设为 false；用则设为 true
      }
    }
  },

  // 2. Vue 单文件组件（.vue）专属配置
  {
    files: ['**/*.vue'],
    // 解析器：用 eslint-plugin-vue 自带的解析器，适配 Vue SFC 语法
    parser: 'vue-eslint-parser',
    // 解析器选项：.vue 文件中 <script> 标签的解析配置
    parserOptions: {
      parser: 'espree', // 解析 <script> 内 JavaScript 代码的解析器
      ecmaVersion: 'latest',
      sourceType: 'module'
    },
    // Vue 专属规则（基于官方推荐规则扩展）
    plugins: {
      vue: eslintPluginVue,
      prettier: prettier // 整合 Prettier 格式化规则
    },
    rules: {
      // 启用 Vue 官方推荐规则（优先级：自定义规则 > 官方推荐）
      ...eslintPluginVue.configs['flat/strongly-recommended'],
      // 整合 Prettier 规则（禁用 ESLint 中与 Prettier 冲突的格式规则）
      ...prettierConfig.rules,
      // 自定义 Vue 规则（根据项目需求调整）
      'vue/multi-word-component-names': 'off', // 关闭“组件名必须多单词”（单文件组件可禁用）
      'vue/script-setup-uses-vars': 'error',    // 强制 <script setup> 中声明的变量必须使用（避免无用变量）
      'vue/no-v-model-argument': 'off',        // 允许 v-model 带参数（Vue3 支持，如 v-model:value）
      'vue/attribute-hyphenation': 'error',    // 属性名强制连字符（如 :user-name 而非 :userName）
      'vue/require-prop-types': 'error',       // 强制 props 定义类型
      'vue/no-unused-props': 'warn',           // 未使用的 props 警告（而非报错，灵活度更高）
      'vue/avoid-v-if-with-v-for': 'warn',     // 避免 v-if 与 v-for 同用（性能隐患，警告提示）
      'prettier/prettier': 'error'             // 违反 Prettier 格式规则时报错
    }
  },

  // 3. JavaScript 文件（.js）专属配置
  {
    files: ['**/*.js'],
    // 插件：启用 Prettier 插件
    plugins: {
      prettier: prettier
    },
    rules: {
      // 基础 JavaScript 规则（基于 ES 官方推荐）
      ...prettierConfig.rules,
      // 自定义 JS 规则（根据项目需求调整）
      'no-console': 'warn',          // 禁止 console（开发时警告，上线前需清理）
      'no-debugger': 'error',        // 禁止 debugger（报错，避免上线遗漏）
      'no-unused-vars': ['warn', {   // 未使用的变量警告（允许下划线开头的变量未使用）
        varsIgnorePattern: '^_'
      }],
      'no-undef': 'error',           // 禁止使用未定义的变量（避免拼写错误）
      'semi': ['error', 'always'],   // 强制语句结尾加分号
      'quotes': ['error', 'single'], // 强制使用单引号（替代双引号）
      'indent': ['error', 2],        // 强制缩进 2 空格
      'space-before-function-paren': ['error', 'always'], // 函数括号前加空格（function fn () {}）
      'no-trailing-spaces': 'error', // 禁止行尾多余空格
      'eol-last': ['error', 'always'], // 强制文件末尾加空行
      'prettier/prettier': 'error'   // Prettier 格式规则报错
    }
  }
]

三、配套 Prettier 配置（.prettierrc）

创建 .prettierrc 文件，统一代码格式化规则（与 ESLint 配合使用）：

{
  "semi": true,          // 语句结尾加分号
  "singleQuote": true,   // 使用单引号
  "tabWidth": 2,         // 缩进 2 空格
  "trailingComma": "es5",// 数组/对象最后一项加逗号（ES5 兼容）
  "printWidth": 100,     // 每行最大长度 100 字符（超出自动换行）
  "arrowParens": "avoid",// 箭头函数单个参数时省略括号（(a) => {} → a => {}）
  "htmlWhitespaceSensitivity": "ignore" // HTML 空格不敏感（避免 Vue 模板换行报错）
}

四、package.json 脚本配置

在 package.json 中添加 ESLint 脚本，方便执行检测和自动修复：

{
  "scripts": {
    "lint": "eslint .", // 检测所有符合规则的文件
    "lint:fix": "eslint . --fix" // 自动修复可修复的错误（如格式问题、引号/缩进）
  }
}

五、关键配置说明（按需调整）

1. 规则优先级

• 自定义规则（rules 中配置）> 官方推荐规则（如 eslintPluginVue.configs['flat/strongly-recommended']）> 插件默认规则；
• 规则值说明："off"（禁用）、"warn"（警告，不阻断构建）、"error"（报错，阻断构建/提交）。

2. 常用规则调整建议

• 若项目允许单单词组件名（如 Home.vue）：保持 vue/multi-word-component-names: 'off'；
• 若开发环境需要保留 console.log：将 no-console 设为 "off" 或 "warn"；
• 若团队习惯无分号：将 semi 设为 ["error", "never"]，同时同步修改 .prettierrc 的 semi: false；
• 若使用 JSX（如 Vue3 + JSX）：在 ecmaFeatures 中设 jsx: true，并安装 @typescript-eslint/parser（即使不用 TS，JSX 解析需依赖）。

3. 忽略文件（.eslintignore）

若需额外忽略某些文件，可创建 .eslintignore 文件（语法同 .gitignore）：

# .eslintignore
src/utils/third-party.js # 忽略第三方工具库
src/views/legacy/**/*.js # 忽略旧代码目录

六、Vite 集成与开发工具配置

1. Vite 实时检测（可选）

安装 vite-plugin-eslint，在开发时实时检测代码错误：

npm install vite-plugin-eslint -D

修改 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    eslint({
      cache: false, // 关闭缓存（确保实时检测最新代码）
      include: ['src/**/*.js', 'src/**/*.vue'], // 检测范围
      exclude: ['node_modules/', 'dist/'] // 排除范围
    })
  ]
})

2. VS Code 实时提示与自动修复

安装 VS Code 插件：ESLint、Prettier - Code formatter，并在设置中开启自动修复：

// VS Code 设置（.vscode/settings.json）
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时自动修复 ESLint 可修复错误
  },
  "prettier.enable": true,
  "editor.formatOnSave": true, // 保存时自动格式化（Prettier）
  "eslint.validate": ["javascript", "vue"] // 启用对 JS 和 Vue 文件的检测
}

七、配置核心目标

1. 语法校验：拦截 Vue/JS 语法错误（如 v-for 漏 key、变量未定义）；
2. 风格统一：通过 ESLint + Prettier 强制统一缩进、引号、分号等格式；
3. 质量保障：检测无用变量、死代码、不规范用法（如直接修改 Vue props）；
4. 开发效率：自动修复大部分格式问题，减少手动调整成本。

八、常见问题排查

1. Vue 组件报错“parserOptions.parser 未配置”：确保 .vue 配置中 parser 设为 vue-eslint-parser，且 parserOptions.parser 设为 espree；
2. Prettier 与 ESLint 规则冲突：确保 eslint-config-prettier 和 eslint-plugin-prettier 已安装，且规则中包含 ...prettierConfig.rules 和 prettier/prettier: 'error'；
3. script setup 中变量未使用报错：启用 vue/script-setup-uses-vars: 'error'，确保声明的变量都被使用（或用 _ 前缀忽略）。

此配置适用于大多数 Vue3 + Vite + JS 项目，可根据团队编码规范调整 rules 部分，核心是保持“实用不苛刻”，既保证代码质量，又不增加过多开发负担。