使用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 }
时间: 2024-11-01 19:57:37

使用grunt-contrib-jshint插件的相关文章

Grunt项目构建-插件学习

听说过Grunt也有两年了,用了也有两年了,然而都是在别人搭好的架子上做开发,当想要对前端工程化整体把控时就一脸懵逼了! Grunt是什么? Grunt是一套web前端工程化构建工具.(ps:关于Grunt的好处及安装网上教程一大堆,这里就不熬述了) 为什么说Grunt是一『套』工具呢,因为它提供了丰富的官方插件和第三方插件供开发者使用,开发者可根据项目需求灵活引用适合的插件,从而实现前端工程自动化的整体构建. Grunt和Grunt插件都基于nodeJs环境运行,Grunt的插件是基于npm来

grunt使用使用插件uglify配置详解

grunt-contrib-uglify uglify是一个文件压缩插件,项目地址:https://github.com/gruntjs/grunt-contrib-uglify 本文将以一个DEMO来展示如何使用uglify插件. DEMO环境 package.json: { "name": "grunt-demo", "version": "0.1.0", "devDependencies": { &q

Grunt构建工具插件篇——之less工具2

Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成.所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css.另一部分是配置,即传给grunt.initConfig方法的对象. 关于如何安装Grunt,创建Gruntfile.js文件本文不再详述,可以参考<用grunt搭建自动化的web前端开发环境>http://developer.51cto.com/art/201506/479127_1.htm 在终端

Grunt构建工具插件篇——之less工具

Grunt--Less 摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件. 安装: Grunt是基于node,功能模块化.你可以将grunt-contrib-less配置在package.json中然后npm install就完成安装了,也可以通过下面命令安装 npm install grunt-contrib-less --save-dev 注意: grunt-contrib-less是开发依

sublime jshint插件安装

下面是在sublime上配置jshint代码检查的详细步骤. 1.安装nodejs.下载地址:http://nodejs.org/download/ 2.在控制台安装jshint:$ npm install jshint -g 3.在sublime安装sublimelinter 4.在sublime安装jshint 5.配置sublimelinter:preference-package setting-sublimelinter-user { "sublimelinter": &qu

Grunt构建工具插件篇——之less工具3和watch配合自动化编译

grunt less转换成css速度慢 而且页面会全部刷新? 最近遇到了个问题,grunt里用less,当修改完.less里面的样式,对应 的.css文件会好几秒才修改,然后浏览器上显示也会耗时好几秒,有时候很慢,要不停保存啊刷新啊或者删掉.tem文件,下面是几张图,我估计是我 gruntfile里面配置的有问题,还在研究,写样式less可以嵌套,纯css写不能嵌套觉得会多写很多选择器,

Nodejs + Jshint自动化静态代码检查

1.   目的 提交代码前能够自动化静态代码检查,提高代码质量 2.   准备 1.    Nodejs安装: 官方地址:http://nodejs.org/ 安装说明:根据电脑配置下载对应的版本进行安装 检查安装是否成功: 2.    安装Grunt: GruntJs官方网址:http://www.gruntjs.org/ 安装说明: 1.进入命令行,安装grunt库 2.安装grunt-cli(安装后可以在命令行直接运行grunt命令) 3.检查是否安装成功: 3.    安装jshint

前端自动化工具 grunt 插件 jshint 的简单使用(四)

一.contrib-jshint 插件的使用 1.安装 "grunt-contrib-jshint "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-jshint --save-dev 2.在项目根目录下提供 jshint 插件任务配置需要的 src 目录和需要被检测的源文件(js 源文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 jshint 任务进行配置 // 包装函数module.expor

Grunt 之 使用 JavaScript 语法检查工具 jshint

前端开发环境准备好了,我们准备开始进行开发. 前端开发的主力语言是 JavaScript,这是一种脚本语言,没有编译器,也就没有了编译器带给我们的语法检查,怎样保证代码的质量呢?jshint 是一个强大的工具. 1. 概要说明 官方地址:http://jshint.com/ GitHub 地址:https://github.com/jshint/jshint JSHint 是一个使用 JavaScript 编写的 JavaScript 的代码质量检查工具,主要用来检查代码质量以及找出一些潜在的代

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe