代碼檢查工具jshint和csslint

標籤：多個   jquery   tabs   cape   media   unsafe   cat   complex   equals   

前面的話

　　Douglas Crockford大神根據自己的理念用JavaScript寫了一個JavaScript代碼規範檢查工具，這就是JSLint。後來非常流行，也的確協助了廣大的JavaScript程式員。但是，大神對於自己的代碼規範不做絲毫的妥協，對開源社區的反饋的回應也不禮貌。於是，JSLint從一個協助程式員規範代碼，避免Bug的工具，變成了一個讓代碼像Crockford的工具。在最不信神的IT界，這當然不能忍了

　　2011年，一個叫Anton Kovalyov的前端程式員藉助開源社區的力量弄出來了JSHint，該工具的思想基本上和JSLint是一致的，但具有以下幾點優勢：1、可配置規則。2、社區支援度高。3、可定製結果報表

　　相對應地，CSS的代碼檢查工具是csslint。本文將詳細介紹jshint和csslint

 

安裝

　　JSHint的官方地址是http://jshint.com/，GitHub 地址：https://github.com/jshint/jshint

　　一般地，使用npm來安裝jshint。所以，首先需要安裝nodejs，然後使用npm install jshint -g命令來安裝jshint

　　然後就可以通過命令‘jshint xx.js‘來檢測代碼

【sublime外掛程式】

　　在sublime編輯器中也可以使用jshint外掛程式。使用快速鍵 Ctrl+Shift+P 呼出Sublime命令選擇區；然後鍵入install，並選擇Package Control:Install Package；然後再鍵入jshint，並選擇JSHint Gutter

　　安裝完成後，一般需要將‘node_path‘設定為正確的路徑

　　然後在當前檔案下，使用快速鍵Ctrl+Alt+J 就會顯示資訊

 

配置

　　在項目根目錄下建立一個 .jshintrc 檔案，這個檔案就是JSHint的設定檔，JSHint會自動識別這個檔案，根據這裡面的規則對檔案進行檢查

　　[注意]windows下並不允許建立檔案名稱前面帶點的檔案，解決辦法一種是直接在Sublime Text裡建立；另一種是使用命令列touch命令建立

　　JSHint的配置分為四類：

　　1、Enforcing(增強)：如果這些屬性設定為true，JSHint會對代碼進行更嚴格的檢查，比如是否使用嚴格（strict）模式、變數駝峰式命名、是不是for-in迴圈裡必須得有hasOwnProperty等等

　　2、Relaxing(鬆弛)：如果這些屬性設定為true，JSHint會容忍規則中定義的情況出現。比如是否使用分號，是否支援下一代ES文法等等。

　　3、Environments(環境)：如果這些屬性設定為true，表示代碼所處的環境

　　4、globals(全域變數)：自訂的一些全域變數

【增強】

bitwise               禁用位元運算符camelcase             使用駝峰命名(camelCase)或全大寫底線命名(UPPER_CASE)curly                 在條件或迴圈語句中使用{}來明確代碼塊eqeqeq                使用===和!==替代==和!=es3                   強制使用ECMAScript 3規範es5                   強制使用ECMAScript 5規範forin                 在for in迴圈中使用Object.prototype.hasOwnProperty()來過濾原型鏈中的屬性freeze                禁止複寫原生對象(如Array, Date)的原型immed                 匿名函數調用必須(function() {}());而不是(function() {})();indent                代碼縮排寬度latedef               變數定義前禁止使用newcap                建構函式名首字母必須大寫noarg                 禁止使用arguments.caller和arguments.calleenoempty               禁止出現空的代碼塊nonew                 禁止使用構造器plusplus              禁止使用++和–-quotemark             統一使用單引號或雙引號undef                 禁止使用不在全域變數列表中的未定義的變數unused                禁止定義變數卻不使用strict                強制使用ES5的strict 模式trailing              禁止行尾空格maxparams             函數可以接受的最大參數數量maxdepth              代碼塊中可以嵌入{}的最大深度maxstatement          函數中最大語句數maxcomplexity         函數的最大循環複雜度maxlen                一行中最大字元數

【鬆弛】

asi          　　　　　允許省略分號boss        　　　　　 允許在if，for，while語句中使用賦值debug        　　　　　允許debugger語句eqnull       　　　　　允許==nullesnext       　　　　  允許使用ECMAScript 6evil            　　　 允許使用evalexpr                  允許應該出現賦值或函數調用的地方使用運算式funcscope             允許在控制體內定義變數而在外部使用globalstrict          允許全域strict 模式iterator           　 允許__iterator__lastsemic             允許單行控制塊省略分號laxbreak              允許不安全的行中斷laxcomma        　　　 允許逗號開頭的編碼樣式loopfunc              允許迴圈中定義函數maxerr        　　　　 JSHint中斷掃描前允許的最大錯誤數multistr        　　  允許多行字串notypeof        　　　 允許非法的typeof操作proto                 允許 protosmarttabs        　　  允許混合tab和space排版shadow            　　 允許變數shadowsub            　　　　 允許使用person[‘name’]supernew        　　　 允許使用new function() {…}和new Objectvalidthis        　　  允許strict 模式下在非建構函式中使用thisnoyield        　　　  允許發生器中沒有yield語句

【環境】

browser              Web Browser (window, document, etc)browserify           Browserify (node.js code in the browser)jquery               jQuerynode                 Node.jsqunit                QUnittyped                Globals for typed array constructionsworker               Web Workerswsh                  Windows Scripting Host

【全域變數】

globals: {      jQuery: true,      console: true,      module: true    }

　　JSHint的預設配置如下所示

{    // JSHint Default Configuration File (as on JSHint website)    // See http://jshint.com/docs/ for more details    "maxerr"        : 50,       // {int} Maximum error before stopping    // Enforcing    "bitwise"       : true,     //Prohibit bitwise operators (&, |, ^, etc.)    "camelcase"     : false,    //Identifiers must be in camelCase    "curly"         : true,     //Require {} for every new block or scope    "eqeqeq"        : true,     //Require triple equals (===) for comparison    "forin"         : true,     //Require filtering for in loops with obj.hasOwnProperty()    "freeze"        : true,     //prohibits overwriting prototypes of native objects    "immed"         : false,    //Require immediate invocations to be wrapped in parens    "latedef"       : false,    //Require variables/functions to be defined before being used    "newcap"        : false,    //Require capitalization of all constructor functions    "noarg"         : true,     //Prohibit use of `arguments.caller` and `arguments.callee`    "noempty"       : true,     //Prohibit use of empty blocks    "nonbsp"        : true,     //Prohibit "non-breaking whitespace" characters.    "nonew"         : false,    //Prohibit use of constructors for side-effects    "plusplus"      : false,    //Prohibit use of `++` and `--`    "quotmark"      : false,       "undef"         : true,     //Require all non-global variables to be declared    "unused"        : true,         "strict"        : true,     //Requires all functions run in ES5 Strict Mode    "maxparams"     : false,    // {int} Max number of formal params allowed per function    "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)    "maxstatements" : false,    // {int} Max number statements per function    "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function    "maxlen"        : false,    // {int} Max number of characters per line    "varstmt"       : false,        // Relaxing    "asi"           : false,     //Tolerate Automatic Semicolon Insertion (no semicolons)    "boss"          : false,     //Tolerate assignments where comparisons would be expected    "debug"         : false,     //Allow debugger statements e.g. browser breakpoints.    "eqnull"        : false,     //Tolerate use of `== null`    "esversion"     : 5,             "moz"           : false,     //Allow Mozilla specific syntax                                     "evil"          : false,     //Tolerate use of `eval` and `new Function()`    "expr"          : false,     //Tolerate `ExpressionStatement` as Programs    "funcscope"     : false,     //Tolerate defining variables inside control statements    "globalstrict"  : false,     //Allow global "use strict" (also enables ‘strict‘)    "iterator"      : false,     //Tolerate using the `__iterator__` property    "lastsemic"     : false,         "laxbreak"      : false,     //Tolerate possibly unsafe line breakings    "laxcomma"      : false,     //Tolerate comma-first style coding    "loopfunc"      : false,     //Tolerate functions being defined in loops    "multistr"      : false,     //Tolerate multi-line strings    "noyield"       : false,     //Tolerate generator functions with no yield statement    "notypeof"      : false,     //Tolerate invalid typeof operator values    "proto"         : false,     //Tolerate using the `__proto__` property    "scripturl"     : false,     //Tolerate script-targeted URLs    "shadow"        : false,     //Allows re-define variables later in code     "sub"           : false,         "supernew"      : false,     //Tolerate `new function () { ... };` and `new Object;`    "validthis"     : false,     //Tolerate using this in a non-constructor function    // Environments    "browser"       : true,     // Web Browser (window, document, etc)    "browserify"    : false,    // Browserify (node.js code in the browser)    "couch"         : false,    // CouchDB    "devel"         : true,     // Development/debugging (alert, confirm, etc)    "dojo"          : false,    // Dojo Toolkit    "jasmine"       : false,    // Jasmine    "jquery"        : false,    // jQuery    "mocha"         : true,     // Mocha    "mootools"      : false,    // MooTools    "node"          : false,    // Node.js    "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)    "phantom"       : false,    // PhantomJS    "prototypejs"   : false,    // Prototype and Scriptaculous    "qunit"         : false,    // QUnit    "rhino"         : false,    // Rhino    "shelljs"       : false,    // ShellJS    "typed"         : false,    // Globals for typed array constructions    "worker"        : false,    // Web Workers    "wsh"           : false,    // Windows Scripting Host    "yui"           : false,    // Yahoo User Interface    // Custom Globals    "globals"       : {}        // additional predefined global variables}

　　有時候，我們不希望它檢查一些檔案（比如一些庫檔案），這時候可以建立一個 .jshintignore 檔案，把需要忽略的檔案名稱寫在裡面（支援萬用字元），同樣放到項目根目錄下即可

build/src/**/tmp.js

 

CSSLint

　　CSSLint的安裝比較簡單，使用npm install csslint -g安裝即可

　　安裝sublime外掛程式的方式也類似於jshint

　　在項目根目錄下建立一個 .csslintrc 檔案，這個檔案就是CSSLint的設定檔，CSSLint會自動識別這個檔案，根據這裡面的規則對檔案進行檢查 

【規則】

　　就CSSLint而言，最重要的規則是確保CSS中不存在解析錯誤。解析錯誤通常意味著錯誤地輸入字元，並導致代碼變為無效的CSS。這些錯誤可能導致瀏覽器刪除屬性或整個規則

　　CSSLint的規則主要包括以下6種

　　1、潛在錯誤

box-model        　　　　　 設定width或height的同時，還設定為border或padding，則必須設定box-sizingdisplay-property-grouping 設定display屬性時，不能包含其他不必要的代碼，如display:inline，又設定height值duplicate-properties     　不允許包含重複的樣式屬性empty-rules            　　不允許包含空樣式規則known-properties      　　　不允許使用不識別的樣式屬性

　　2、相容性

adjoining-classes     　　　　　 不要使用相鄰選取器，如.a.b{}box-sizing           　　　　　　box-sizing不要與相關屬性同用compatible-vendor-prefixes     需要相容第三方首碼gradients        　　　　　　　　 需要所有的漸層定義text-indent    　　　　　　　　　　不能使用負值vendor-prefix    　　　　　　　　 第三方首碼和標準屬性一起使用fallback-colors    　　　　　　　 需要指定備用顏色star-property-hack    　　　　  不能使用‘*‘hackunderscore-property-hack       不能使用‘_‘hackbulletproof-font-face          需要使用備用字型

　　3、效能

font-faces        　　　　  　　　不能使用超過5個web字型import        　　　　　　　 　　  禁止使用@importregex-selectors        　　　　  禁止使用屬性選取器中的Regex選取器universal-selector    　　 　　  禁止使用通用選取器*unqualified-attributes    　　　禁止使用不規範的屬性選取器zero-units            　　 　　　0後面不要加單位overqualified-elements    　　　使用相鄰選取器時，不要使用不必要的選取器shorthand        　　　　　　　　 簡寫樣式屬性duplicate-background-images    相同的url在樣式表中不超過一次

　　4、可維護性

floats    　　 不使用超過10次的浮動font-sizes    不使用超過10次的font-sizeids        　　不使用id選取器important     不使用!important

　　5、可訪問性

outline-none    禁用outline:none

　　6、OOCSS

qualified-headings    <h1-h6>應該被設定為頂級樣式，所以.box h3{}會提示警告；而h3{}則不會unique-headings    當多個規則定義針對同一標題的屬性時，會出現警告

 　　CSSLint的常用配置如下

{    "adjoining-classes":false,    "box-sizing":false,    "box-model":false,    "compatible-vendor-prefixes": false,    "floats":false,    "font-sizes":false,    "grandients":false,    "important":false,    "known-properties":false,    "outline-none":false,    "qualified-headings":false,    "regex-selectors":false,    "shorthand":false,    "text-indent":false,    "unique-headings":false,    "universal-selector":false,    "unqualified-attributes":false}

 

代碼檢查工具jshint和csslint