JSLint使用教程
JavaScript 作為一門語法靈活多變且對格式要求相對松散的語言,代碼格式的混亂和某些語言特性的不正確使用,往往使得最終交付的產品中包含許多因編碼風格約定造成的未 預見的行為或錯誤,這種習慣性的問題如果不及時指出并修改,往往會在項目的迭代過程中不斷的重現,嚴重影響 Web 產品的穩定性與安全性。
JSLint 正是 Douglas Crockford 為解決此類問題創建的工具,JSLint 除了能指出這些不合理的約定,還能標出結構方面的問題。雖然 JSLint 不能保證代碼邏輯一定正確,但卻有助于發現錯誤并教會開發人員一些好的編碼實踐。值得一提的是 JSLint 工具本身也是一段 JavaScript 代碼,它是檢驗 JavaScript 代碼質量的 JavaScript 腳本。
JSLint 對 JavaScript 腳本的質量檢測主要包括以下幾個方面:
- 檢測語法錯誤:例如大括號“{}”的配對錯誤。
- 變量定義規范:例如未定義變量的檢測。
- 代碼格式規范:例如句末分號的缺失。
- 蹩腳語言特性的使用檢測:如 eval 和 with 的使用限制。
目前,與 JSLint 功能類似的 JavaScript 代碼檢測工具有很多,包括:YUI Test、Firebug、MS Script Debugger 、CompanionJS 等等,它們中大多數都是以瀏覽器插件的形式存在于客戶端瀏覽器進行 JavaScript 運行時的檢測和調試,JSLint 與這些工具的重要區別在于其更加注重靜態代碼格式的檢測,而這也正是當前火熱的敏捷開發中持續構建所需要和提倡的。
一.安裝JSLint插件
1.安裝Notepad++,下載地址:http://pan.baidu.com/s/1qWGu6du
2.安裝JSLint插件
打開Notepad++,在插件-插件管理(Plugin Manager)中打開插件管理展示
在Available中選中JSLint并且Install,插件安裝成功
二.JSlint的使用
1.隨意打開一個JS文件,然后選擇 插件>>JSLint>>JSLint Current File。
在控制臺也能進行快捷調試,在錯誤的地方右擊選擇Show能直接定位到錯誤所在地
2.插件>>JSLint>>option 里面包括一些選項,需要配置。
browser: true
允許瀏覽器預定義的全局函數。
例如:
setTimeout(function() { alert("a"); });
vars : true //允許每個函數有多個var聲明
sloppy: true //是否忽視嚴格模式"use strict";
maxerr : 允許做大的錯誤數,默認是50
每個js文件中JSLint所發現的最大錯誤數,錯誤過多時,只返回文件名和錯誤總數,不返回具體錯誤
其他的用默認即可。
predefined的內容:Ext,getConfig,setConfig,Highcharts,getCtrl,dojo,MyApp
3.技巧
JSLint可能會把一些結構方面的錯誤標志為可疑的編碼實踐,以下列出了其中一部分(完整的列表可以參考JSLint的文檔)http://www.jslint.com/lint.html。
①JSLint要求所有代碼行都以分號結束。盡管JavaScript確實允許將換行符作為行結束符,但一般認為這種做法是不明確的,而且是不好的編碼風格。
②使用if和for的語句必須使用大括號把語句塊括起來。
③不同于其他編程語言,在JavaScript中,塊不會作為變量的作用域。JavaScript只支持函數級作用域。因此,JSLint只接受作為function、if、switch、while、for、do和try語句一部分的塊,其他的塊都會標志為錯誤。
④var只能聲明一次,而且在使用之前必須聲明。
⑤JSLint會把出現在return、break、continue或throw語句后面的代碼標志為不可達的代碼。這些語句后面必須緊跟一個結束大括號。
⑥結合Ext,常見的錯誤有缺少或者多了空格,函數中缺少use strict:Missing 'use strict' statement.,{}未對齊,變量未定義,代碼寫在不是期望的位置等,這些大部分都可以在option里面配置是否驗證。
⑦for in 語句
避免遍歷原型鏈上所有屬性,建議如下寫法:
for(name in object) { if(object.hasOwnProperty(name)) { .... } }
三.參考資料
1.IBM文檔(使用JSLint保證代碼質量)
http://www.ibm.com/developerworks/cn/web/1105_linlin_jslint/
四.附-JSTool
在用JSLint規范代碼前可使用插件JSTool format一下代碼,減少需要修改的錯誤的數量