Preface
JSHint is used to analyze and verify that JavaScript code complies with your coding rules. This powerful tool can help spot errors and problems in your code, and it forces your team to maintain certain coding conventions and styles, making the code reliable and easier to read.
In this article, I will show you how to install, configure and use JSHint. Also included is an example listing some of my favorite editors that can use JSHint.
Install JSHint
Installing JSHint is very easy, you can use the Node package manager (npm). If you haven't installed npm yet, you can download the latest version from the nodeJS website to install Node.js and npm.
Once npm is installed, you can use the following command to install JSHint:
npm install jshint -g
The -g parameter tells npm that we want to install globally so that we can call this command in any directory.
Check the code via the command line
Now that JSHint is installed, let's use jshint in the command line to analyze a JavaScript code file.
Here is a file with the file name demo1.json:
We use the following command to analyze the code:
jshint demo1.js
JSHint tells us there is an error on line 8 of demo1.js file, the reason: a semicolon is missing.
If we fill in the missing semicolon and run this command again, there will be no error message output.
Configure JSHint
JSHint has a default configuration to analyze your code, but its configuration settings are designed to be very flexible. There are four ways to provide configuration processing files for JSHint.
One way is to use the --config parameter to specify the configuration file:
jshint demo1.js --config config.json
Another way is to put the configuration into a file called .jshintrc, because JSHint will search for this configuration file in the same level directory for code analysis. If it is not found, it will continue to search for the upper directory until the root directory, which allows us to set different configuration files for a project.
The third method is to put configuration information under the jshintConfig property of the package.json file.
In any of these three methods, the configuration information is JSON format to specify each parameter to tell the JSHint option to be on or off. For example: "unused" and "undef" in the following configuration file are to activate alarms for unused and undefined variables. "curly" requires you to always put braces on loops and conditional blocks. "eqeqeq" means that == and != are prohibited, but should be used === and !==. "globals" is used to specify a whitelist of global variables that are not defined in the code.
The fourth method is to write configuration information into the code file in annotation.
You can view different configuration options to control the behavior of JSHint.
A small example
Next, let's operate on the options in the config.json configuration file mentioned above. Suppose we have a JavaScript file below, which is just a small piece of code for learning only.
If we execute the jshint command demo2.js --config config.json , we will get the following result:
There are 4 errors in our code. On line 9, JSHint prompts that the "if" code block should be wrapped in braces. The variable subscription_id is defined but not used. In lines 9 and 11, "confirm" and "console" are not defined.
We can avoid the first two errors with just a little modification:
Now, let's add a develop option in the config.json file and set it to true so that JSHint can recognize "confirm" and "console".
At this point, if we run the jshint command again, there will be no errors.
Summarize
JSHint is a very good tool to reduce code errors. Many editors provide JSHint support. Friends who are just interested can further study JSHint. The above is all about using JSHint to reduce JavaScript errors. I hope it will be helpful to everyone using Javascript.