Code Checker tools Jshint and Csslint

Previous words

Douglas Crockford The Great God wrote a JavaScript code specification Checker with JavaScript based on his philosophy, which is jslint. It was very popular later, and it did help the vast majority of JavaScript programmers. However, the great God does not make the slightest compromise on his code specifications and responds politely to the feedback from the open source community. As a result, jslint from a tool that helps programmers standardize code, avoid bugs, and become a tool that makes code like Crockford. In the most godless it world, of course, it can't be tolerated.

In 2011, a front-end programmer called Anton Kovalyov the power of the open source community to make jshint, the idea of the tool is basically consistent with jslint, but with the following advantages: 1, configurable rules. 2, community support is high. 3. Customizable Results Report

Correspondingly, the Code checker tool for CSS is csslint. This article will cover jshint and csslint in detail.

Installation

Jshint's official address is Http://jshint.com/,GitHub address: https://github.com/jshint/jshint

In general, use NPM to install Jshint. So, first you need to install Nodejs and then install the jshint using the NPM install JSHINT-G command.

The code can then be detected by the command ' Jshint xx.js '.

"Sublime Plugin"

You can also use the Jshint plugin in the sublime editor. Use the shortcut key ctrl+shift+p to exhale the sublime command panel, type Install, select the package Control:install, and then type Jshint and select Jshint Gutter

After the installation is complete, it is generally necessary to set ' Node_path ' to the correct path

Then, under the current file, use the shortcut key ctrl+alt+j to display the information

Configuration

Create a. jshintrc file in the root of the project, this file is the Jshint configuration file, Jshint will automatically recognize the file, according to the rules of the file to check

[Note that]windows does not allow the creation of a file with a dot before the new file name, the solution is to build directly in the sublime text, and the other is to use the command line Touch command to create

The Jshint configuration is divided into four categories:

1, enforcing (enhanced): If these properties are set to true,jshint the code will be more stringent checks, such as whether to use strict (strict) mode, variable hump name, is not for-in loop must have hasownproperty and so on

2. Relaxing (slack): If these properties are set to true,jshint the conditions defined in the rule will be tolerated. such as whether to use semicolons, whether to support the next generation ES syntax and so on.

3, Environments (environment): If these properties are set to True, indicates the environment in which the code is located

4, Globals (global variable): Some of the custom global variables

Enhanced

Bitwise disables the bitwise operator CamelCase use the hump name (CamelCase) or all uppercase underscore name (upper_case) curly to use in conditional or circular statements { } to explicitly code block EQEQEQ use = = and!== instead of = = and!=es3 enforce use of ECMAScript 3 specification ES5 Force ECMAScript 5 Specification Forin use Object.prototype.hasOwnProperty () in a for-in loop to filter the properties in the prototype chain freeze non-replicated native objects such as array, Dat               e) The prototype Immed anonymous function call must (function () {} ()); not (function () {}) (); Indent Code indent width latedef               Prohibit use of the Newcap constructor name before the variable definition the first letter must be capitalized Noarg prohibit the use of Arguments.caller and Arguments.calleenoempty                 Suppress empty code blocks nonew use the constructor plusplus prohibit use of single or double quotes with + + and –-quotemark undef Prohibit use of undefined variables that are not in the global variable list unused prohibit defining variables without using strict to enforce strict mode of ES5 trailing suppress line trailing spaces MA         The maximum number of arguments that the Xparams function can accept maxdepth The maximum number of statements in the code block that can be embedded in the {} maxstatement function maxcomplexity         Maximum cyclomatic complexity of a function maxlen       Maximum number of characters in a row 

Relaxation

ASI          allows to omit the semicolon boss        allows assignment in if,for,while statements debug        Allow debugger statements eqnull       allow ==nullesnext       
   
     allow use of the ECMAScript 6evil allows the use of evalexpr to allow the use                  of expressions where assignments or function calls should occur Funcscope allows you to             define variables within the control body and use them externally globalstrict　　　          allow global strict mode iterator           allow __iterator__lastsemic             to allow single-line control blocks to omit semicolons laxbreak              allow unsafe line interrupts Laxcomma        The encoding style that allows the start of a comma Loopfunc              allows a function to be defined in a loop maxerr        jshint The maximum number of errors allowed before an interrupt scan multistr  allow multiple lines of string notypeof        Allow illegal typeof operations Proto allow                 Protosmarttabs to allow  mixed tab and space typesetting shadow allow            variable shadowsub            allow person[' Name ']supernew        allows the use of the new function () {...} and new Objectvalidthis  allow strict mode to use Thisnoyield in non-constructors  allows the generator to have no yield statement　　　　　　　　　　　　　
   

Environment

Browser              Web Browser (window, document, etc) browserify           browserify (node. JS code in the browser) jquery               Jquerynode                 node.jsqunit                qunittyped                Globals for typed array constructionsworker               Web workerswsh                  Windows Scripting Host

"Global Variables"

Globals: {      jquery:true,      console:true,      module:true    }

The default configuration for Jshint is as follows

{//Jshint Default Configuration File (as on jshint website)//See http://jshint.com/docs/for more Details "Ma Xerr ": +,//{int} Maximum error before stopping//enforcing" bitwise ": TRUE,//prohibit    bitwise operators (&, |, ^, etc.) ' CamelCase ': false,//identifiers must is in CamelCase ' curly ': true,//require {} for every new B Lock or scope "Eqeqeq": true,//require triple equals (= = =) For comparison "Forin": true,/ /require filtering for in loops with Obj.hasownproperty () "Freeze": true,//prohibits overwriting prototype       S of native Objects "immed": false,//require immediate invocations to BES wrapped in parens "Latedef" : false,//require variables/functions to be defined before being used "Newcap": false,//require cap Italization of all constructor functions "Noarg": true,//prohibit use of ' Arguments.callEr ' and ' Arguments.callee ' "Noempty": true,//prohibit use of empty blocks "nonbsp": true,//    Prohibit "non-breaking whitespace" characters. "Nonew": false,//prohibit use of constructors for side-effects ' Plusplus ': false,//prohibit use of ' + ' and '--' "Quotmark": false, "undef": true,//require all Non-global variables to be de Clared "Unused": true, "strict": true,//requires all functions run in ES5 strict Mode " Maxparams ": false,///{int} Max number of formal params allowed per function" MaxDepth ": false,//{in T} max depth of nested blocks (within functions) "maxstatements": false,//{int} max number statements per Functio N "maxcomplexity": false,//{int} Max cyclomatic complexity per function "MaxLen": false,//{int} M        Ax number of characters per line "varstmt": false,//relaxing "ASI"   : false,//tolerate Automatic semicolon insertion (no semicolons) "Boss": false,//tolerate assign ments where comparisons would be expected "debug": false,//allow debugger statements e.g. browser Breakpo    INTs.     "Eqnull": false,//tolerate use of ' = = null ' "Esversion": 5, "Moz": false, Allow Mozilla specific Syntax "evil": false,//tolerate use of ' eval ' and ' New Function () ' "Expr": false,//tolerate ' expressionstatement ' as Programs "Funcscope": FAL SE,//tolerate Defining variables inside Control statements "Globalstrict": false,//allow global "use strict     "(also enables ' strict ')" iterator ": false,//tolerate using the ' __iterator__ ' property" Lastsemic " : false, "Laxbreak": false,//tolerate possibly unsafe line breakings "Laxcomma": false,// Tolerate comma-First style coding "Loopfunc": false,//tolerate functions being defined in loops "MULTISTR": false,    Tolerate multi-line strings "Noyield": false,//tolerate generator functions with no yield statement  "Notypeof": false,//tolerate invalid typeof operator values "Proto": false,//tolerate using     The ' __proto__ ' property "Scripturl": false,//tolerate script-targeted URLs "Shadow": false, Allows re-define variables later in code "sub": false, "supernew": false,//tolerate ' n ew function () {...};     ' and ' new Object; ' "Validthis": false,//tolerate using this in a non-constructor function//environments "Browser": true,//Web Browser (window, document, etc) "browserify": false,//browserify (node. JS code in the browser) "couch": false,//CouchDB "devel": true,//development/debugging (Alert, confirm, etc) "Dojo": false,//Dojo Toolkit "Jasmine": false,//Jasmine "jquery"          : false,//JQuery "Mocha": true,//Mocha "MooTools": false,//mootools "node" : false,//node. js "nonstandard": false,//widely adopted globals (escape, unescape, etc) "Phant Om ": false,//Phantomjs" Prototypejs ": false,//Prototype and Scriptaculous" Qunit ": Fals E,//Qunit "Rhino": false,//Rhino "Shelljs": false,//Shelljs "typed": Fals    E,//Globals for typed array constructions "worker": false,//Web Workers "WSH": false,       Windows Scripting Host "Yui": false,//Yahoo User Interface//Custom Globals "Globals" : {}//additional predefined global variables}

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), and put it in the project root directory.

Build/src/**/tmp.js

Csslint

Csslint installation is simple, install with NPM install Csslint-g

The way to install the sublime plugin is similar to Jshint

Create a. csslintrc file in the root of the project, this file is the Csslint configuration file, Csslint will automatically recognize the file, according to the rules of the file to check

Rules

As far as Csslint is concerned, the most important rule is to ensure that there are no parsing errors in the CSS. Parsing an error usually means entering the character incorrectly and causing the code to become invalid CSS. These errors can cause the browser to delete attributes or the entire rule

The rules of Csslint mainly include the following 6 kinds of

1. Potential errors

Box-model setting        width or height is also set to border or padding, you must set the Display property for the box-sizingdisplay-property-grouping setting,　　Cannot contain other unnecessary code, such as Display:inline, and setting the height value duplicate-properties     does not allow repeating style attributes Empty-rules            Not allowed to include empty style rules known-properties does not      allow unrecognized style attributes

2. Compatibility

Adjoining-classes     do not use adjacent selectors, such as. a.b{}box-sizing           box-sizing do not need to be compatible with related properties Compatible-vendor-prefixes     required Third Party prefix gradients        requires all gradient definitions Text-indent    cannot use negative values Vendor-prefix    third-party prefixes and standard attributes are used together Fallback-color s    need to specify alternate color Star-property-hack  cannot use ' * ' hackunderscore-property-hack       cannot use ' _ ' Hackbulletproof-font-face          need to use alternate fonts　　　　

3. Performance

Font-faces  cannot use more than 5 Web fonts import  prohibits the use of @importregex-selectors  Disable the use of the regular expression selector in the property selector Universal-selector  prohibit the use of the generic selector *unqualified-attributes    prohibit the use of the nonstandard property selector zero-units            0 Do not add unit overqualified-elements    when using adjacent selectors, do not use the unnecessary selector shorthand        shorthand style properties duplicate-background- Images The    same URL does not exceed one time in the style sheet　　　　　　　　　　　 　　　　　　　　 　　

4. maintainability

Floats does not use    more than 10 times the floating font-sizes does not use    more than 10 times Font-sizeids        do not use the ID selector important     do not use!important

5. Accessibility

Outline-none    Disabling Outline:none

6, Oocss

Qualified-headings    
The common configuration of Csslint is as follows
{    "adjoining-classes": false,    "box-sizing": false,    "Box-model": false,    " Compatible-vendor-prefixes ": false,    " floats ": false,    " font-sizes ": false,    " grandients ": false,    " Important ": false,    " Known-properties ": false,    " Outline-none ": false,    " Qualified-headings ": false,    "Regex-selectors": false,    "shorthand": false,    "Text-indent": false,    "Unique-headings": false,    "Universal-selector": false,    "Unqualified-attributes": false}
Code Checker tools Jshint and Csslint