Use JSLint to improve JS code quality methods to share _javascript skills

With the advent of rich Web front-end applications, developers have to re-examine and attach importance to the ability and use of JavaScript language, and discard the previous pattern of "copy/paste" Common scripts to accomplish simple front-end tasks. The JavaScript language itself is a weakly typed scripting language with a looser limit relative to the C + + or Java language, and all functions-centric functional programming ideas also provide developers with a more flexible syntax implementation. However, this flexibility is also a nightmare for beginners or inexperienced JavaScript developers, while bringing efficiency. Different forms of code style, hidden error code behavior, seriously affect the overall code readability and stability, become a WEB project one of the most common problems.

As a result, we need an effective JavaScript code quality tool to detect and fix the problems implied in JavaScript code in a timely manner to ensure the quality of code delivery. JSLint, as a flexible and effective JavaScript code quality Detection Tool, allows users to specify the coding style conventions that meet their specific application development needs, and the style of the whole project is unified, this "rule" (options) driven working mode makes the JSLint can be applied to different code detection requirements. This article will first introduce the basic concepts and roles of jslint to the reader, explain its rule-based approach, and then use an example to illustrate its basic usage, and finally how to integrate JSLint into the ANT and Eclipse application process to show how the JSLint be used in daily development tasks.

What is JSLint
JavaScript, as a young, syntactically flexible and loosely formatted language, the confusion of code formats and the improper use of some language features often make the final deliverable contain many unforeseen actions or errors resulting from coding style conventions, This habitual problem, if not pointed out and modified in time, is often reproduced in the iterative process of the project, which seriously affects the stability and security of WEB products. JSLint is precisely Douglas Crockford classmate to solve this kind of problem to create the tool, JSLint Besides can point out these unreasonable stipulation, also can mark the structure aspect problem. While JSLint does not guarantee that code logic is correct, it helps to identify 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 that verifies the quality of JavaScript code. JSLint's quality testing of JavaScript scripts mainly includes the following aspects:

• Detect syntax errors: For example, a pairing error for braces "{}".
• Variable definition specification: For example, the detection of undefined variables.
• Code format specification: for example, the deletion of a semicolon at the end of a sentence.
• Use detection for poor language features such as the use restrictions for eval and with.
JSLint's version update has been active, and as of this writing, JSLint's latest version was published in 2010-10-10. Many mainstream code editors offer good extended support for jslint, including Eclipse, VS2008, and so on.

At present, there are many JavaScript code detection tools similar to the JSLint function, including: YUI test, Firebug, MS Script Debugger, COMPANIONJS, etc. Most of them are in the form of browser plug-ins for JavaScript runtime detection and debugging, jslint and these tools are the important difference is that they pay more attention to static code format detection, which is the current hot agile development needs and advocated for continuous construction.

Understanding JSLint Rules
The core principle of JSLint execution Code quality detection is the set of rules that the user sets. JSLint the rule set provided by default contains the thought-poor development style that WEB developers have accumulated over the years, we can choose to build a set of specific rules based on the requirements of our own projects. JSLint will scan the JavaScript script according to it, and give the corresponding problem description information. The form of a rule is embodied in multiple sets of key-value pairs: [Param:option], a key to the rule name, or a value for the rule invocation. For example, the rule: "Plusplus:true" is not allowed to occur with the + + and--operators, and "undef:true" is not allowed to use undefined variables.

Because the JSLint tool is essentially a common JS script, its operation is naturally dependent on a JS run engine, which is loaded by the engine will produce a global JSLint function object in memory, the function object requires two input: source and options, The former is used to specify the string or array of strings that the script file to be instrumented is parsed, and the latter represents the user-defined rule option. If the options are empty, JSLint scans the source with its default rule.

The entire detection process is an execution of the jslint (source, options) function contained in the script. When the specified source script detects passing under the options condition, JSLint returns True, otherwise returns false, and then a detailed error message can be obtained through the Jslint.errors object. Figure 1 shows the entire work process of the jslint.

Figure 1. JSLint working process Diagram

As shown in the figure, the rule set is configured in three ways:

1. Modify the default rule directly by modifying the Jslint.js source code.
2. When the JSLint function is run, the options parameter is set at the same time, changing its rule option dynamically (the "overwrite"). This approach is useful for using the same set of custom rules for batch JS files.
3. Add a special rule (second overwrite) that applies to a single JS file by adding annotation types to the header of the JS file to be detected. This approach is useful for setting specific detection rules for different JS files, and is typically used to introduce some global variables into the file.