你們好，我是大家的 前端章魚貓，一個不喜歡吃魚、又不喜歡喵 的超級貓 ~javascript
簡介
前端章魚貓從 2016 年加入 GitHub，到如今的 2020 年，快整整 5 個年頭了。css
相信不少人都沒有逛 GitHub 的習慣，所以總會有開源信息的不對稱，有哪些優秀的前端開源項目值得學習的也不知道。html
初步前端與高級前端之間，最大的差距可能就是信息差形成的。前端
從 2018 年開始，我就養成了天天逛 GitHub 的習慣，通常在早上上班前或者中午午休的時候都會逛一下。vue
看看天天都開源了哪些好的前端項目，還有用到的主流前端技術棧又是哪些，值得我去學習的。java
所以也收藏了很多好的開源項目，在此推薦給你們，每週會有一到三篇精華文章推送。react
但願你在瀏覽、學習了前端章魚貓推薦的這些開源項目的過程當中，你能學習到更多編程知識、提升編程技巧、找到編程的樂趣。git
今天給你們帶來的是 幾個大廠的前端代碼規範。es6
前端代碼規範
代碼千萬行，安全第一行；前端不規範，同事兩行淚。github
騰訊
包含內容也挺多的：
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，使其徹底按照項目所需的方式工做。
ESLint: https://eslint.org/
ESLint 中文網：https://eslint.bootcss.com/
Prettier
Prettier 是一個「有主見」的代碼格式化工具。
簡而言之，這個工具可以使輸出代碼保持風格一致。
也是目前絕大多數前端項目都會用到的哦。
Prettier：https://prettier.io/
最後
好了，【前端GitHub】的第 5 期內容已經講完了，更多精彩請看下方倉庫地址：
原文地址：https://github.com/FrontEndGitHub/FrontEndGitHub
本文分享自微信公衆號 - 前端宇宙（gh_8184da923ced）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。