推荐几个大厂的前端代码规范，你也能写出诗一样的代码！

简介

前端章鱼猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。

相信很多人都没有逛 GitHub 的习惯，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。

初步前端与高级前端之间，最大的差距可能就是信息差造成的。

从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。

看看每天都开源了哪些好的前端项目，还有用到的主流前端技术栈又是哪些，值得我去学习的。

因此也收藏了不少好的开源项目，在此推荐给大家，每周会有一到三篇精华文章推送。

希望你在浏览、学习了前端章鱼猫推荐的这些开源项目的过程中，你能学习到更多编程知识、提高编程技巧、找到编程的乐趣。

前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，抹平你的前端信息不对称，涵盖 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、数据结构与算法等等。

以下为【前端GitHub】的第 5 期内容。

今天给大家带来的是 几个大厂的前端代码规范。

前端代码规范

代码千万行，安全第一行；前端不规范，同事两行泪。

腾讯

包含内容也挺多的：

PC端专题：快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试

移动端专题：快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求

双端官网：快速上手、页面跳转

//tgideas.qq.com/doc/index.html

不过里面也有一些内容是针对其业务的，并不通用。

京东

对比腾讯的代码规范，我更推荐凹凸实验室的代码规范，比较齐全。

HTML规范

基于W3C、苹果开发者等官方文档，并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。

图片规范

了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等。

CSS 规范

统一团队 CSS 代码书写和 SASS 预编译语言的语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。

命名规范

从 “目录命名”、“图片命名”、“ClassName” 命名等层面约定规范团队的命名习惯，增强团队代码的可读性。

JavaScript 规范

统一团队的 JS 语法风格和书写习惯，减少程序出错的概率，其中也包含了 ES6 的语法规范和最佳实践。

凹凸实验室：//guide.aotu.io/index.html

airbnb

包含了：类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符 & 等号、块、注释、空白、逗号、分号、类型转化、命名规则、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 风格指南说明

Airbnb Javascript Style Guide：//github.com/airbnb/javascript

百度

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...

}