程式代碼規範的重要性

  • 會加強工程師品質。習慣寫好程式格式,規範一致會讓你變成更好的軟體工程師。
  • 當程式代碼容易閱讀開發時間會自然縮短。比較容易讀懂程式在做什麼。
  • 提高程式效能。JavaScript有時後是個蠻奇怪的語言。代碼格式一致會讓效能提高。


代碼格式自動檢查工具

工具 用途
Prettier 完全幫你把代碼formatting弄一致
ESLint 代碼品質,自動找bug
Linting rule sets, plugins, and extensions 決定代碼規範
Git hooks 自動化程式規範

第一步驟:和解Prettier和自動代碼格式

Prettier GitHub Repo & Docs

Prettier會依照指定的規範把你的代碼全部從新整合。當你安裝後就不用在考慮代碼規範了。安裝在package.json裡所以不用一直提醒團員安裝。

安裝

yarn add prettier --dev

建議針對專案安裝,不要安裝到全系統。

使用

用這行代碼來整合你的代碼格式。

prettier --single-quote --write "src/**/*.js"

第二步驟:使用Husky加Lint-Staged來自動化Prettier的Git Hooks

Husky用來吧githooks簡化,在代碼加入version control之前跑個subroutine。

Lint-Staged及Husky需要一起用。 會只跑在‘staged’或‘added’的Git branch。這樣prettier就不用每次跑你整個專案的代碼,只需要跑有更改過或新加的檔案。

安裝

yarn add husky lint-staged --dev

加precommit script到你的package.json。

"scripts": {
    "precommit": "lint-staged"
},

要確保lint-stage script也加入你的package.json。

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ]
  }
}

第三步驟:ESLint代碼警察

Linting是可以結合任何程式語言的小工具。可以避免工程師團隊行程不好的習慣。ESLint是個很有彈性客製化的JavaScript工具,跟其他工具結合通常蠻容易。

安裝

建議針對專案安裝,不要安裝到全系統。

yarn add eslint --dev

把ESLint結合到你的code editor,VC Code用者下載ESLint Extension.

建立‘.eslintrc.json’來控制ESLint的設定。

// run this command in the terminal:
./node_modules/.bin/eslint --init
// Or you can just add a .eslintrc.json to your project
//Note: you may also want to add a .eslintignore . It works just like a .gitignore

第三方直接跟ESLint建立好的代碼格式:

第四步驟:ESLint和React.js的結合

Facebook有為React專門設立一些設定ESLint的功能create-react-app。這個工具只會設定代碼規範。

安裝

yarn add --dev eslint-config-react-app babel-eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

如果想知道每個規範的纖細資料,可以問Google。

把plugin和rules加入.eslintrc.json

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

第五步驟:ESLint和Prettier的結合

因為格式規範會從ESLint及Prettier出來,我們需要確定沒有conflict。因為我們用Airbnb的規範,有conflict的可能性更高。

eslint-config-prettier: 幫忙把全部可能跟prettier衝突的格式規範找出來。

yarn add eslint-config-prettier --dev

把plugin和rules加入.eslintrc:

{
  "extends": [
    "prettier",
    "prettier/flowtype",  // if you are using flow
    "prettier/react"
  ]
}

需要更纖細的指示請參考eslint-config-prettier

第六步驟: 其他安裝

安裝prettier ESLint plugin來看代碼裡的formatting errors。

eslint-plugin-prettier可以讓你在code editor裡直接看的你的formatting errors。在碰到git之前就知道formatting error。

yarn add eslint-plugin-prettier --dev

把plugin和rules加入.eslintrc:

// .eslinrc.json
{
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

需要更纖細的指示請參考eslint-plugin-prettie

其他輔助Prettier的小程式

  • prettier-eslint: formats code according to your ESLint rules. Use the eslint — fix instead. Prettier improves this functionality with this tool.
  • prettier-standard: formats code using standard rules. Some people like standard. This helps prettier integrate with it.


格式規範 Style Guides

基礎格式

JavaScript Airbnb Sytle Guide
C++ Google C++ Style Guide
Python Google Python Style Guide

例外格式

  • tab一定要用space取代。