Use JSLint to improve JS code quality method sharing

With the advent of rich Web front-end applications, developers have had to re-examine and re-value the power and use of the JavaScript language, abandoning the old model of "copy/paste" common scripts to accomplish simple front-end tasks. JavaScript itself is a weakly typed scripting language, with looser restrictions than C++ or Java, and all function-centric functional programming ideas provide developers with more flexible syntax implementations. However, while this flexibility can be effective, it can also be a nightmare for novice or inexperienced JavaScript developers. The code style of different forms and the code behavior of implicit errors seriously affect the readability and stability of the whole code, which has become one of the most common problems in Web projects.

Therefore, we need an effective JavaScript code quality tool to detect and fix hidden problems in JavaScript code in time to ensure the quality of code delivery. JSLint, as a flexible and effective JavaScript code quality detection tool, allows users to specify coding style conventions that meet their specific application development requirements, thus unifying the style of the entire project. This "rules" (options) driven work mode enables JSLint to be applicable to different code detection requirements. This article will first introduce the basic concepts and functions of JSLint to the reader, explain how it works based on rules, then illustrate its basic usage through an example, and finally introduce how to integrate JSLint into the application process of Ant and Eclipse, to fully demonstrate how to apply JSLint in daily development tasks.

What is a JSLint
JavaScript as a young, grammar, flexible and relatively loose language requirement to the format, the code format of chaos and incorrect use of some language features, often makes the final delivery of the product contains many unforeseen behavior of the contract, thereby causing for coding style or error, the habitual problem if not pointed out in time and change, often in the recurrence of the iterative process of the project, the serious influence the stability and security of the Web products. JSLint is the tool created by Douglas Crockford to solve such problems. Besides pointing out these unreasonable conventions, JSLint can also point out structural problems. While JSLint cannot guarantee that the code logic is correct, it can help to find errors and teach developers some good coding practices. It is worth mentioning that the JSLint tool itself is also a piece of JavaScript code, which is a JavaScript script to verify the quality of JavaScript code. JSLint's quality detection of JavaScript scripts mainly includes the following aspects:

Currently, there are many JavaScript code detection tools with similar functions to JSLint, including: YUI Test, Firebug, MS Script Debugger, CompanionJS, etc., most of them are in the form of browser plug-in in the client browser JavaScript runtime testing and debugging, JSLint and these tools are important difference is that the more pay attention to the detection of static code format, and this is the current hot agile development and promoting the continuous build need.

Know the JSLint rules
The core of JSLint's principle of performing code quality detection is the set of user-set rules. The set of rules that JSLint provides by default contains the development styles that Web developers have accumulated over the years that they consider to be bad, and we can choose to build a specific set of rules based on the needs of our own projects. JSLint will scan the JavaScript script according to it and give the corresponding problem description information. The form of the rule is reflected in multi-group key-value pairs: [param:option], with the name of the rule as the key and the value of whether the rule is called or not. For example, the rule "plusplus:true" is not allowed to use the ++ and -- operators, and "undef:true" is not allowed to use undefined variables.

Due to JSLint tool is essentially a common JS script, its operation is also naturally relies on a JS engine operation, it is after the engine load can produce a global JSLint in memory function object, the object function requires two input: the source and the options, the former is used to specify a script to be detected after the file is parsed generated string or an array of strings, the latter according to user-defined rules options. If the options are empty, JSLint scans the source using its default rules.

The entire detection process is an execution of the JSLINT (source, options) function contained in the script. JSLint returns true when the specified source script is checked in the options condition, false otherwise, and detailed error information can be obtained from the jslint.errors object. Figure 1 shows the entire working process of JSLint.

Figure 1. Schematic diagram of JSLint working process

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201312/20131216154204364.jpg" >

As shown in the figure, rule sets can be configured in three ways:

1. Directly modify the default rules by modifying the jslint.js source code.
2. When JSLint function runs, set the options parameter at the same time and dynamically change the rule option (first overwrite). This approach applies to using the same set of custom rules for bulk js files.
3. Add a rule of annotation type to the header of the js file to be detected, and add a special rule (second overwrite) applicable to the code of a single js file. This approach is suitable for setting specific detection rules for different js files and is often used to introduce some global variables into the file.