Work with JSHint using Sublime Text 2

寫 JavaScript的時候常常會因為他多元的用法(結構較為鬆散或是說它組合較多元)而感到困惑,或因為不好的習慣導致自己浪費了大量效能做出一個很簡單的東西,這邊要如何驗證自己寫的Javascript有沒有水準符不符合基本規範呢?此時除了定義一些開發上面的規範外,我們還需要一些工具來幫我們做檢查,JSLint就是這行的老牌子工具。

LOGO

JSLint VS JSHint

JSLint 定義了一組比 ECMAScript Language Specification 第三版(應該沒比第五版嚴謹,這部分還在追查)所定義的規格中更嚴謹的規格來驗證你的 JavaScript,這邊找到保哥幾年前寫的文章介紹,有興趣的可以進去看看摟。

而JSHint是JSLint其中一個分支,為什麼寫這個分支的理由在此:Why I forked jslint to jshint?.而簡單來講,因為在實務上有些JSLint規範太過嚴格的部分作出了部分的取捨而成的子集就成為了JSHint,而JSHint也還可以讓你自行條件檢查的修改,看是否要開啓或關閉。

Sublime Text2版

前置工作

  1. 安裝Sublime Text2
  2. 安裝Package Control
  3. 透過Package Control安裝JSHint套件

實際使用流程

實際經驗是告訴我最好先用html-css-js pretty先做過一次排版你可以少掉很多問題~

流程上就是先按下command+shift+H用html-css-js pretty從新整理你的code,然後再按下command+shit+J用JSHint來檢查:

以下是原始版本:

sublime 1

整理完的的版本:

sublime 2

按下JSHint修改完的版本:

sublime 3

小小一段code 是不是差異很多啊!,最後的版本會看到它還是有提醒我有兩個沒通過的檢查,但因為這邊跟我使用AngularJS與AngularJS UI-Routing的套件有關,所以我們可以不用管它,這份code就可以開心上git摟!

條件修改

如果對於預設的檢測需要做條件修改,可到上方的Tools->JSHint->Set Linting Preferences就可以進去修改了,如下:

Preferences

至於有什麼可以修改的就參考官方說明

環境設定

除了一般手動檢查外,我們也可以透過Tools->JSHint->Set Plug Options 設定Sublime Text2插件在環境的特殊選項,讓他在每次編輯或是存檔的時候幫我們做自動檢查。

env

結語

在很早很早以前,當JSLint剛推出的時候還要上官網把自己的code放進去檢查,現在在開發時的時候就可以養成良好的開發習慣了,小細節成就偉大!千萬不要養成不好的寫法與習慣啊!

而對於最新的ECMA Script5這邊有些JSLint與JSHint的檢查比較,對於這塊還不能很深刻做專研但看來JSLint目前對於ES5的支援是很悲劇的QQ。