JavaScript Code checker tool-jshint

Static code inspection is an indispensable part of development work, after all, for the programmatic work of the eyes of the person is not reliable, let alone the eyes to see their own code. Even if the final run result is passed, there may be undefined variables, defined but last unused variables, semicolons with no addition (see Team Rules), and other issues. The tools that give power are indispensable.

In this article to introduce the jshint before the JSLint, Douglas's work, should be a companion to the essence of JavaScript ... Ask you to use its rules, for a flexible language such as JavaScript, or to use a flexible tool, jshint is that.

Installation

You'll need to install Nodejs and NPM First, then npm Install -G jshint .

This allows you to use Jshint with the command line.

Of course he also provides a huge number of editor plugins, such as Sublime Text 3.

And plugins like grunt or gulp.

Configuration

You can use it after installation.

Command line Direct: jshint myfile.js is OK, the command line can display errors or warnings.

The editor is generally displayed directly on the line number of errors or warnings. For example Sublime3, under the current file, the shortcut key ctrl+alt+j will display the message ( ctrl+alt+c off information Display):

More shortcuts to see the plugin settings, can be customized.

However, these displays are jshint default configurations, and we can customize the configuration to better meet the requirements.

It is also very simple to create a . jshintrc file under the project root, which is the Jshint configuration file, Jshint will automatically recognize the file and check your files according to the rules.

(under Windows to establish the front with the point of the file will not be built, a method directly in the sublime text, another way to add a point after the file name)

The Jshint configuration is divided into four categories:

1, enforcing: If these properties are set to True, it indicates that the code style is strict enough, such as whether to use strict (strict) mode, variable hump name, is not for-in loop must have hasownproperty and so on

2, relaxing: such as whether to use a semicolon, whether to support the next generation ES syntax and so on.

3. Environments: The environment in which your code resides (Nodejs, browser, JQuery. ）

4, custom global properties, such as our nej and regular, these two global variables jshint is not known, put here Jshint will not report error message.

The default configuration of Jshint look here: Jshint default configuration (Sublime plugin custom default configuration, you can see in the configuration of the plugin, you can even modify it directly)

Explanation of these configurations: a detailed configuration

are English, but with the level of 46 level and Youdao translation, basic wood problems. The following is a simple configuration example.

{    "Strict":false,    "undef":true,         "Unused":true,    "ASI":true,    "Evil":false,    "Browser":true,    "devel":true,    "Globals"  : {         "Nej":true,        "Regular":true    }        }

Sometimes, we do not want it to check some files (such as some library files), this time you can create a new . Jshintignore file, write the file name that needs to be ignored (support wildcard character), also put in the project root directory.

build/src/**/tmp.js

Custom Reporter

Jshint Source has a reporter.js, the definition of error message to change how to output, can also be customized. The default is this:

"Use Strict"; Module.exports={Reporter:function(res) {varLen =res.length; varstr = ""; Res.foreach (function(r) {varFile =R.file; varErr =R.error; STR+ = file + ": Line" + Err.line + ", col" +Err.character+ "," + Err.reason + "\ n";    }); if(str) {process.stdout.write (str+ "\ n" + len + "error" +(Len= = = 1)? "": "S") + "\ n"); }  }};

The basic format is:

Module.exports = {  function  (reporter) {    //....   }};

Each reporter conforms to a certain format:

{  file:        [string, filename]  error: {    ID:        ' (Error) '],    code:      [String, Error /warning code],    Reason:    [string, error/warning message],    evidence:   This ERROR] Line    :      [number]    character: [number]    scope:     [string, message scope;                ' (main) ' Unless the code is eval 'ed]    [+ a few other legacyfields that you don 't need to worry about. ]  }}

For example, you could let him print to a TXT file instead of outputting it to the console (I don't know why the asynchronous write to the file has been unsuccessful, and finally had to use the sync function):

' Use strict ';varFS = require (' FS '); Module.exports={Reporter:function(res) {varLen =res.length; varstr = "; varfilename = ' '; Res.foreach (function(R, i) {filename=R.file; varErr =R.error; if(i = = 0) str + = filename + ' \ n '; STR+ = ' line ' + Err.line + ', col ' +Err.character+ ', ' + Err.reason + ' \ n ';    }); if(str) {varoutput = str + ' \ n '; Fs.writefilesync (' Message.txt ', output); }  }};

Command line execution:

Jshint--reporter=myreporter.js Myfile.js

The same can be a step closer, if you want to check all the files that are checked, and then save the results to txt:

Code-check.js
varFS = require (' FS ');varPath = require (' path ');varexec = require (' child_process '). exec;varCurpath = Path.join (PROCESS.CWD (), ' src ', ' javascript ');functionTraveldir (dir, callback) {Fs.readdirsync (dir). ForEach (function(file) {varpathname =path.join (dir, file); if(Fs.statsync (pathname). Isdirectory ()) {Traveldir (pathname, callback); } Else{callback (pathname); }    });} Fs.writefilesync (' Message.txt ', '); Traveldir (Curpath,function(file) {exec (' Jshint--reporter=reporter.js ' +file);});

Reporter.js
' Use strict ';varFS = require (' FS '); Module.exports={Reporter:function(res) {varLen =res.length; varstr = "; varfilename = ' '; Res.foreach (function(R, i) {filename=R.file; varErr =R.error; if(i = = 0) str + = filename + ' \ n '; STR+ = ' line ' + Err.line + ', col ' +Err.character+ ', ' + Err.reason + ' \ n ';    }); if(str) {varoutput = str + ' \ n '; Fs.appendfilesync (' Message.txt ', output); }  }};

As long as node Code-check is ready.

However, the sublime plugin does not know how to customize it.

Sometimes mastering a tool can improve productivity by many times and learn to be a lazy person.

JavaScript Code checker tool-jshint