happy-desinger-mini-1.md

JavaScript 品質工具：CodePaint 與 Plato

介紹協助提昇 F2E Code Style 的兩個工具。

分享者

josephj@faria

問題

這份 JavaScript Code Style Guide 很讚：The Essentials of Writing High Quality JavaScript ，但我們要如何確保團隊中的每個人都遵守？

導入 JSLint / JSHint

導入 JSLint/JSHint 至開發流程中：

• 安裝到編輯器中：
  • Vim 按熱鍵 F8 時。

    • .vimrc 加入：

      map <buffer><silent> <F8> :w<CR>:make %<CR>:cw<CR>
      

    • 開新檔案 ~/.vim/bundle/jslint/ftplugin/javascript.vim

      setlocal makeprg=jslint\ --continue\ --nomen\ --regexp\ --sloppy\ %set errorformat=%-P%f,
                       \%E%>\ #%n\ %m,%Z%.%#Line\ %l\\,\ Pos\ %c,
                       \%-G%f\ is\ OK.,%-Q
      

  • Sublime 存檔時。
• 使用 Git pre-commit Hook：不處理就無法 Commit。

但是 Team Member 常會無意地流露出嫌惡與不耐煩的眼神（謎之音：「e04！連空白都檢查!」）Orz

救星 Esprima

• Esprima 是什麼？ - 一張投影片就可以搞懂。

超快速、超有價值的 JavaScript 程式碼分析工具，可以做很多的應用。

CodePainter - JavaScript Code Style 轉換器！

• CodePainer 是什麼？

• 超酷！可以從你的程式碼中分析你的 JavaScript Code Style！！！

    cd ~/www/static/index/bar;
    codepaint infer "**/*.js";
  

• 一行批次轉換所有程式碼：

  • 單雙引號、Tab 或 Space、空白的使用、Trim 結尾空白，都可以處理！

    ````
    cd ~/www/static/index/space
    // 使用剛剛產出的 JSON 轉換
    codepaint xform -j ~/www/infer.json "**/space*.js"
    // 使用內建規則轉換
    codepaint xform -p idiomatic "~/www/static/index/space/space*.js"
    // 使用自定規則轉換
    codepaint xform -e ~/www/.editorconfig "**/space*.js"
    ````
    

  • 我的 .editconfig

• codepainter@github

可以讓露出嫌惡眼神的 Team Member 用此工具自動轉換 XD 產出一致的程式碼才是終極目標！

Plato - JavaScript 品質報表產生器！

• 報表實在太精美啦！

  plato -r -d ~/Sites/lab/plato ~/www/static/index/space
  

  • 到 http://localhost/plato 看看

• 關於複雜度的計算

  • Lines of Code
  • Number of Parameters
  • Cyclomatic Complexity
  • Halstead Metrics
  • Maintainability Index

• plato@github