你可能不知道的 JavaScript 代碼規範

作者: Calpa Liu
字數:954
出版:2017 年 11 月 8 日
良好的代碼規範,能夠提高代碼的可閱性,使得項目維護更友好。除了自己設定一個規範外,我們也可以借鑒一下現在流行的代碼規範,讓我們成長之後,再去看細節。

Airbnb

Airbnb 是其中一個最流行的 JavaScript 代碼規範,它差不多包含所有 JavaScript 的角度。它也是我的個人項目所使用的代碼規範。如果你的項目是基於 React 的,那麼你可以選擇安裝 eslint-config-airbnb,或者你可以選擇最基本的 eslint-config-airbnb-base

eslint-config-airbnb 包含 ECMAScript 6 + 以及 React 的 ESLint 代碼規範。在安裝 eslint-config-airbnb 的時候,它會一同安裝 eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y。如果你的項目不是 React 的話,那麼你可以選擇eslint-config-airbnb-base

npm install eslint-config-airbnb

eslint-config-airbnb-base 包含 ECMAScript 6 + 的 ESLint 代碼規範。安裝它的時候,它會需要 eslinteslint-plugin-import

npm install eslint-config-airbnb-base

然後在你的 .eslintrc 加入 "extends": "airbnb-base" 就可以了。

Airbnb 的完整代碼規範可以在 airbnb/javascript 上閱讀。

Standard

除了 Airbnb 的代碼規範之外,有很多高科技公司在用 Standard 的代碼規範,包括但不限於 NPM, Github, mongoDB, ZenDesk。

Companies that use Standard
Companies that use Standard

這裡是官網提到的一些 Standard 規範:

  • 兩個空白 - 當作縮排
  • 字串用單引號 - 除非要避免跳脫字元
  • 沒有不必要的變數
  • 不要加分號
  • 絕對不要用 ( 、 [ 當開頭
  • 這是不用分號 唯一 可能遇到的問題 - 那就自動幫你檢查吧!
  • 關鍵字後加空白 if (condition) { … }
  • 函數名稱後加空白 function name (arg) { … }
  • 統一用 === 取代 == - 但是 obj == null 可以用來檢查 null || undefined。
  • 一定要例外處理 node.js 中的 err 參數
  • 一定要對瀏覽器中的全域變數加上 window 前綴 - 除了 document 和 navigator 可以不用
  • 避免使用那些命名得很爛的全域變數,像是 open、length、event 和 name。

你可以透過 eslint-config-standard 來自動校對,改善你的代碼。

npm install eslint-config-standard

Standard 繁體中文文檔 Standard 簡體中文文檔

Idiomatic

它的思想是無論誰改進項目的代碼,都應該像只有一個人寫代碼。

你可以透過 eslint-config-idiomatic 來自動校對,改善你的代碼。

npm install eslint-config-idiomatic

Idiomatic - Github

備註:

use version ^3.0.0 for ESLint version ^3.x.x. use version ^2.0.0 for ESLint version ^2.x.x. use version ^1.0.0 for ESLint version ^1.x.x.

在你的 .eslintrc 內輸入:

{
  "extends": "idiomatic"
}

Google

你都可以像 Google 工程師一樣編寫同樣風格的代碼。

你可以透過 eslint-config-google 來自動校對,改善你的代碼。

npm install eslint eslint-config-google

我們可以在 Google - GitHub Pages 上閱讀它的代碼規範。

jQuery

如果你想要幫助 jQuery 改善它的代碼的話,你可以在 jQuery 的官網 上閱讀它的代碼規範。

總結

自從看了《Clean Code》一書之後,我感覺寫代碼不只是一種手藝,還是藝術。可能你看過去感覺都是 JavaScript,但是讀著讀著一些開源項目,就會感受到代碼可以有多麼優雅,同時可以有多麼不雅。為了減少他人說 WTF 的機會,我們還是研究一下如何把自己的代碼變得更加優雅吧。

如果你是第一次使用 JavaScript 代碼規範的話,那麼你可以選擇 Airbnb 作為你的代碼規範。Airbnb 的文檔可閱性是不錯的,而且把現有項目加上 eslint 也不是什麼難事。

如果要仔細地說代碼規範的好處,重要性的話,我們可以在下一篇文章討論。

參考資料

  1. Clean Code 電子書
  2. 5 JavaScript Style Guides — Including AirBnB, GitHub, & Google
關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。