Skip to content

Instantly share code, notes, and snippets.

@othree
Forked from josephj/happy-desinger-mini-1.md
Created March 12, 2014 07:02
Show Gist options
  • Save othree/9502163 to your computer and use it in GitHub Desktop.
Save othree/9502163 to your computer and use it in GitHub Desktop.

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

超快速、超有價值的 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
    
  • 關於複雜度的計算

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment