grunt-contrib-jshint使用

使用grunt-contrib-jshint插件

jshint：A Static Code Analysis Tool for JavaScript（javascript驗證工具）。它有很多種安裝方法。http://jshint.com/install/。這篇文章主要介紹作為grunt插件的安裝方法。

1、安裝jshint

　　安裝前提：需要安裝node和grunt。http://blog.csdn.net/wangfupeng1988/article/details/46418203

　　①windows平台下：npm install grunt-contrib-jshint --save-dev

　　②其他平台前面加sudo

　　③注：--save-dev是為了在package.json自動建構devDependencies。可手動設定。

2、配置

　　①可在Gruntfile.js中進行配置，

grunt.initConfig({
  jshint: {
    options: {
      curly: true,
      eqeqeq: true,
      eqnull: true,
      browser: true,
      globals: {
        jQuery: true
      },
    },
    uses_defaults: ['dir1/**/*.js', 'dir2/**/*.js'],
    with_overrides: {
      options: {
        curly: false,
        undef: true,
      },
      files: {
        src: ['dir3/**/*.js', 'dir4/**/*.js']
      },
    }
  },
});
      

 　　②可使用外部jshintrc檔案，加下劃線的代碼表示的是與Gruntfile.js相同目錄的jshintrc檔案，也可以是其他目錄下的jshintrc檔案，使用相對目錄就行了。

grunt.initConfig({
  jshint: {
    options: {
      jshintrc: '.jshintrc'
    },
    uses_defaults: ['dir1/**/*.js', 'dir2/**/*.js'],
    with_overrides: {
      options: {
        curly: false,
        undef: true,
      },
      files: {
        src: ['dir3/**/*.js', 'dir4/**/*.js']
      },
    }
  },
});      

　　.jshintrc檔案(标準JSON檔案)：

{
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "browser": true,
  "globals": {
    "jQuery": true
  }
}      

3、配置參數解釋

　　bitwise：是否禁止使用位運算，因為在javascript使用位運算的時候很少，并且很多時候會把&&錯寫為&。

　　camelCase：驗證變量是否是駱駝式或UPPER_CASE寫法；過時的，在後面的jshint中會移除。

　　curly：使用大括号，比如if(true) dosomething();需要使用大括号，if(true) {dosomething();}

　　eqeqeq：強制==(!=)為===(!==)

　　es3：按照ECMAScript 3标準執行，針對IE6/7/8/9

　　es5：按照ECMAScript 5.1标準執行，對于低級的浏覽器不适用

　　forin：驗證循環的屬性是否是對象自己的，而不是繼承的。如果沒有使用hasOwnproperty會報錯

　　freeze：禁止重寫本地對象的原型鍊，如禁止Array.property.someAttr = function(){};

　　funcscope：如果局部作用域使用了外部變量，則提示。

　　futurehostile：提示是否使用了未來可能會出現的辨別符

　　globals：設定全局變量白名單

　　iterator：疊代器，所有浏覽器都不支援。

　　latedef：This option prohibits the use of a variable before it was defined.

　　maxcomplexity：最大複雜度

　　maxdepth：最大深度

　　maxerr：最大警告數，預設為50

　　maxlen：每一行代碼的最大長度；過時的，将被移除

　　maxparams：每個函數的最大參數個數

　　maxstatements：每一個函數最多包含的statement的數目

　　noarg：禁止使用

arguments.caller

 和 

arguments.callee

. 

　　nocomma：在一個statement中禁止使用逗号，好無理的要求

　　noempty：禁止空的block，過時的，将被移除

　　nonbsp：禁止空格

　　nonew：禁止使用不指派的構造函數，例：new NewConstructor();

　　notypeof：在使用typeof的時候，對比的值不存在typeof結果清單中，警告

　　shadow：http://jshint.com/docs/options/#shadow

　　singleGroups：http://jshint.com/docs/options/#singleGroups

　　strict：ECMAScript 5嚴格模式

　　undef：未聲明變量

　　unused：未使用變量

　　varstmt：禁止使用var申明變量

　　asi：分号

　　boss：http://jshint.com/docs/options/#boss

　　debug：如果出現debugger statement，則報錯

　　elision：uses ES3 array elision elements

　　eqnull：如果代碼中使用了==null，則報錯，無理的要求。

　　esnext：使用ECMAScript 6文法解析，可惜的是ECMAScript還未定稿，是以這個驗證也不标準。并且沒有任何浏覽器實作ECMAScript 6.

　　evil：當使用eval的時候報錯

　　expr：http://jshint.com/docs/options/#expr

　　gloablstrict：當使用全局嚴格模式時報錯

　　lastsemic：允許在塊的最後不适用分号

　　loopfunc：http://jshint.com/docs/options/#loopfunc

　　moz：Mozilla JavaScript 擴充

　　plusplus：禁止使用++和--

　　proto：當使用__proto__時報錯

　　scripturl：http://jshint.com/docs/options/#scripturl

　　supernew：禁止使用這些操作：

new function () { ... }

 and 

new Object;

.

　　validthis：驗證this變量

　　withstmt：禁止使用with操作

　　

　　browser：浏覽器環境

　　其他生産環境：http://jshint.com/docs/options/#environments

4、常用的參數

　　bitwise、curly、eqeqeq、es3、forin、freeze、funcscrop、futurehostile、globals、latedef、noarg、nonbsp、notypeof、strict、undef、unused

　　asi、eqnull、evil、expr、globalstict、loopfunc、plusplus、validthis、withstmt

　　生産環境：browser、jquery、dojo、node、qunit、prototypejs、yui

5、加載插件，在grunt.initConfig代碼之後

　　grunt.loadNpmTasks('grunt-contrib-jshint');

6、注冊任務，在加載插件之後

　　grunt.registerTask('core-js', ['jshint:core']);

7、使用，在終端中輸入以下代碼

　　grunt core-js

8、例子：

　　

1 // Gruntfile.js檔案
 2 module.exports = function( grunt ) {
 3   'use strict';
 4 
 5   grunt.initConfig({
 6 
 7     pkg : grunt.file.readJSON('package.json'),
 8 
 9     jshint : {
10       options : {
11         jshintrc : '.jshintrc'
12       },
13       core : {
14         src : 'src/js/**/*.js'
15       }
16     }
17 
18   });
19 
20   grunt.loadNpmTasks('grunt-contrib-jshint');
21 
22   grunt.registerTask('core-js', ['jshint:core']);
23 
24   grunt.registerTask('default', []);
25 };      

1 // .jshintrc檔案代碼，标準json格式，與Gruntfile.js同一級目錄
 2 {
 3   "bitwise": true,
 4   "curly": false,
 5   "eqeqeq": false,
 6   "es3": true,
 7   "freeze": true,
 8   "funcscrop": true,
 9   "futurehostile": true,
10   "latedef": true,
11   "noarg": true,
12   "nonbsp": true,
13   "notypeof": true,
14   "strict": true,
15   "undef": true,
16   "unused": true,
17   "asi": true,
18   "eqnull": true,
19   "evil": true,
20   "globalstrict": true,
21   "loopfunc": true,
22   "plusplus": false,
23   "validthis": true,
24   "withstmt": true,
25   "browser": true,
26   "jquery": true
27 }