治愈你的代码“洁癖”：为什么每个团队都必须上 ESLint + Prettier + Husky？

大家好,我是Petter Guo

一位热爱探索的全栈工程师。在这里，我将分享个人的Technical essentials，带你玩转前端、后端到 DevOps 的硬核技术，解锁AI，助你打通技术任督二脉，成为真正的全能玩家!！

如果对你有帮助, 请点赞+ 收藏 +关注鼓励下, 学习公众号为 全栈派森。

最近搭建Nuxt基建, 同事强烈要求加入Eslint + Prettier, 我也非常赞同, 虽然项目急, 但是该有的规范还是要有的, 同时也分享一下心得, 希望对你有帮助; 🍊🍊 !

作为一名开发者，你是否经历过以下“血压飙升”的瞬间：

• 接手同事的代码，发现缩进一会儿是 2 个空格，一会儿是 4 个空格，甚至还有 Tab 混入其中？
• Code Review 时，大家在“加不加分号”、“单引号还是双引号”这种问题上争论了半小时，却忽略了真正的逻辑漏洞？
• 有人提交了含有 console.log 的调试代码，甚至把导致报错的语法错误推到了生产分支？

如果你对上述场景感到窒息，恭喜你，你拥有一种优秀程序员必备的特质——代码洁癖。

今天，我想聊聊前端工程化中的“三剑客”：ESLint + Prettier + Husky。它们不仅仅是工具，更是治疗代码混乱、提升团队幸福感的“特效药”。

---

🧐 它们到底是谁？（通俗版）

很多新手容易混淆它们，我们可以这样理解：

1. ESLint —— “严厉的教导主任” (Code Quality)

   • 管质量： 它负责检查语法错误和代码质量。比如：定义了变量没使用、使用了未定义的变量、不能使用 var、React Hooks 依赖缺失等。
   • 口头禅：“这行逻辑有 Bug 隐患，给我改！”

2. Prettier —— “强迫症装修工” (Code Formatting)

   • 管颜值： 它只负责长什么样。不管你逻辑对不对，它只管你是否换行、是否加分号、一行最长多少字符。
   • 口头禅：“我不管你写的是什么，反正都要穿上我设计的制服，整整齐齐！”

3. Husky (+ lint-staged) —— “铁面无私的门卫” (Git Hooks)

   • 管准入： 它是 Git 的钩子。当你敲下 git commit 时，它会拦住你：“嘿，兄弟，先让上面那两位检查一下，不合格不准进仓库！”
   • 口头禅：“想把垃圾代码提交上来？没门！”

---

🚀 为什么要“强行”引入这套体系？

很多团队觉得：“项目能跑就行，搞这些花里胡哨的配置浪费时间。” 大错特错！ 引入这套体系，带来的收益是巨大的：

1. 终结“无效内卷”，聚焦业务逻辑

现状： 在没有规范的团队，Code Review (CR) 往往会变成“找茬大会”。

• Reviewer A: “这里花括号换个行吧。”
• Reviewer B: “字符串用单引号吧。”
• Author: “我就喜欢双引号...”

改变： 有了 Prettier，所有格式问题全自动解决。CR 的时候，大家不再看格式，只看架构设计、边界条件、业务逻辑。

收益：CR 效率提升 50%，不再为鸡毛蒜皮的小事扯皮。

2. 拯救强迫症，降低认知负荷

代码是给人看的，顺便给机器运行。 阅读一段格式混乱的代码，就像阅读一篇没有标点、字体忽大忽小的文章，非常消耗脑力。 统一的风格意味着**“可预测性”**。当你打开任何一个文件，长得都像你自己写的一样，你的大脑不需要去适应不同的编码风格，可以瞬间进入心流状态。

收益：阅读代码不累了，维护心情变好了。

3. 规避低级错误，守住质量底线

人是会犯错的，但机器不会。

• ESLint 可以帮你发现 if (a = b) 这种手抖写错的赋值操作。
• Husky 可以在你提交前拦截 debugger 或 console.log。
• 防止因为某人 IDE 配置不同，导致一个文件提交后所有行都产生了 Diff（行尾序列 CRLF vs LF 问题）。

收益：减少线上 Bug，避免“脏代码”污染 Git 历史。

4. 新人友好的最佳实践

新同事入职，不需要熟读几千字的《团队代码开发规范文档》，也不需要老员工手把手教格式。 他只需要运行 npm run lint，终端就会告诉他哪里不符合规范；保存文件，代码自动变整齐。工具就是最好的导师。

收益：降低入职门槛，快速融入团队开发流。

---

✨ 极致的开发体验是怎样的？

想象一下配置好这套体系后的工作流：

1. 写代码： 你在编辑器里随心所欲地写逻辑，不用管缩进，不用管分号，甚至可以写成一行。
2. Ctrl + S（保存）：
   • ⚡️ Prettier 介入： 瞬间，代码自动格式化，缩进对齐了，引号统一了，过长的行自动折行了。看着代码在屏幕上跳动归位，那种爽感简直无法言喻！
   • ⚡️ ESLint 介入： 自动修复了可以修复的错误（如 let 变 const），无法修复的标红提示。
3. Git Commit：
   • 🛑 Husky 拦截： 自动检测暂存区的代码。
   • ✅ Lint-staged 执行： 只检查你修改的那几个文件（速度极快）。
   • 🎉 通过： 代码成功提交，你的仓库永远保持着博物馆级的整洁。

---

📝 总结

有人说，代码洁癖是一种病。 但在软件工程领域，代码洁癖是一种职业素养。

• ESLint 给了我们底气（代码是健壮的）；
• Prettier 给了我们面子（代码是漂亮的）；
• Husky 给了我们保障（不会有漏网之鱼）。

这不仅仅是为了让代码“好看”，更是为了让团队协作更顺畅，让系统维护更长久。 如果你的项目还没加上这套“三剑客”，不妨今天就动手试一试。相信我，一旦习惯了这种“丝滑”的开发体验，你就再也回不去了。

Less Formatting, More Coding. Happy Hacking! 🚀