Grunt Use the JavaScript grammar checker tool Jshint

The front-end development environment is ready and we are ready to begin development.

Front-end development of the main language is JavaScript, which is a scripting language, there is no compiler, there is no compiler to give us a grammar check, how to ensure the quality of the code? Jshint is a powerful tool.

1. Summary description

Official address: http://jshint.com/

GitHub Address: Https://github.com/jshint/jshint

Jshint is a code quality checker for JavaScript written using JavaScript, primarily to check the quality of the code and to identify potential code flaws.

2. Download Jshint

Download a jshint with NPM let's test it.

NPM Install Grunt-contrib-jshint--save-dev

See the following output

PS c:\study\framework> npm Install Grunt-contrib-jshint--SAVE-DEVNPM WARN Peerdependencies the peer dependency [email protected]>=0.4.0 included from grunt-contrib-Jshint would nonpm WARN peerdependencies longer be automatically installed to fulfill the PEERDEPENDENCYNPM WARN peerdepend Encies in NPM. Your application would need to depend on it explicitly. [Email protected]Node_modules\grunt├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected] ([email protected], [email protected]) ├──[email protected]  ├──[email protected]  ├──[email protected]  ├──[email  protected]  ├──[email protected] ([email protected] ) ├──[email protected] ([email  protected], [email protected] ) ├──[email protected] ([email protected], [email  protected], [email protected] ) ├──[email protected] ([email protected], [email protected ] ) └──[email protected] ([email protected], [email protected] ) [email protected] node_modules\grunt-contrib- jshint├──[email protected]  └──[email protected] ([email  protected], [email protected], [email protected], [email protected], [email protected] , [ email protected]0.6.6, [email protected], [email protected])      

Re-view the Package.json and see the dependency instructions that have been added to the jshint.

{  "name": "Framework",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "Dependencies": {"grunt": "^0.4.5", "Grunt-contrib-jshint": "^0.11.2" }, "Devdependencies": {"Grunt-contrib-jshint": "^0.11.2" }, "Scripts": {"test": "Echo \" Error:no test specified\ "&& exit 1 " }," Author ":" "," license ":" ISC "}           

3. Configure the Jshint test Javascrpt script in Grunt

In our project folder root directory, create a front-end project source folder app, where you create a scripts folder to hold the scripts we write.

Create a script file named App.js and write the following.

//Hello.////This is Jshint, a-tool, helps to detect errors and potential//problems in your JavaScript code.////to start, simply enter some JavaScript anywhere on the This page. Your//Report would appear on the right side.////Additionally, you can toggle specific options in the Configure//menu.functionMain () {return' Hello, world! ';} Main ();

We need to configure the Jshint task in grunt.

Module.exports =function(grunt) {//Project configuration.Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '),    //Make sure code styles is up to par and there is no obvious mistakes    //Code style Check    //Code CheckJshint: {all: [' App/**/*.js '], Options: {browser:true,//Browser EnvironmentDeveltrue                //             }    }  }); Grunt.loadnpmtasks (' Grunt-contrib-jshint ');};

All of the script file paths that need to be checked are configured in the options, and browser is used to configure that our scripts need to be executed in a browser environment so that the console, SetTimeout, and so on can be used in our script.

Now execute grunt hint to see the following output.

PS c:\study\framework>"jshint:all"  (jshint) Task1  Filefree.  Done, without errors. 

If you put the semicolon after main () in the script (;) removed, re-examined, you will find jshint play a role. It tells us that the 16th line of the App.js file is missing a semicolon after main () (;)

PS c:\study\framework>"jshint:all"  (jshint) Task   app/scripts/ app.js       | Main ()                ^ Missing semicolon. 1 inch 1 file  "jshint:all" failed. Use – Force tocontinue.  Aborted due to warnings. 

4. With JQuery

In the case of the JQuery script library, our function might be, using Jqeury's ready function to get started.

"Use strict"function() {    console.info (' Hello, World ') );});

When you use the Jshint check, you will find that $ is a problem.

 PS c:\study\framework> Grunt jshintrunning " Jshint:all " (jshint) Task app /scripts/app.js  1 | '         Use strict ' ;       ^ Use the function  form of "use strict"  3 |$ (function   () { ^ ' $ '  is not defined.  >> 2 errors in  1 Filewarning:task  " Jshint:all "failed. Use--force to continue  .  

The first error is the Jshint Rule strict mode directive in the outermost scope of the code causes that we should "use strict"; In the first line inside the function.

Specific reason: Http://jslinterrors.com/use-the-function-form-of-use-strict

The second mistake is to say that jshint hints that you do not know $, ' $ ' is not defined.

JQuery is defined in another library, and we're just using it here. Configuration $ is a global variable that can be configured in Jshint.

The script is modified to:

function () {    "use strict";        Console.info (' Hello, world. ') );});

Gruntfile.js revision changed to

Module.exports =function(grunt) {//Project configuration.Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '),      //Make sure code styles is up to par and there is no obvious mistakes    //Code style Check    //Code CheckJshint: {all: [' App/**/*.js '], Options: {globals: {$:false, JQuery:false}, Browser:true,//Browser EnvironmentDeveltrue                //             }    }  }); Grunt.loadnpmtasks (' Grunt-contrib-jshint '); Grunt.registertask (' Default ', ' Hello, World Task description. ',function() {Grunt.log.writeln (' Hello, world. '); });};

5. Options

Any configuration options are passed to jshint with transparent bottom, so you can configure any features that Jshint supports. The supported features are shown in Jshint documentation.

Some additional features are supported here:

Globals

Type:Object
Default:null

Defines a dictionary of global variables, Key is the name of the global variable, and the Boolean value is used to represent the assignable value. This is not a standard option for Jshint, but is passed to Jshint as the third parameter.

Jshintrc

Type: String ortrue
Default:null

If set to True, the configuration parameters here are not passed to Jshint,jshint and will get the parameters through the. jshintrc file.

If a file name is set, the configuration parameters will be obtained from this document. This jshintrc file must be a valid JSON file, similar to this.

{  true  ,  True, True,  True  ,  "Globals": {    true  }}

It is important to note that the configuration information for the JSHINTRC file is not merged with the configuration in Gruntfile.js.

Extensions

Type:String
Default:‘‘

List of non-DOT-JS extensions that need to be checked.

Ignores

Type:Array
Default:null

List of files and directories that need to be ignored. The. jshintignore file will be overwritten.

Force

Type:Boolean
Default:false

Set to True to report a jshint error without losing the task.

Reporter

Type:String
Default:null

Allows modify this plugins output. By default it would use a built-in Grunt reporter. Set the path to your own custom reporter or to one of the built-in Jshint reporters: jslint or checkstyle .

Allows you to modify the output plug-in, using the Grunt built-in reporter by default. Can be configured as a custom reporter path, or jshint one of the built-in rapporteurs: JSLint or Checkstyle.

See Also:writing your own Jshint reporter.

You can specify an external reporter, for example: Jshint-stylish:

First install via NPM.

Install --save-dev jshint-stylish

Then configure the

options: {    reporter:require (' Jshint-stylish ')}

Reporteroutput

Type:String
Default:null

The output path of the configuration report. If configured, the output will not be output to the standard output stream, but the path to this setting.

Example wildcards

In this example, running grunt jshint:all (or grunt jshint because is jshint a multi task) would lint the project ' s gruntfile as well as all J Avascript files lib test in the and directories and their subdirectorieses, using the default Jshint options.

The following example executes Grunt Jshint:all (since Jshint is a multitasking task that can be used directly with grunt Jshint), the default Jshint configuration will be used. Check any JS file below Gruntfile.js,lib, test any JS file below,

// Project configuration. grunt.initconfig ({  jshint: {all    : [' gruntfile.js ', ' lib/**/*.js ', ' test/**/*.js ']  }});

Linting before and after concatenating

In this example, the execution of grunt Jshint will check all the files for ' beforeconcat ' and ' Afterconcat ', which is not ideal because dist/output.js will grunt-contrib-concat in plugin The concat task is checked before it is created.

In this case, you should first check the files in ' Beforeconcat ', then merge the files, and then check the files in ' Afterconcat ' to do so: grunt jshint:beforeconcat concat jshint:afterconcat .

// Project configuration. grunt.initconfig ({  concat: {    dist: {      src: [' src/foo.js ', ' src/bar.js '],      ' dist/ Output.js '}  ,  jshint: {    beforeconcat: [' src/foo.js ', ' src/bar.js '],    Afterconcat: [' Dist/output.js ']  }});

Specifying Jshint options and Globals

This example demonstrates the configuration of a custom jshint. Note that when Grunt Jshint:uses_defaults executes, the default configuration will be used, but when grunt Jshint:with_overrides executes, the merged configuration will be used.

//Project configuration.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 ']      },    }  },});

Ignoring specific warnings

If you want to ignore a specific warning:

' }'9.

You can turn it off by adding a minus sign (-) before the warning sign.

grunt.initconfig ({  jshint: {    ignore_warning: {      options: {        true      } ,      src: [' **/*.js ',},}    ,}  );

Grunt using the JavaScript grammar checker Jshint