Vue 团队开发常用工具介绍

最近在学习 vue3 的项目开发。发现很多开源的项目中都会使用到一些“规范性的工具”。

例如：

• Stylelint
• ESLint
• Prettier
• lint-staged
• …

初次接触这些工具时，可能会感到困惑，因为它们在项目中需要各种配置和依赖包的安装。

在小公司或个人开发中，这些工具可能不是必需的，开发者往往会选择最方便的方式。但这可能导致代码格式化不一致，甚至引入一些潜在的 BUG。

开发工作中约 80% 的时间都在阅读代码，因此保持统一的代码格式至关重要。最近在学习 Go 语言时，使用 VSCode+Go 插件或 Goland 开发时，保存时自动格式化的体验令人愉悦，这种全局代码风格统一的体验是多年 PHP 开发中未曾有过的。

本文将作为入门指南，介绍前端团队开发中常用的工具。

ESLint

ESLint 是一个开源的 JavaScript 代码检查工具，用于识别和报告代码中的问题模式，帮助开发者保持代码风格一致并避免潜在错误。

核心价值

• ​ 错误预防：​ 在运行前发现语法错误和潜在问题
• ​ 代码规范 ​： 强制执行团队约定的编码风格
• ​ 最佳实践 ​： 推广行业认可的最佳实践
• ​ 自动修复 ​： 支持自动修复部分问题（通过 –fix 选项）

Stylelint

Stylelint 是现代前端开发中不可或缺的样式表检查工具，专为 Css/Scss/Less 等预处理器设计，提供超过 170 条内置规则，可帮助团队维护一致的样式代码风格并避免错误。

核心特性

• ​ 多预处理器支持 ​： 原生支持 CSS/SCSS/Sass/Less/SugarSS
• ​ 可扩展规则 ​： 支持自定义规则和插件
• ​ 自动修复能力 ​： 通过 –fix 参数自动修复部分问题
• ​ 配置共享 ​： 支持通过 npm 包共享配置
• ​ 与构建工具集成 ​： 完美配合 webpack/Vite/Rollup 等工具

Prettier

Prettier 是当前前端领域最流行的代码格式化工具，它通过解析代码并重新打印的方式，强制实施一致的代码风格，彻底解决团队中的代码风格争论。

核心设计理念

• ​ 固执己见 ​： 提供极少的配置选项，减少风格争论
• ​ 多语言支持 ​： 支持 JavaScript/TypeScript/JSX/CSS/SCSS/HTML/Vue 等
• ​ 无视原始格式 ​： 完全按照配置重写代码
• ​ 集成友好 ​： 与主流编辑器和构建工具无缝集成

Commitlint

Commitlint 是一个用于强制执行规范化 Git 提交信息的工具，它通过验证 commit-msg 钩子确保每个提交都符合预定义的格式标准，是构建现代化 Git 工作流的关键组件。

核心价值

• ​ 标准化提交 ​： 强制采用约定式提交(Conventional Commits)规范
• ​ 自动化生成 ​： 为 CHANGELOG 和版本号提供结构化数据
• ​ 团队协作 ​： 统一团队提交信息风格，提升可读性
• ​ 流程集成 ​： 与 CI/CD 流程无缝对接，确保合规提交

Husky

Husky 是一个 Git 钩子工具，用于在 Git 操作前触发自定义脚本，如 lint、test 等。

核心功能

• ​ 拦截 Git 钩子 ​： 例如 pre-commit（提交前）、commit-msg（提交消息校验）、pre-push（推送前）。
• ​ 本地强制检查 ​： 确保代码提交前通过 ESLint、测试等验证，避免将问题代码推送到远程仓库。

lint-staged

lint-staged 仅对 Git 暂存区（staged）的文件运行指定的 lint 或格式化工具（如 ESLint、Prettier），避免全量检查整个项目，提升效率。

核心优势 ​：

• ​ 精准检查 ​： 只处理本次修改的文件，减少不必要的耗时。
• ​ 配合 Husky 使用 ​： 通常在 pre-commit 钩子中触发。

PSE 三剑客的分工合作

Prettier、Stylelint、ESLint 这三个工具就像是一个代码质检团队的三个不同岗位，各司其职又互相配合：

三个工具的分工

ESLint - 代码"语文老师"

主要工作： 检查 JavaScript/TypeScript/Vue 代码的语法错误和代码风格

关注重点：

• 变量是否定义就使用
• 是否有未使用的变量
• 代码是否符合最佳实践
• 团队约定的命名规范（如驼峰命名）

特点： 会指出代码中的潜在问题，有些还能自动修复

Stylelint - 样式"美术老师"

主要工作： 检查 Css/Scss/Less 等样式代码的语法错误和代码风格

关注重点：

• 颜色值是否用错了格式（该用十六进制用了 rgb）
• 重复的样式定义
• 属性书写顺序（如定位属性应该写在一起）
• 浏览器兼容性问题

特点： 保证样式代码整洁美观，避免低级错误

Prettier - 代码"排版师傅"

主要工作： 不管代码逻辑，只管代码外观排版

关注重点：

• 该缩进的地方有没有缩进
• 该换行的地方有没有换行
• 引号用单引号还是双引号
• 行末要不要加分号

特点： 简单粗暴，直接按规则重新排版代码

它们怎么合作

工作顺序

​Prettier​ 先出手：把代码排版整得漂漂亮亮

​ESLint/Stylelint​ 再检查：在漂亮排版的基础上找代码问题

避免打架的秘诀

​ 用 eslint-config-prettier​：告诉 ESLint “排版的事让 Prettier 管，你别插手”

​ 用 stylelint-config-prettier​：同样告诉 Stylelint “样式排版让 Prettier 来”

实际工作场景

当你在编辑器按保存时：

1. Prettier 先自动格式化代码（改排版）
2. ESLint 接着检查代码问题（改逻辑）
3. Stylelint 检查样式问题（改样式）
4. 最后生成一份又规范又漂亮的代码

举个栗子

假设有一段很丑的代码：

function test() {
const a = 1;console.log("hello");
}

Prettier 处理后 ​：

function test() {
  const a = 1;
  console.log("hello");
}

ESLint 接着检查 ​：

• 可能会提示：“a 变量定义了但没使用”
• 可能会建议：“console.log 不应该提交到生产环境”

最终结果 ​：

function test() {
  const a = 1;
  console.log("hello"); // eslint-disable-line no-console
}