How to Use JSLint to improve JS Code Quality _ javascript skills

This article mainly introduces how JSLint improves the quality of JS Code. If you need it, you can refer to the introduction of rich Web Front-end applications, developers have to review and pay attention to the capabilities and usage of the JavaScript language, and discard the previous mode of simply performing front-end tasks by simply copying/pasting common scripts. The JavaScript language is a weak scripting language with more loose restrictions than the C ++ or Java language, all function-centered functional programming ideas also provide developers with more flexible syntax implementation. However, this flexibility has also become a nightmare for beginners or experienced JavaScript developers. Code behavior with different code styles and implicit errors seriously affects the readability and Stability of the overall code and becomes one of the most common problems in Web projects.

Therefore, we need an effective JavaScript code quality tool to promptly discover and correct the Hidden Problems in JavaScript code and ensure the quality of code delivery. As a flexible and effective JavaScript code quality testing tool, JSLint allows users to specify encoding style conventions that meet their specific application development needs, so that the style of the entire project is unified. This "rule" (options) the driving method makes JSLint suitable for different code detection requirements. This article first introduces the basic concepts and functions of JSLint, explains its rule-based working methods, and then illustrates its basic usage through an example, finally, we will introduce how to integrate JSLint into Ant and Eclipse, and demonstrate how to use JSLint in daily development tasks in all aspects.

What is JSLint?
JavaScript is a young language with flexible syntax and loose format requirements. The code format is messy and some language features are incorrectly used, this often makes the final delivered product contain many unforeseen behaviors or errors caused by coding style conventions. If this habitual problem is not pointed out and modified in time, it is often repeated in the project iteration process, seriously affecting the stability and security of Web products. JSLint is a tool created by Douglas Crockford to solve such problems. In addition to pointing out these unreasonable conventions, JSLint can also mark structural problems. Although JSLint cannot ensure that the Code logic is correct, it helps to discover 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 tests the quality of JavaScript code. JSLint's JavaScript script Quality Detection mainly includes the following aspects:

• Check syntax error: for example, the matching error of braces.
• Variable definition specifications: for example, the detection of undefined variables.
• Code format specifications: for example, missing semicolons at the end of a sentence.
• Use detection of poor language features: such as eval and with restrictions.
JSLint versions have been active. As of this article, the latest version of JSLint was released from 2010 to 10 to 10. Many mainstream code editors provide excellent extension support for JSLint, including Eclipse and VS2008.

Currently, there are many JavaScript code detection tools like JSLint, including YUI Test, Firebug, MS Script Debugger, and CompanionJS, most of them exist in the form of browser plug-ins in the client browser for JavaScript runtime detection and debugging. The important difference between JSLint and these tools is that it pays more attention to static code format detection, this is exactly what we need and advocate for continuous building in the current hot agile development.

Understanding JSLint rules
The core of JSLint code quality testing is the user-defined rule set. The default rule set provided by JSLint contains the development style that Web developers have accumulated over the years and think is not good. We can choose to build a specific set of rules based on the needs of our projects. JSLint scans JavaScript scripts based on the script and provides the Problem description. The rule format is embodied in multiple key-value pairs: [param: option]. The rule name is used as the key and the value of whether the rule is called or not. For example, the rule "plusplus: true" does not allow the appearance of ++ and -- operators, and "undef: true" does not allow the use of undefined variables.

Because the JSLint tool is essentially a common JS script, its running naturally depends on a JS running engine. After being loaded by the engine, it will generate a global JSLint function object in the memory, the function object requires two inputs: source and options. The former is used to specify the string or string array generated after parsing the script file to be detected, and the latter indicates the custom rule options. If options is empty, JSLint uses its default rule to scan and detect the source.

The entire detection process is an execution process of the JSLINT (source, options) function contained in the script. If the specified source script passes the check under the options condition, JSLint returns true; otherwise, false is returned. In this case, detailed error information can be obtained through the JSLINT. errors object. Figure 1 shows the entire JSLint process.

Figure 1. JSLint Workflow

The rule set can be configured in three ways:

1. Modify the default rule directly by modifying the JSLint. js source code.
2. When the JSLint function is running, set the options parameter and dynamically change its rule option (first overwrite ). This method applies to the same set of custom rules for batch js files.
3. Add a comment type rule to the header of the js file to be detected to add a special rule (second overwrite) applicable to the code of a single js file ). This method is applicable to setting specific detection rules for different js files. It is usually used to introduce some global variables in this file.