推薦幾個大廠的前端程式碼規範,你也能寫出詩一樣的程式碼!

天明夜盡發表於2020-12-22

大家好,我是你們的 前端章魚貓,一個不喜歡吃魚、又不喜歡喵 的超級貓 ~

簡介

前端章魚貓從 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

airbnb

包含了:型別、物件、陣列、字串、函式、屬性、變數、提升、比較運算子 & 等號、塊、註釋、空白、逗號、分號、型別轉化、命名規則、存取器、建構函式、事件、模組、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

平時如何發現好的開源專案,可以看看這兩篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源專案恕我直言,你可能連 GitHub 搜尋都不會用 - 如何精準搜尋的神仙技巧

覺得有用 ?喜歡就收藏,順便點個贊吧,你的支援是我最大的鼓勵!

往期精文

相關文章