关于前端:推荐几个大厂的前端代码规范学会了你也能写出诗一样的代码

大家好，我是你们的前端章鱼猫，一个不喜爱吃鱼、又不喜爱喵的超级猫 ~

前端章鱼猫从 2016 年退出 GitHub，到当初的 2020 年，快整整 5 个年头了。

置信很多人都没有逛 GitHub 的习惯，因而总会有开源信息的不对称，有哪些优良的前端开源我的项目值得学习的也不晓得。

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

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

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

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

心愿你在浏览、学习了前端章鱼猫举荐的这些开源我的项目的过程中，你能学习到更多编程常识、进步编程技巧、找到编程的乐趣。

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

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

明天给大家带来的是 几个大厂的前端代码标准 。

代码千万行，平安第一行；前端不标准，共事两行泪。

蕴含内容也挺多的：

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

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

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

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

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

比照腾讯的代码标准，我更举荐凹凸实验室的代码标准，比拟齐全。

HTML 标准

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

图片标准

理解各种图片格式个性，依据个性制订图片标准，包含但不限于图片的品质约定、图片引入形式、图片合并解决等。

CSS 标准

对立团队 CSS 代码书写和 SASS 预编译语言的语法格调，提供罕用媒体查问语句和浏览器公有属性援用，并从业务层面对立标准罕用模块的援用。

命名标准

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

JavaScript 标准

对立团队的 JS 语法格调和书写习惯，缩小程序出错的概率，其中也蕴含了 ES6 的语法标准和最佳实际。

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

蕴含了：类型、对象、数组、字符串、函数、属性、变量、晋升、比拟运算符 & 等号、块、正文、空白、逗号、分号、类型转化、命名规定、存取器、构造函数、事件、模块、jQuery、ECMAScript 5 兼容性、测试、性能、资源、JavaScript 格调指南阐明

Airbnb Javascript Style Guide：https://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...

}

标准文档：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

CSS 标准 ：一系列规定和办法，帮忙你架构并治理好款式

HTML 标准 ：一系列倡议和办法，帮忙你搭建简洁谨严的构造

工程师标准 ：前端页面开发工程师的工作流程和团队合作标准

然而并不止于此，还有更多：

http://nec.netease.com/standard

除很多公司组织外，很多集体也在我的项目中应用的标准。

https://github.com/standard/standard

这里是官网的 Vue 特有代码的格调指南。

如果在工程中应用 Vue，为了回避谬误、小纠结和反模式，该指南是份不错的参考。

不过咱们也不确信格调指南的所有内容对于所有的团队或工程都是现实的。

所以依据过来的教训、四周的技术栈、集体价值观做出有意义的偏差是可取的。

官网格调指南：https://cn.vuejs.org/v2/style-guide/index.html

如何将 ES6 的新语法，使用到编码实际之中，与传统的 JavaScript 语法联合在一起，写出正当的、易于浏览和保护的代码。

es6 编程格调：http://es6.ruanyifeng.com/#docs/style

内容蕴含 HTML 和 CSS。

HTML

语法、HTML5 doctype、语言属性、IE 兼容模式、字符编码、引入 CSS 和 JavaScript 文件、实用为王、属性程序、布尔型属性、缩小标签的数量、JavaScript 生成的标签。

CSS

语法、申明程序、不要应用 @import、媒体查问（Media query）的地位、带前缀的属性、单行规定申明、简写模式的属性申明、Less 和 Sass 中的嵌套、Less 和 Sass 中的操作符、正文、class 命名、选择器、代码组织。

Bootstrap 编码标准：https://codeguide.bootcss.com/

目前绝大多数前端我的项目都会用到的可组装的 JavaScrip t 和 JSX 查看工具。

发现问题

ESLint 动态剖析您的代码以疾速发现问题。ESLint 内置于大多数文本编辑器中，您能够将 ESLint 作为继续集成管道的一部分运行。

主动修复

ESLint 发现的许多问题都能够主动修复。ESLint 修复程序可辨认语法，因而您不会遇到传统的查找和替换算法引入的谬误。

定制

预处理代码，应用自定义解析器，并编写与 ESLint 内置规定一起应用的本人的规定。您能够自定义 ESLint，使其齐全依照我的项目所需的形式工作。

ESLint: https://eslint.org/

ESLint 中文网：https://eslint.bootcss.com/

Prettier 是一个“有主意”的代码格式化工具。

简而言之，这个工具可能使输入代码放弃格调统一。

也是目前绝大多数前端我的项目都会用到的哦。

Prettier：https://prettier.io/

好了，【前端 GitHub】的第 5 期内容曾经讲完了，更多精彩请看下方仓库地址：

原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub

平时如何发现好的开源我的项目，能够看看这两篇文章：GitHub 上能挖矿的神仙技巧 – 如何发现优良开源我的项目和恕我直言，你可能连 GitHub 搜寻都不会用 – 如何精准搜寻的神仙技巧。

感觉有用？喜爱就珍藏，顺便点个赞吧，你的反对是我最大的激励！

微信搜“ 前端 GitHub”，回复“电子书”即能够取得 160 本前端精髓书籍哦。

往期精文

恕我直言，你可能连 GitHub 搜寻都不会用 – 如何精准搜寻的神仙技巧
GitHub 上最火的、最值得前端学习的数据结构与算法我的项目！没有之一
寰球最火的 WEB 开发学习路线！没有之一！3 天就在 GitHub 播种了靠近 1w 点赞
Github 标星 1.6W+，程序员不得不知的“潜规则”又火了，早晓得就不会秃头了

关于前端:推荐几个大厂的前端代码规范学会了你也能写出诗一样的代码

简介

前端代码标准

腾讯

京东

阿里巴巴

百度

网易编码标准：

JavaScript Standard Style

Vue

es6

Bootstrap

ESLint

Prettier

最初