良好的代碼規範,能夠提高代碼的可閱性,使得項目維護更友好。除了自己設定一個規範外,我們也可以借鑒一下現在流行的代碼規範,讓我們成長之後,再去看細節。
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 代碼規範。安裝它的時候,它會需要 eslint
和 eslint-plugin-import
。
npm install eslint-config-airbnb-base
然後在你的 .eslintrc
加入 "extends": "airbnb-base"
就可以了。
Airbnb 的完整代碼規範可以在 airbnb/javascript 上閱讀。
除了 Airbnb 的代碼規範之外,有很多高科技公司在用 Standard 的代碼規範,包括但不限於 NPM, Github, mongoDB, ZenDesk。
這裡是官網提到的一些 Standard 規範:
你可以透過 eslint-config-standard
來自動校對,改善你的代碼。
npm install eslint-config-standard
Standard 繁體中文文檔 Standard 簡體中文文檔
它的思想是無論誰改進項目的代碼,都應該像只有一個人寫代碼。
你可以透過 eslint-config-idiomatic 來自動校對,改善你的代碼。
npm install eslint-config-idiomatic
備註:
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 工程師一樣編寫同樣風格的代碼。
你可以透過 eslint-config-google 來自動校對,改善你的代碼。
npm install eslint eslint-config-google
我們可以在 Google - GitHub Pages 上閱讀它的代碼規範。
如果你想要幫助 jQuery 改善它的代碼的話,你可以在 jQuery 的官網 上閱讀它的代碼規範。
自從看了《Clean Code》一書之後,我感覺寫代碼不只是一種手藝,還是藝術。可能你看過去感覺都是 JavaScript,但是讀著讀著一些開源項目,就會感受到代碼可以有多麼優雅,同時可以有多麼不雅。。。為了減少他人說 WTF 的機會,我們還是研究一下如何把自己的代碼變得更加優雅吧。
如果你是第一次使用 JavaScript 代碼規範的話,那麼你可以選擇 Airbnb 作為你的代碼規範。Airbnb 的文檔可閱性是不錯的,而且把現有項目加上 eslint 也不是什麼難事。
如果要仔細地說代碼規範的好處,重要性的話,我們可以在下一篇文章討論。