Vue 教程：使用 ESLint 与 Prettier 打造团队统一的代码风格

在 Vue 团队协作开发中，代码风格不统一是常见的痛点，会导致代码审查困难、合并冲突频繁。ESLint 负责检查代码质量并发现潜在错误，Prettier 则专注于代码格式化，两者结合能强制团队遵循一致的编码规范。本教程适用于使用 Vue 3 与 Vite 构建工具的项目，前置环境要求是已安装 Node.js 20.19.0 或更高版本，并熟悉基本的命令行操作。

核心概念与原理

ESLint 是一个可配置的静态代码检查工具，通过解析代码为抽象语法树（AST）来识别不符合规则的写法，例如未使用的变量或潜在的错误。Prettier 则是一个固执己见的代码格式化器，它不关心代码逻辑，只负责统一代码的排版风格，如缩进、引号和分号。在团队中，通常将 ESLint 用于捕捉错误，而将 Prettier 用于统一风格，两者配合使用，形成“检查-修复-格式化”的工作流。

实战步骤与代码

首先，使用 Vue 官方的脚手架工具创建一个新项目。在命令行中运行以下命令，并根据提示选择是否启用 ESLint 与 Prettier 支持：

# 使用 npm 创建项目
npm create vue@latest
进入项目目录
cd your-project-name
安装依赖
npm install

在创建过程中，当出现 Add ESLint for code quality? 和 Add Prettier for code formatting? 的提示时，选择 Yes。脚手架会自动安装并配置好相关的依赖和基础规则文件。

接下来，在项目根目录下会生成 .eslintrc.cjs 和 .prettierrc.json 文件。你可以根据团队规范修改 .prettierrc.json 来定制格式化规则，例如设置单引号和行宽：

{ "singleQuote": true, "semi": false, "trailingComma": "none" }

在 package.json 的 scripts 部分，通常会包含以下命令用于检查和格式化代码：

{ "scripts": { "lint": "eslint . --fix", "format": "prettier --write \"src/**/*.{js,vue}\"" } }

运行 npm run lint 可以自动修复代码中的风格问题，运行 npm run format 则会将 src 目录下的所有 JavaScript 和 Vue 文件按照 Prettier 规则格式化。

常见坑点与优化

一个常见的坑点是 ESLint 与 Prettier 的规则冲突。例如，ESLint 默认要求使用双引号，而 Prettier 配置为单引号，这会导致格式化后仍然报错。解决方法是安装 eslint-config-prettier 来关闭 ESLint 中与 Prettier 冲突的规则，并在 .eslintrc.cjs 中将其添加到 extends 数组的最后。

另一个建议是将代码检查集成到 Git 提交钩子中，使用 lint-staged 工具，这样每次提交前只对暂存区的文件进行检查和格式化，可以显著提升性能并保证提交的代码都是符合规范的。