代碼檢查工具jshint和csslint

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/05/28/6914830.html
-Advertisement-
Play Games

前面的話 Douglas Crockford大神根據自己的理念用JavaScript寫了一個JavaScript代碼規範檢查工具，這就是JSLint。後來非常流行，也的確幫助了廣大的JavaScript程式員。但是，大神對於自己的代碼規範不做絲毫的妥協，對開源社區的反饋的回應也不禮貌。於是，JSLi ...


前面的話

　　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.callee
noempty               禁止出現空的代碼塊
nonew                 禁止使用構造器
plusplus              禁止使用++和–-
quotemark             統一使用單引號或雙引號
undef                 禁止使用不在全局變數列表中的未定義的變數
unused                禁止定義變數卻不使用
strict                強制使用ES5的嚴格模式
trailing              禁止行尾空格
maxparams             函數可以接受的最大參數數量
maxdepth              代碼塊中可以嵌入{}的最大深度
maxstatement          函數中最大語句數
maxcomplexity         函數的最大圈複雜度
maxlen                一行中最大字元數

【鬆弛】

asi          　　　　　允許省略分號
boss        　　　　　 允許在if，for，while語句中使用賦值
debug        　　　　　允許debugger語句
eqnull       　　　　　允許==null
esnext       　　　　  允許使用ECMAScript 6
evil            　　　 允許使用eval
expr                  允許應該出現賦值或函數調用的地方使用表達式
funcscope             允許在控制體內定義變數而在外部使用
globalstrict          允許全局嚴格模式
iterator           　 允許__iterator__
lastsemic             允許單行控制塊省略分號
laxbreak              允許不安全的行中斷
laxcomma        　　　 允許逗號開頭的編碼樣式
loopfunc              允許迴圈中定義函數
maxerr        　　　　 JSHint中斷掃描前允許的最大錯誤數
multistr        　　  允許多行字元串
notypeof        　　　 允許非法的typeof操作
proto                 允許 proto
smarttabs        　　  允許混合tab和space排版
shadow            　　 允許變數shadow
sub            　　　　 允許使用person[‘name’]
supernew        　　　 允許使用new function() {…}和new Object
validthis        　　  允許嚴格模式下在非構造函數中使用this
noyield        　　　  允許發生器中沒有yield語句

【環境】

browser              Web Browser (window, document, etc)
browserify           Browserify (node.js code in the browser)
jquery               jQuery
node                 Node.js
qunit                QUnit
typed                Globals for typed array constructions
worker               Web Workers
wsh                  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-sizing
display-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    　　　　  不能使用'*'hack
underscore-property-hack       不能使用'_'hack
bulletproof-font-face          需要使用備用字體

　　3、性能

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

　　4、可維護性

floats    　　 不使用超過10次的浮動
font-sizes    不使用超過10次的font-size
ids        　　不使用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
}

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Java JDBC 操作
    1.簡介 JDBC(Java DataBase Connectivity) 是一種可用於執行SQL語句的Java API，是一套面向對象的應用程式介面， 統一了資料庫的訪問方式，資料庫廠商提供了實現介面的類，稱為‘驅動程式’。因此JDBC並不能直接訪問資料庫， 需要依賴資料庫廠商提供的JDBC驅動程 ...
  • Python多線程和多進程誰更快？
    python多進程和多線程誰更快 python3.6 threading和multiprocessing 四核+三星250G 850 SSD 自從用多進程和多線程進行編程,一致沒搞懂到底誰更快。網上很多都說python多進程更快，因為GIL(全局解釋器鎖)。但是我在寫代碼的時候，測試時間卻是多線程更 ...
  • 詳解 Python3 正則表達式（一）
    本文翻譯自：https://docs.python.org/3.4/howto/regex.html 博主對此做了一些批註和修改 ^_^ 正則表達式介紹 正則表達式（Regular expressions 也稱為 REs，或 regexes 或 regex patterns）本質是一個微小的且高度專 ...
  • 我的第一個Java程式
    我的第一個Java程式： class Test{ public static void main(String[] args) { System.out.println("這是我的第一個java程式"); }} 註意：類名首字母需要大寫。 運行步驟： 1.在記事本（或UE）中創建Java源程式 或 ...
  • 對yield的初步理解
    1 def go(): 2 while True: 3 data = 1 4 r = yield data # data是返回值，r是接收值 5 print("data", data) 6 print("A1", r) 7 data += 1 8 9 r = yield data 10 print( ...
  • JDFS:一款分散式文件管理實用程式第二篇(更新升級、解決一些bug)
    根據上一篇博客我們知道，JDFS的服務端主程式在epoll裡面先recv客戶端的數據，然後解析頭部，根據請求類型，把作業交給線程池來執行。對於查詢、下載部分的功能這是沒有問題的，因為查詢、下載部分客服端只是發送一個頭部過來，服務端接收後解析的過程不會太占用多少時間。而如果是上傳功能的話，服務端rec... ...
  • Java開發中的23種設計模式詳解
    設計模式（Design Patterns） ——可復用面向對象軟體的基礎 設計模式（Design pattern）是一套被反覆使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問，設計模式於己於他人於系統都是多贏的， ...
  • CSS應用的小問題總結
    1.兩個元素換行書寫時，在實際的佈局中展示為兩個元素之間多了一個區間（這個區間通常是因為代碼在換行時，解析會自動預設為一個空格字元），所以在實際應用時，如果想要將兩個元素完全無縫隙的放置在一起併排顯示時，應該註意使用浮動和定位，或者可以通過設置父級元素的font-size:0;的方法； 2.使用絕對 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類