ESLint X Prettier 透過工具幫助團隊控制程式碼風格與品質

Lin Yen-Cheng on 2017-02-21 3 min. read

ESLint、Prettier 簡介

  • Prettier 偏向 code formatter 主要專注在排版
  • ESLint 是 linter 用來檢視程式碼的品質,找到可能的錯誤並提示

Code style

厲害的地方在也可以套用 airbnb 的 coding style,在 airbnb 的 Github page 也有教你怎麼 config,不然每個人加入團隊前光看 coding style rule 就飽了 Orz

有了這個工具就可以快速的自動提示 XDDD 如果還沒全面導入 ES6 寫法,記得在 rules 裡先 disable 掉一些短時間還來不及改的寫法 Orz

  • “off” 或 0-關閉規則
  • “warn” 或 1-開啟規則,使用警告級別的錯誤:warn(不會導致程序退出)
  • “error” 或 2-開啟規則,使用錯誤級別的錯誤:error(當被觸發的時候,程序會退出)

詳細可以看 ESLint 網站上的配置教學~ 比較特別的是也有支援 jsdoc 的提示,對於事情雜亂一堆文件還沒補,有時補東就忘了西的人來說,真的是個優秀的發明 Orz

Config file

當然使用的第一步就是在編輯器中裝入,再來就是定義 linter 需要的配置檔,否則像是 Atom 中預設是沒有配置檔就不啟用的 XD

使用方式很簡單就是要定義一個 .eslintrc 檔案在根目錄,就可以開始歡樂的使用囉 XD

{
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "rules": {
    "one-var": 0,
    "no-var": 0,
    "prefer-template": 0,
    "valid-jsdoc": [
      "error",
      {
        "requireReturn": true,
        "requireReturnType": true,
        "requireParamDescription": true,
        "requireReturnDescription": true
      }
    ],
    "require-jsdoc": [
      "error",
      {
        "require": {
          "FunctionDeclaration": true,
          "MethodDefinition": true,
          "ClassDeclaration": true
        }
      }
    ]
  }
}

開發環境設定

最後就是建議在 VS code 中設定存檔時自動格式化,或是在專案中加上 commit 的 pre-hook,在 Commit 階段解決問題。


喜歡這篇文章,請幫忙拍拍手喔 🤣

share