首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue中ESLint与Prettier配置

Vue项目中ESLint(代码质量检查)与Prettier(代码格式化)配合配置指南

2026-02-27 10:29:22 作者：Ddddk123_

ESLint是js代码的质量检查工具,同时也具备一定的代码风格的格式化能力,Prettier是一个代码风格的约束工具,能约束JS、JSX、TypeScript、Vue等代码风格,这篇文章主要介绍了Vue项目中ESLint(代码质量检查)与Prettier(代码格式化)配合配置的相关资料,需要的朋友可以参考下

前言

基于 pnpm 创建 Vue 项目，通过针对性配置实现 ESLint（代码质量检查）与 Prettier（代码格式化）协同工作，避免规则冲突，达成 “保存即自动修复格式与质量问题” 的效果。

一、项目创建与依赖准备

1. 用 pnpm 创建 Vue 项目

执行创建命令，过程中需选择 ESLint 和 Prettier 相关选项（避免后续手动补装基础依赖）：

pnpm create vue@latest

创建时的关键选择（按需求确认）：

✅ Add ESLint for code quality? → Yes
✅ Add Prettier for code formatting? → Yes
其他选项（如 Pinia、Vue Router）按需选择，不影响 ESLint/Prettier 配合

2. 检查并补全依赖

项目创建后，进入目录安装依赖，同时确保关键依赖已存在（若创建时未选全，需手动安装）：

cd 项目目录
pnpm install
# 补装缺失的依赖（如 eslint-plugin-prettier，一般会缺失此依赖）
pnpm add -D eslint-plugin-prettier

最终 package.json 中需包含的核心依赖（确认 devDependencies 字段）：

"devDependencies": {
  "@eslint/js": "^9.37.0",        // ESLint 基础规则
  "@vue/eslint-config-prettier": "^10.2.0", // Vue 专用：解决 ESLint 与 Prettier 冲突
  "eslint": "^9.37.0",            // ESLint 核心工具
  "eslint-plugin-prettier": "^5.5.4", // 关键：将 Prettier 规则转为 ESLint 可识别错误
  "eslint-plugin-vue": "~10.5.0", // Vue 专用 ESLint 插件
  "prettier": "3.6.2",            // Prettier 核心工具
  "vite": "^7.1.11"               // 项目构建工具（创建时自带）
}

package.json 中的关键脚本（确保 scripts 字段包含）：

"scripts": {
  "lint": "eslint . --fix --cache", // 手动执行 ESLint 修复（格式+质量问题）
  "format": "prettier --write src/"  // 手动执行 Prettier 格式化（备用）
}

二、核心配置文件：实现 ESLint 与 Prettier 协同

需配置 3 类文件：ESLint 配置文件、Prettier 规则文件、VSCode 全局 / 工作区配置。

1. ESLint 配置文件：eslint.config.js（项目根目录）

作用：定义 ESLint 规则，整合 Prettier 规则，解决 Vue 项目特有的规则冲突。完整配置代码（关键配置已标注说明）：

import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' // 禁用 ESLint 与 Prettier 冲突的规则
import prettier from 'eslint-plugin-prettier' // 引入 Prettier 插件（将 Prettier 规则转为 ESLint 错误）

export default defineConfig([
  // 1. 指定需要检查的文件类型
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'], // 检查 JS、Vue 文件
  },

  // 2. 忽略无需检查的目录（如构建产物、测试报告）
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  // 3. 语言环境配置（浏览器全局变量）
  {
    languageOptions: {
      globals: {
        ...globals.browser, // 允许使用 window、document 等浏览器全局变量
      },
    },
  },

  // 4. 基础规则：ESLint 官方推荐规则（通用 JS 质量检查）
  js.configs.recommended,

  // 5. Vue 基础规则：Vue 官方推荐的核心规则（如模板语法校验）
  ...pluginVue.configs['flat/essential'],

  // 6. 关键：整合 Prettier 规则（将 Prettier 格式问题转为 ESLint 错误，支持 --fix 修复）
  {
    plugins: { prettier }, // 启用 Prettier 插件
    rules: {
      'prettier/prettier': 'error', // 把 Prettier 格式问题标记为 ESLint 错误
    },
  },

  // 7. 关键：解决 ESLint 与 Prettier 规则冲突（如缩进、引号规则冲突）
  skipFormatting,

  // 8. 自定义 Vue 规则（示例：允许单单词组件名，如 index.vue）
  {
    rules: {
      'vue/multi-word-component-names': 'off', // 关闭“组件名必须多单词”检查
      // 可添加其他 ESLint 规则，如禁止使用 var：'no-var': 'error'
    }
  }
])

2. Prettier 规则文件：`.prettierrc.json`（项目根目录）

作用：定义代码格式化规则（如引号、缩进、分号），ESLint 会读取此文件的规则。常用配置代码（可按需调整）：

{
  "$schema": "https://json.schemastore.org/prettierrc", // 引入 Prettier 规则 schema（语法提示）
  "semi": false, // 语句末尾不加分号
  "singleQuote": true, // 使用单引号代替双引号
  "printWidth": 100, // 每行代码最大宽度（超过自动换行）
  "tabWidth": 2, // 缩进为 2 个空格
  "trailingComma": "none", // 对象/数组末尾不添加逗号
  "arrowParens": "avoid" // 箭头函数参数只有一个时，省略括号（如 (a) => {} → a => {}）
}

后续需新增格式化规则（如换行符、空格），直接在此文件添加即可。

3. VSCode 配置文件：settings.json（工作区或全局）

作用：指定 VSCode 编辑器的格式化工具、保存行为，确保与项目配置对齐，避免插件冲突。完整配置代码（关键配置已标注，保留用户原有非冲突配置）：

{
  // ---------------------- 原有非冲突配置（保留）----------------------
  "Codegeex.Privacy": true,
  "explorer.confirmDelete": false,
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 17,
  "editor.tabSize": 2,
  "editor.formatOnPaste": true,
  "github.copilot.enable": { "*": false },
  "editor.minimap.enabled": false,
  // ... 其他原有配置（如 LeetCode、DrawIO 相关）保留不变

  // ---------------------- ESLint 与 Prettier 核心配置 ----------------------
  // 1. 全局默认格式化器设为 ESLint（确保所有文件用 ESLint 格式化）
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // 2. 单独指定 Vue/JS 文件的格式化器（优先级高于全局，避免工具冲突）
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 3. 保存时：触发 ESLint 自动修复（格式问题+代码质量问题）
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 4. 保存时：触发 ESLint 格式化器的完整逻辑（补充修复细节，与上一条互补）
  "editor.formatOnSave": true,
  // 5. 禁用 Prettier 插件的自动功能（双重保险，避免与 ESLint 冲突）
  "prettier.enable": false
}

配置位置说明：

工作区配置（推荐）：在项目根目录创建 .vscode/settings.json，仅对当前项目生效；
全局配置：通过 VSCode 菜单「文件 → 首选项 → 设置 → 打开设置 (JSON)」，对所有项目生效。

三、VSCode 插件管理：避免工具冲突

1. 必须安装的插件

ESLint（作者：Microsoft）：执行 ESLint 规则检查与自动修复，是协同工作的核心插件。

2. 必须禁用的插件

Prettier - Code formatter（作者：Prettier）：原因：项目已通过 ESLint 整合 Prettier 规则，该插件启用后可能通过手动操作（如右键 “格式化文档”）触发冲突，导致格式来回切换。操作：在 VSCode 「扩展」面板找到该插件，点击「禁用」（无需卸载，后续非项目场景可临时启用）。

四、配置验证：确保 ESLint 与 Prettier 正常配合

完成配置后，通过以下步骤验证效果：

1. 验证格式化规则（Prettier 规则生效）

在 Vue 文件（如 App.vue）中写入不符合 Prettier 规则的代码：

<template>
  <div id="app" > <!-- 双引号（应转为单引号）、多余空格 -->
    {{ msg }}
  </div>
</template>

按 Ctrl+S 保存文件，观察代码是否自动修复：
- 双引号 "app" → 单引号 'app'（符合 .prettierrc.json 的 singleQuote: true）；
- 多余空格被删除（符合 Prettier 默认空格规则）。

2. 验证代码质量规则（ESLint 规则生效）

在 JS 文件（如 main.js）中写入不符合 ESLint 规则的代码：

var test = 123; // var 关键字（ESLint 禁止使用 var）
console.log(test);

按 Ctrl+S 保存，观察代码是否自动修复：
- var test → let test（符合 ESLint 核心规则 no-var: error）；
- 若未自动修复，执行 pnpm lint 命令，手动触发修复。

3. 验证 Vue 专用规则（eslint-plugin-vue 生效）

在 Vue 组件（如 components/HelloWorld.vue）中写入不符合 Vue 规则的代码：
```
<template>
  <div>{{ undefinedVar }}</div> 
</template>
```
观察 VSCode 是否提示错误（红色波浪线），执行 pnpm lint 命令，终端会报错提示 “未定义变量”（需手动修改代码解决，ESLint 无法自动修复逻辑错误）。

五、常见问题与解决方案

问题现象	可能原因	解决方案
保存时双引号未转为单引号	1. `.prettierrc.json` 未配置 `singleQuote: true`；2. VSCode 格式化器未设为 ESLint	1. 检查 `.prettierrc.json`，确保 `singleQuote: true`；2. 检查 `settings.json`，确保 `editor.defaultFormatter` 为 `dbaeumer.vscode-eslint`
执行 `pnpm lint` 无反应	1. `eslint.config.js` 未指定检查文件；2. 依赖未安装完整	1. 检查 `eslint.config.js` 的 `files` 字段，确保包含 `*/.{js,vue}`；2. 重新执行 `pnpm install`，确保 `eslint-plugin-prettier` 已安装
Vue 单单词组件名（如 `index.vue`）报错	`eslint.config.js` 未关闭 `vue/multi-word-component-names` 规则	在 `eslint.config.js` 的 `rules` 中添加 `"vue/multi-word-component-names": "off"`

六、核心逻辑总结

ESLint 与 Prettier 完美配合的核心是 “让 ESLint 接管 Prettier 的格式化工作”，避免工具冲突：

规则来源：Prettier 格式化规则写在 .prettierrc.json，ESLint 代码质量规则写在 eslint.config.js；
协同桥梁：eslint-plugin-prettier 将 Prettier 规则转为 ESLint 可识别的错误，@vue/eslint-config-prettier 解决两者规则冲突；
编辑器触发：VSCode 通过 settings.json 配置，让保存时自动触发 ESLint 修复，实现 “格式 + 质量” 一键搞定。

到此这篇关于Vue项目中ESLint(代码质量检查)与Prettier(代码格式化)配合配置的文章就介绍到这了,更多相关Vue中ESLint与Prettier配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！