团队协作开发软件,落实代码规范、统一风格等是非常关键的基础性工作,因为团队成员水平不同、习惯不同(比如有的同事不对代码进行起码的排版,格式非常混乱)以及对**“什么样的代码是可读性高的,是好维护的”**的认识不同,更有必要落实代码规范。
再者,js 是动态弱类型语言,非常灵活,同一个功能,很多种写法,又因为历史遗留问题,存在一些非常怪异的特性,通过代码规范来避免使用 js 怪异的语法是业界普遍做法,比如 京东前端代码规范、vue 团队 vue 组件代码规范
比如,有同事习惯不好,不对代码进行起码的排版,一人写的代码,都有几种风格:
怪异的 this 指向:
比如下面的一段 vue2 组件内的代码,两个 setTimeout 看上去差不多,但是 this 指向完全不同:
{
methods: {
addIn(step = 1) {
countIn.value += step
// this 当前组件实例
console.log({ this: this, mouseX: this.mouseX.value, mouseY: this.mouseY.value })
this.helloThis()
setTimeout(() => {
console.log({
// this 当前组件实例
this: this,
mouseX: this.mouseX?.value,
mouseY: this.mouseY?.value,
})
}, 100)
setTimeout(function () {
console.log({
// this 指向 Window 浏览器窗口
this: this,
mouseX: this.mouseX?.value,
mouseY: this.mouseY?.value,
})
}, 100)
},
},
}再如 奇怪的 ==:
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n' == 0 // true更加详尽的阐述 --- Javascript的10个设计缺陷
以上问题和其他问题,在公司的前端项目是普遍存在的,至少我参与的三四个项目,都有。
正因为以上诸多原因,在团队开发中有规范指导,就非常关键,是业界普遍做法,**规范不是枷锁,而是翅膀,让你自由飞翔,能保证你专注于代码逻辑,而不用害怕不小心引入意外的 bug **。
我对几个同事解释了规范的重要性,他们都不太理解,可能他们从没有在实施代码规范的团队工作过。
公司其实有前端代码规范,但是非常简略,无法真正落实,有的人甚至不知道有,所以公司对前端代码的质量要求仅仅停留在纸面上。
这和公司“质量第一,专业创新”的基本原则是相违背的,或者说没有真正在代码层面落实。
下面我借助 deepseek 的回答和我们面临的现状,进一步阐述。
当然有必要统一代码风格。我可以非常明确地说:在团队开发中,统一代码风格不是“可选项”,而是“必选项”。
这就像一支部队打仗,每个人都必须遵守统一的号令和战术动作。如果每个人都有自己的开枪节奏和冲锋方式,那结果只能是混乱和失败。
降低认知负荷:当所有代码看起来都出自一人之手时,团队成员可以快速理解任何部分的代码,而无需在不同的风格之间切换思维。他们可以将精力完全集中在逻辑和功能上,而不是在琢磨“这个括号为什么换行了”这种问题上。
易于代码审查(Code Review):审查者可以专注于代码的逻辑错误、潜在缺陷、架构设计等实质性问题,而不是浪费时间去评论缩进应该是2个空格还是4个空格。
简化新人融入:新成员加入项目时,只需学习一套统一的风格规范,就能更快地理解和贡献代码,缩短上手时间,更好地协作。
风格不一致,会导致追溯历史记录时候,对比代码变动的非常困难。
项目成员还会因为无法一眼看出区别,产生情绪对立和摩擦,这非常不利于协作和成员团结。
如果没有统一规范和风格,A同学喜欢结尾加分号,B同学不喜欢加。那么他们修改同一文件时,很容易因为风格问题产生大量的git冲突。这些冲突毫无营养,纯粹是浪费时间的“噪音”,会掩盖真正的逻辑冲突。
正因为可能存在大量风格上的冲突,导致我们不敢合并代码,如果冲突很难解决,又容易和同事产生摩擦,影响大家心情。
因此,bug 修复,我们采用了非常蹩脚的回避策略:各人的代码,出现 bug ,各人去修复。但是实际是完全做不到,比如有一个紧急的 bug,同事下班了,就需要在公司的人去修复。
统一的风格意味着代码是“集体所有”的,而不是某个人的“私有财产”。
任何成员都可以无障碍地修改、修复任何地方的代码,避免了“这段代码只有某某能看懂,等他回来再改”的窘境。
有时候代码复用我们采用复制文件的策略。同事A写了一个组件,同事B需要复用它,但是需要改动一点才能满足,此时就去找同事A改,要么同事B改,但是同事B去改,因为代码风格不同,有可能引入格式上的变化,同事A有一天来阅读,又觉得不适应了。
因此,同事B干脆复制一份文件,自己改。这种方式,会让让文件越来越多,增加项目打包体积,最坏的情况是逐渐导致性能问题,页面加载慢,还增加维护成本 --- 那天出现 bug,要去修复两份文件。
四预的项目用户已经反馈过两次性能问题。我们已经优化过一次,但是效果不佳,仅仅减少了打包体积。我认为很大程度上就是代码没有规范约束导致的。
代码规范能在项目前期把能遇到的问题都避免掉,防止性能问题不会过早或者频繁出现。
这种复制文件实现代码复用的方式,还会让团队没有归属感和凝聚力 -- 成员不会把代码设计得灵活,扩展性好,因为就没打算让其他人用,为何要费力做这些呢?成员会天然的抵触学习良好的设计,只追求能跑进行。
这样的心态也导致成员缺乏持续学习的动力。我才来公司那段时间,不懂一些关键和基础的性问题,请教了一些同事,发现很多同事也不懂,我只能慢慢摸索。
我也看到一些问题,有非常简便高效的解决方案,只需要改动一个文件或者变量就行,但是同事采用了非常低效的做法 --- 一个一个地改动文件,改了非常多的文件。
这都是知识没有共享导致的。
我们不应该采取以上策略,不专业,是非常糟糕的策略,它会引发各种问题。
通过使用 ESLint, Prettier 等自动化工具,可以在编码阶段或提交前自动格式化代码,省去了手动调整格式的繁琐时间。
这些工具通常还能强制检测出一些潜在的错误(如未使用的变量、错误的比较等),从而在早期预防bug,提升代码质量。
eslint 无法自动修复的,需要开发手动修复,会有一定的负担,但是它能规范开发者的习惯向最近实践靠拢,有一定负担是必然的。
prettier 没有任何负担。
这些工具都是能在代码入库之前自动执行的,人的负担极小。
一个风格统一、整洁规范的项目代码库,是团队专业精神和工程化能力的直接体现。它能给客户、合作伙伴以及新加入的开发者留下良好的第一印象。
代码库会变成一种“混搭风”或“屎山”风格。阅读这样的代码就像同时读莎士比亚和现代网络小说,需要不断适应不同的表达习惯,极其痛苦且容易出错。长期维护成本会呈指数级增长。
有时候需要对代码进行批量操作,比如全局搜索,然后替换,因为风格不同,执行起来非常棘手,可能有匹配不到的地方。
在代码审查中,会充斥大量关于风格的争论(“单引号还是双引号?”),这些争论往往带有个人主观色彩,容易引发不必要的情绪对立和人际摩擦,破坏团队协作氛围。
他的代码出现bug了,他不在,等他来再改、他写的代码不做起码的排版,格式太混乱,我实在看不下去,读不懂,还是等他改了、不要改我的代码,把格式改乱了,我不习惯了 等等,都容易造成推诿甩锅,甚至情绪对立和矛盾摩擦。
甚至有的同事采取躺平放任的心态,用他的话说,有的同事从外面来公司,就是为了躺平,什么统一风格,什么编码规范和可读性,不想关注这些,不想了解这些。这样的协作心态导致劣币驱逐良币,其他同事想要落实有利于团队和公司的措施,总是遇到阻碍。
有些风格不一致可能隐藏着真正的错误。例如,JavaScript 中自动分号插入(ASI)机制可能导致因为换行风格不同而出现意想不到的运行结果。
开发者需要花费额外时间讨论、争执和手动调整代码格式,这些时间本可以用来开发新功能或修复更有价值的问题。整个团队的开发节奏会被拖慢。
风格混乱的代码看起来无人负责,大家都不愿意去碰那些“风格怪异”的模块,导致代码质量差的模块会越来越差,形成恶性循环。
团队共同讨论并制定一份书面的规范文档。可以参考社区权威标准(如 Airbnb JavaScript Style Guide、Google Style Guides),然后根据团队喜好和项目特点进行裁剪。
Linter(代码检查工具):如 ESLint (JS/TS)、StyleLint(检查css、scss)。用于检查代码是否符合规范,并能捕获一些错误。
Formatter(代码格式化工具):如 Prettier (JS/TS/CSS等), 。这些工具更强大,能直接按照配置把代码重新格式化成统一风格,杜绝一切争论。
做这些,都是工具自动化进行了,不会给开发人员带来很多负担。
让每个成员都在编辑器中安装并配置这些工具,实现保存时自动格式化。
有同事反映每次保存自动格式化,电脑性能差了,会比较慢,可根据个人情况和喜好配置。
使用 Husky 等工具,在 git commit 前自动执行格式化与检查,确保提交到仓库的代码都是规范的。
在持续集成流水线中加入 lint 检查步骤,如果代码不规范则自动失败,拒绝合并。
我们没有 CICD, 不用做。
实施代码规范是软件工程中一项至关重要的协作实践和质量保证措施。
它牺牲了微不足道的个人偏好,换来了团队协作效率、代码质量和可维护性的巨大提升。对于一个严肃的、希望长期发展的软件项目来说,这是一项必须执行的、没有商量余地的纪律。
对于 JavaScript 这种“灵活到近乎放纵”的语言,统一代码风格不仅必要,甚至是生存刚需。前端社区在这方面已经形成了非常成熟和高度自动化的最佳实践。
业界对于前端项目(JS/TS)统一代码风格的通常实践,可以概括为 “工具强制为主,文档约定为辅”。
现代前端项目的代码风格统一几乎完全依赖以下三个工具,它们分别扮演不同角色
它不在乎你原来的代码风格,它会按照配置好的规则,将代码解析后重新打印成完全统一的格式。
优点:几乎没有争议。团队不需要讨论“用2个还是4个空格”,只需要决定“我们用Prettier,并且接受它的默认规则(或稍作修改)”。因为它只负责格式,不负责代码质量,所以规则非常强硬且高效。
它负责检查代码质量,找出潜在的错误和不规范的写法,并报告或自动修复,不能自动修复的,需要程序员手动修复。
负责范围:所有代码质量和最佳实践问题。
业界知名配置:团队通常不会从零开始配置ESLint,而是直接采用扩展(extends)社区公认的配置:
eslint:recommended: ESLint官方推荐规则集(包含一些关键规则)
airbnb: Airbnb的规则集非常流行且极其严格,被认为是高质量JS代码的标杆。
standard: 一个非常流行的、开箱即用的标准配置,它自带了一套风格(不加分号、双空格缩进等)。
@typescript-eslint/recommended: 用于TypeScript项目的推荐规则集。
ESLint 的性能问题被业界诟病,也有一些高性能其他 lint 可选。但是它最成熟,周边生态最好。
和 ESLint 类似,专注于样式代码检查。
以上工具是可独立工作,具体按照什么样的规范进行检查,也是可配置的。
使用 ESLint 负责代码质量,使用 Prettier 负责代码格式,并用 Husky + lint-staged 在提交前自动修复和检查。
这些工具不要求团队成员都去学习了解,只要按照规范,配置好,自动化地执行就行了,没有任何学习成本和认知负担。
这套实践已经成为了现代前端工程化的基石,它最大限度地消除了个人偏好带来的争论和团队内耗,将代码风格问题从一个“讨论话题”变成了一个“自动化流程”,极大地提升了团队的协作效率和代码质量。
也是落实公司“质量第一、专业创新”的基本原则的重要体现。
我可以结合我们团队的情况,拟订一个代码规范的初稿,再来和大家讨论哪些规范需要实施。只有大部分人在认知上统一,才能有效落实。
小小的改变,就能获得大大好处,为什么我们不做呢?

