今天給大家?guī)淼氖?nbsp;幾個(gè)大廠的前端代碼規(guī)范 。

前端代碼規(guī)范

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

騰訊

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

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

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

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

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

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

京東

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

HTML規(guī)范

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

圖片規(guī)范

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

CSS 規(guī)范

統(tǒng)一團(tuán)隊(duì) CSS 代碼書寫和 SASS 預(yù)編譯語言的語法風(fēng)格，提供常用媒體查詢語句和瀏覽器私有屬性引用，并從業(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 語法風(fēng)格和書寫習(xí)慣，減少程序出錯(cuò)的概率，其中也包含了 ES6 的語法規(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 兼容性、測試、性能、資源、JavaScript 風(fēng)格指南說明

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)、圖表庫標(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ī)范：一系列建議和方法，幫助你搭建簡潔嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)

工程師規(guī)范：前端頁面開發(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ò)的參考。

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

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

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

es6

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

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

Bootstrap

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

HTML

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

CSS

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

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

ESLint

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

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

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

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

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

定制

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

Prettier

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

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

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

Prettier： https://prettier.io/