今天給大家帶來的是 幾個大廠的前端代碼規范 。

前端代碼規范

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

騰訊

包含內容也挺多的：

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

JavaScript Standard Style

除很多公司組織外，很多個人也在項目中使用的規范。

https://github.com/standard/standard

Vue

這里是官方的 Vue 特有代碼的風格指南。

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

不過我們也不確信風格指南的所有內容對于所有的團隊或工程都是理想的。

所以根據過去的經驗、周圍的技術棧、個人價值觀做出有意義的偏差是可取的。

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

es6

如何將 ES6 的新語法，運用到編碼實踐之中，與傳統的 JavaScript 語法結合在一起，寫出合理的、易于閱讀和維護的代碼。

es6 編程風格： http://es6.ruanyifeng.com/#docs/style

Bootstrap

內容包含 HTML 和 CSS。

HTML

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

CSS

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

Bootstrap 編碼規范： https://codeguide.bootcss.com/

ESLint

目前絕大多數前端項目都會用到的 可組裝的 JavaScrip t和 JSX 檢查工具。

發現問題

ESLint 靜態分析您的代碼以快速發現問題。ESLint 內置于大多數文本編輯器中，您可以將ESLint 作為持續集成管道的一部分運行。

自動修復

ESLint 發現的許多問題都可以自動修復。ESLint 修復程序可識別語法，因此您不會遇到傳統的查找和替換算法引入的錯誤。

定制

預處理代碼，使用自定義解析器，并編寫與 ESLint 內置規則一起使用的自己的規則。您可以自定義 ESLint，使其完全按照項目所需的方式工作。

Prettier

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

簡而言之，這個工具能夠使輸出代碼保持風格一致。

也是目前絕大多數前端項目都會用到的哦。

Prettier： https://prettier.io/