推薦幾個(gè)大廠的前端代碼規(guī)范，你也能寫出詩(shī)一樣的代碼！

大家好，我是你們的 前端章魚貓，一個(gè)不喜歡吃魚、又不喜歡喵 的超級(jí)貓 ~

簡(jiǎn)介

前端章魚貓從 2016 年加入 GitHub，到現(xiàn)在的 2020 年，快整整 5 個(gè)年頭了。

相信很多人都沒(méi)有逛 GitHub 的習(xí)慣，因此總會(huì)有開(kāi)源信息的不對(duì)稱，有哪些優(yōu)秀的前端開(kāi)源項(xiàng)目值得學(xué)習(xí)的也不知道。

初步前端與高級(jí)前端之間，最大的差距可能就是信息差造成的。

從 2018 年開(kāi)始，我就養(yǎng)成了每天逛 GitHub 的習(xí)慣，一般在早上上班前或者中午午休的時(shí)候都會(huì)逛一下。

看看每天都開(kāi)源了哪些好的前端項(xiàng)目，還有用到的主流前端技術(shù)棧又是哪些，值得我去學(xué)習(xí)的。

因此也收藏了不少好的開(kāi)源項(xiàng)目，在此推薦給大家，每周會(huì)有一到三篇精華文章推送。

希望你在瀏覽、學(xué)習(xí)了前端章魚貓推薦的這些開(kāi)源項(xiàng)目的過(guò)程中，你能學(xué)習(xí)到更多編程知識(shí)、提高編程技巧、找到編程的樂(lè)趣。

今天給大家?guī)?lái)的是 幾個(gè)大廠的前端代碼規(guī)范。

前端代碼規(guī)范

代碼千萬(wàn)行，安全第一行；前端不規(guī)范，同事兩行淚。

騰訊

包含內(nèi)容也挺多的：

PC端專題：快速上手、文件目錄、頁(yè)面頭部、通用title、通用foot、統(tǒng)計(jì)代碼、兼容測(cè)試

移動(dòng)端專題：快速上手、文件目錄、頁(yè)面頭部、REM布局、通用foot、統(tǒng)計(jì)代碼、分享組件、兼容要求

雙端官網(wǎng)：快速上手、頁(yè)面跳轉(zhuǎn)

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

不過(guò)里面也有一些內(nèi)容是針對(duì)其業(yè)務(wù)的，并不通用。

京東

對(duì)比騰訊的代碼規(guī)范，我更推薦凹凸實(shí)驗(yàn)室的代碼規(guī)范，比較齊全。

HTML規(guī)范

基于W3C、蘋果開(kāi)發(fā)者等官方文檔，并結(jié)合團(tuán)隊(duì)日常業(yè)務(wù)需求以及團(tuán)隊(duì)在日常開(kāi)發(fā)過(guò)程中總結(jié)提煉出的經(jīng)驗(yàn)而約定。

圖片規(guī)范

了解各種圖片格式特性，根據(jù)特性制定圖片規(guī)范，包括但不限于圖片的質(zhì)量約定、圖片引入方式、圖片合并處理等。

CSS 規(guī)范

統(tǒng)一團(tuán)隊(duì) CSS 代碼書寫和 SASS 預(yù)編譯語(yǔ)言的語(yǔ)法風(fēng)格，提供常用媒體查詢語(yǔ)句和瀏覽器私有屬性引用，并從業(yè)務(wù)層面統(tǒng)一規(guī)范常用模塊的引用。

命名規(guī)范

從 “目錄命名”、“圖片命名”、“ClassName” 命名等層面約定規(guī)范團(tuán)隊(duì)的命名習(xí)慣，增強(qiáng)團(tuán)隊(duì)代碼的可讀性。

JavaScript 規(guī)范

統(tǒng)一團(tuán)隊(duì)的 JS 語(yǔ)法風(fēng)格和書寫習(xí)慣，減少程序出錯(cuò)的概率，其中也包含了 ES6 的語(yǔ)法規(guī)范和最佳實(shí)踐。

凹凸實(shí)驗(yàn)室：https://guide.aotu.io/index.html

阿里巴巴

包含了：類型、對(duì)象、數(shù)組、字符串、函數(shù)、屬性、變量、提升、比較運(yùn)算符 & 等號(hào)、塊、注釋、空白、逗號(hào)、分號(hào)、類型轉(zhuǎn)化、命名規(guī)則、存取器、構(gòu)造函數(shù)、事件、模塊、jQuery、ECMAScript 5 兼容性、測(cè)試、性能、資源、JavaScript 風(fēng)格指南說(shuō)明

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

百度

JavaScript編碼規(guī)范、HTML、CSS、Less、E-JSON 數(shù)據(jù)傳輸標(biāo)準(zhǔn)、模塊和加載器、包結(jié)構(gòu)、項(xiàng)目目錄結(jié)構(gòu)、圖表庫(kù)標(biāo)準(zhǔn)、react 編碼規(guī)范。

比如：縮進(jìn)

• [強(qiáng)制] 使用?4?個(gè)空格做為一個(gè)縮進(jìn)層級(jí)，不允許使用?2?個(gè)空格 或?tab?字符。
• [強(qiáng)制]?switch?下的?case?和?default?必須增加一個(gè)縮進(jìn)層級(jí)。

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

}

規(guī)范文檔：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

網(wǎng)易編碼規(guī)范：

CSS規(guī)范：一系列規(guī)則和方法，幫助你架構(gòu)并管理好樣式

HTML規(guī)范：一系列建議和方法，幫助你搭建簡(jiǎn)潔嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)

工程師規(guī)范：前端頁(yè)面開(kāi)發(fā)工程師的工作流程和團(tuán)隊(duì)協(xié)作規(guī)范

但是并不止于此，還有更多：

http://nec.netease.com/standard

JavaScript Standard Style

除很多公司組織外，很多個(gè)人也在項(xiàng)目中使用的規(guī)范。

https://github.com/standard/standard

Vue

這里是官方的 Vue 特有代碼的風(fēng)格指南。

如果在工程中使用 Vue，為了回避錯(cuò)誤、小糾結(jié)和反模式，該指南是份不錯(cuò)的參考。

不過(guò)我們也不確信風(fēng)格指南的所有內(nèi)容對(duì)于所有的團(tuán)隊(duì)或工程都是理想的。

所以根據(jù)過(guò)去的經(jīng)驗(yàn)、周圍的技術(shù)棧、個(gè)人價(jià)值觀做出有意義的偏差是可取的。

官方風(fēng)格指南：https://cn.vuejs.org/v2/style-guide/index.html

es6

如何將 ES6 的新語(yǔ)法，運(yùn)用到編碼實(shí)踐之中，與傳統(tǒng)的 JavaScript 語(yǔ)法結(jié)合在一起，寫出合理的、易于閱讀和維護(hù)的代碼。

es6 編程風(fēng)格：http://es6.ruanyifeng.com/#docs/style

Bootstrap

內(nèi)容包含 HTML 和 CSS。

HTML

語(yǔ)法、HTML5 doctype、語(yǔ)言屬性、IE 兼容模式、字符編碼、引入 CSS 和 JavaScript 文件、實(shí)用為王、屬性順序、布爾型屬性、減少標(biāo)簽的數(shù)量、JavaScript 生成的標(biāo)簽。

CSS

語(yǔ)法、聲明順序、不要使用 @import、媒體查詢（Media query）的位置、帶前綴的屬性、單行規(guī)則聲明、簡(jiǎn)寫形式的屬性聲明、Less 和 Sass 中的嵌套、Less 和 Sass 中的操作符、注釋、class 命名、選擇器、代碼組織。

Bootstrap 編碼規(guī)范：https://codeguide.bootcss.com/

ESLint

目前絕大多數(shù)前端項(xiàng)目都會(huì)用到的 可組裝的 JavaScrip t和 JSX 檢查工具。

發(fā)現(xiàn)問(wèn)題

ESLint 靜態(tài)分析您的代碼以快速發(fā)現(xiàn)問(wèn)題。ESLint 內(nèi)置于大多數(shù)文本編輯器中，您可以將ESLint 作為持續(xù)集成管道的一部分運(yùn)行。

自動(dòng)修復(fù)

ESLint 發(fā)現(xiàn)的許多問(wèn)題都可以自動(dòng)修復(fù)。ESLint 修復(fù)程序可識(shí)別語(yǔ)法，因此您不會(huì)遇到傳統(tǒng)的查找和替換算法引入的錯(cuò)誤。

定制

預(yù)處理代碼，使用自定義解析器，并編寫與 ESLint 內(nèi)置規(guī)則一起使用的自己的規(guī)則。您可以自定義 ESLint，使其完全按照項(xiàng)目所需的方式工作。

ESLint: ?https://eslint.org/

ESLint 中文網(wǎng)：https://eslint.bootcss.com/

Prettier

Prettier 是一個(gè)“有主見(jiàn)”的代碼格式化工具。

簡(jiǎn)而言之，這個(gè)工具能夠使輸出代碼保持風(fēng)格一致。

也是目前絕大多數(shù)前端項(xiàng)目都會(huì)用到的哦。

Prettier：https://prettier.io/

最后

好了，【前端GitHub】的第 5 期內(nèi)容已經(jīng)講完了，更多精彩請(qǐng)看下方倉(cāng)庫(kù)地址：

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