javascript 程式撰寫/編碼風格

程式碼保持乾淨一致的風格很重要。 整齊好讀才容易除錯； 別人看得懂才有機會參與你的專案。 最近比較認真學 javascript， 對於 「變數不必宣告就能用」 感到很困擾 -- 這很容易出錯， 太不科學了啊! 還好有工具可以幫忙， 不必等 (最好不要等) 你熟悉 js， 從今天起就開始善用囉嗦龜毛的 jshint 與 jscs， 即使是像我這樣的新手也很容易被調教寫出 (至少形式上看起來) 漂亮整齊的程式碼。

假設你的程式叫做 main.js， 並且假設它用到 d3.js 。

首先用 root 的身份安裝 jshint： npm install -g jshint， 然後用 jshint main.js 就可做初步檢查。 又根據 JavaScript, the winning style 這一篇， 把它所建議的設定貼到你自己的 ~/.jshintrc 。 再次執行 jshint ， 發現它變得很龜毛， 印出很多錯誤。

再來還是用 root 的身份安裝 jscs： npm install -g jscs。 它一定要有設定檔才能執行。 從 這裡 隨便挑一個 -- 我挑 google -- 把你挑的 json 檔貼到你自己的 ~/.jscsrc 。 一樣執行： jscs main.js 看到一堆多到爆錶的錯誤訊息了嗎? 恭喜你開始聽到逆耳忠言了!

常見的錯誤及修正方式如下：

1. [jshint] 變數未宣告： 自己的變數當然就自己宣告； 但系統或函式庫所提供的全域變數該怎麼辦呢? 例如 console, window, d3 (d3.js 裡面定義的全域變數)? 根據 這個問答， 只要在程式碼最開頭加上這樣的註解， jshint 就不會再抱怨這幾個變數未定義： /* global window, console, d3 */ 雖然解答是來自 jslint 的文件， 但同樣適用於 jshint。
2. [jscs] 縮排 (indentation) 空格數不正確： 可以用這個 線上工具 指定每一層縮排的格數。
3. [jscs] 沒有採用 cammelCase 的方式為變數命名： 我自己原先習慣用底線方式命名 (some_useful_variable)， 所以寫了 toCammel.perl 來把我原始碼當中的所有 (含底線的) 變數名稱換掉。 注意： 我的 perl 程式可能會毀掉你的 js 程式! 請務必幫原來的程式碼保留備份， 充份測試後才可取代!

vim 用戶可以這樣做：

mkdir -p ~/.vim/autoload ~/.vim/bundle
cd ~/.vim/autoload
wget https://tpo.pe/pathogen.vim
cd ~/.vim/bundle
git clone git://github.com/walm/jshint.vim

並且在 ~/.vimrc 裡面加上一句： execute pathogen#infect() 此後就可直接在 vim 裡面打 :js「tab鍵」 檢查語法， 不必跳進跳出。 (從 這裡 看來的。) Geany 用戶請見 既輕鬆上手又無限擴充的跨平臺文字編輯器 「執行外部命令」那一節。

我自己最關心的是變數未宣告的錯誤， 所以對我而言 jshint 很重要； jscs 只是順便而已。 遇到太龜毛的規定 (「一句 var 只能宣告一個變數」、 「一列不能超過 80 個字元」) 我就乾脆改設定檔放寬規定。 通常拿錯誤訊息當中的一個字到設定檔裡面去撈， 就可以猜出來該如何改。 如果遇到比較麻煩的狀況， 請留言。 有沒有覺得取悅 jshint 跟 jscs、 讓錯誤訊息逐漸減少到 0， 是一件很有成就感的事呢 :-)