--- theme: channing-cyan --- ## 简介前端章鱼猫从 2021 年加入掘金，到现在的 2022 年，快整整 1 个年头了。本人经历了团队`从缺乏标准到逐渐代码规范`的过程，从公司代码没有规范进行开发到要求代码逐渐规范化，在此当做记录供大家推荐几款前端代码规范。随着团队人数的增加，每个人的代码编写喜好不同，代码风格也迥然不同。如果有一个大家的统一的愿意遵守的代码规范，肯定事半功倍，提高效率，避免代码`Review`和`重构`。本人经历过重构项目，才发现遵守代码规范的重要性很大。坚持好的代码风格规范，从你我做起。 ## 前端代码规范 > 代码千万行，安全第一行；前端不规范，同事两行泪。 ### 腾讯编码规范： TGideas团队制定面向合作伙伴的前端重构人员，虽然内容仅适用于腾讯互动娱乐外包页面，但可以参考这个规范进行开发。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb1c4a1e0d6d40c9818e7ffcc5721e59~tplv-k3u1fbpfcp-watermark.image?) 包含内容： PC端专题：快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试、footer 移动端专题：快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求双端官网：快速上手、页面跳转、移动端社区入口不过里面也有一些内容是针对特殊业务的规范，并不通用。 ### 京东编码规范： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a442ee57b55f446ebd25b9638acd75cf~tplv-k3u1fbpfcp-watermark.image?) 对比腾讯的代码规范，我更推荐凹凸实验室的代码规范，比较齐全。公司代码规范也是参考这个去定代码规范的标准的。 HTML规范: > 基于W3C、苹果开发者等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。图片规范: > 了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等。 CSS 规范: > 统一团队 CSS 代码书写和 SASS 预编译语言的语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。命名规范: > 从 “目录命名”、“图片命名”、“ClassName” 命名等层面约定规范团队的命名习惯，增强团队代码的可读性。 JavaScript 规范: > 统一团队的 JS 语法风格和书写习惯，减少程序出错的概率，其中也包含了 ES6 的语法规范和最佳实践。 React 规范: > 统一团队的类 React 应用的语法规范，规范类 React 应用书写。 ### 阿里巴巴编码规范(中文版)：引自《阿里规约》的开头片段：现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/266c9440f2e64c22b1a08c213f908ce2~tplv-k3u1fbpfcp-watermark.image?) 包含类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明. ### 百度编码规范： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/511904d1368f4f93bfeb5594592b953e~tplv-k3u1fbpfcp-watermark.image?) JavaScript编码规范、HTML、CSS、Less、E-JSON 数据传输标准、模块和加载器、包结构、项目目录结构、图表库标准、react 编码规范。比如：缩进 - **强制** 使用 `4` 个空格做为一个缩进层级，不允许使用 `2` 个空格或 `tab` 字符。 - **强制** `switch` 下的 `case` 和 `default` 必须增加一个缩进层级。 ``` // good switch (variable) { case '1': // do... break; case '2': // do... break; default: // do... } // bad switch (variable) { case '1': // do... break; case '2': // do... break; default: // do... } ``` ### 网易编码规范： CSS规范： > 一系列规则和方法，帮助你架构并管理好样式 HTML规范： > 一系列建议和方法，帮助你搭建简洁严谨的结构工程师规范： > 前端页面开发工程师的工作流程和团队协作规范但是并不止于此，还有更多： ### JavaScript Standard Style 编码规范： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b17293268a0487b829e585d53c079df~tplv-k3u1fbpfcp-watermark.image?) 除很多公司组织外，很多个人也在项目中使用的规范。本工具通过以下三种方式为你（及你的团队）节省大量时间： - **无须配置。** 史上最便捷的统一代码风格的方式，轻松拥有。 - **自动代码格式化。** 只需运行 `standard --fix` 从此和脏乱差的代码说再见。 - **提前发现风格及程序问题。** 减少代码审查过程中反反复复的修改过程，节约时间。 ### Vue 编码规范：这里是官方的 Vue 特有代码的风格指南。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4dffdfc4b7a40d0baeee54dba5dfdc9~tplv-k3u1fbpfcp-watermark.image?) 如果打不开可以的话，可以打开 [w3cschool](https://www.w3cschool.cn/vuejs3/vuejs3-z5mf3f4f.html) 如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏差是可取的。 ### es6 编码规范：如何将 ES6 的新语法，运用到编码实践之中，与传统的 JavaScript 语法结合在一起，写出合理的、易于阅读和维护的代码。 ![d994a4fbae5e1b891030eb8db8992be4_3914b72771.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/649be24874754103a16453bf0d58a7c6~tplv-k3u1fbpfcp-watermark.image?) 多家公司和组织已经公开了它们的风格规范，下面的内容主要参考了 [Airbnb](https://github.com/airbnb/javascript) 公司的 JavaScript 风格规范。 ### Bootstrap 编码规范：编写一致、灵活和可持续的 HTML 和 CSS 代码的规范。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2ca36c006b44aaca264d69bea8036ca~tplv-k3u1fbpfcp-watermark.image?) HTML规范： > 语法、HTML5 doctype、语言属性、IE 兼容模式、字符编码、引入 CSS 和 JavaScript 文件、实用为王、属性顺序、布尔型属性、减少标签的数量、JavaScript 生成的标签。 CSS规范： > 语法、声明顺序、不要使用 @import、媒体查询（Media query）的位置、带前缀的属性、单行规则声明、简写形式的属性声明、Less 和 Sass 中的嵌套、Less 和 Sass 中的操作符、注释、class 命名、选择器、代码组织。 ### ESLint URL: URL(中文网)：目前绝大多数前端项目都会用到的可组装的 JavaScript和 JSX 检查工具。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02ee90f2b30c4bbea36c856119cdc08c~tplv-k3u1fbpfcp-watermark.image?) 但是使用eslint风险还是有的，之前项目原本没使用eslint风格，后面加了配置代码错误发现问题： > ESLint 静态分析您的代码以快速发现问题。ESLint 内置于大多数文本编辑器中，您可以将ESLint 作为持续集成管道的一部分运行。自动修复： > ESLint 发现的许多问题都可以自动修复。ESLint 修复程序可识别语法，因此您不会遇到传统的查找和替换算法引入的错误。定制： > 预处理代码，使用自定义解析器，并编写与 ESLint 内置规则一起使用的自己的规则。您可以自定义 ESLint，使其完全按照项目所需的方式工作。 ### Prettier URL(中文网)： Prettier 是一个“有态度”的代码格式化工具。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20dd03687e304e84b8b648fb6aafa994~tplv-k3u1fbpfcp-watermark.image?) 简而言之，这个工具能够使输出代码保持风格一致。也是目前绝大多数前端项目都会用到的哦。能够与你所用的工具协同工作。 ## 总结本篇主要内容是：推荐大家几个前端代码规范文档，帮助大家在开发过程中代码规范化，提高开发效率，避免代码`Review`和`重构`。 ## 结语如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下阿绵哈哈。 `宝贝们`，都看到这里了，要不点个赞呗 👍 写作不易，希望可以获得你的一个「赞」。如果文章对你有用，可以选择「关注 + 收藏」。如有文章有错误或建议，欢迎评论指正，谢谢你。❤️