How to use Eslint

Reference Link: https://github.com/eslint/eslint

Eslint is similar to JSLint and Jshint, but has the following differences:

1. Using Espree for JS parsing (parse)

2. Use the AST abstract syntax tree to identify patterns in (evaluate) code

3. Each rule is a standalone plug-in

Second, installation

Global Installation:

NPM install-g Eslint

Third, the use

If this is the first time, the Eslint--init command helps you complete the initialization, generating the. eslintrc file

Then Eslint test.js test2.js

Iv. Configuration

{    "rules": {        "semi": ["Error", "Always"],        "quotes": ["Error", "Double"]    }}

Tip There are three level:

• "off"Or 0 -close this rule check
• "warn"Or 1 -turn on this rule check, but just a reminder, won't quit
• "error"Or 2 -turn on this rule check and exit

Five, frequently asked questions

1. Why not JSLint

Eslint is created because of the need for a plug-in verification tool

Comparison of 2.ESLint with Jshint and Jscs

Eslint is twice as slow as jslint, because Eslint needs to build the AST with espress before identifying the code, and Jshint will recognize the code when parsing. It's slower, but it's not a pain point.

ESLint is faster than Jscs, (as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.)

3.ESLint is just a check or a code style

All have. ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.

4. Do you support ES6?

Support. Reference Configuration Http://eslint.org/docs/user-guide/configuring

5. Support JSX?

Support, but does not imply support for react. (Yes, ESLint natively supports parsing JSX syntax (this must is enabled in configuration.) Please note that supporting JSX syntax are not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn ' t recognize. We recommend using Eslint-plugin-react If you are using react and want react semantics.)

5. Do you support ES7?

Not supported by itself, you can use Babel-eslint

Six, the following detailed introduction of the configuration, address http://eslint.org/docs/user-guide/configuring

1. Configure Eslint

There are two main ways of configuring

(1) configuration comments, directly embedded in the JS file

(2) configuration file, using JS, JSON, or YAML files to configure the entire directory and its subdirectories. The form is:. eslintrc.* file, or configure the Eslintconfig field in Package.json, or configure it on the command line.

The configuration is divided into several aspects:

(1) Environment (ENV): Set the target runtime environment for your scripts, such as BROWSER,AMD,ES6,COMMONJS, etc., with preset global variables for each environment

(2) Global variables: increased global variables for runtime use

(3) Rules: Set rules and error level corresponding to this rule

2. Configuring the parser option (specifying Parser options)

Only ES5 syntax is supported by default and can be set to Es6 Es7 jsx, and so on.

{    "parseroptions": {        "ecmaversion": 6,  //Optional 3 5 (default) 6 7        "sourcetype": " Module ",//optional script (default) module        " Ecmafeatures ": {            true        },    },     "Rules": {        "semi": 2    }}

3. Configuration parser (specifying Parser), requires local NPM module

{    "parser": "Esprima"Esprima Babel-eslint

"Rules""semi": "Error" }}

4. Configure the environment (specifying environments), you can select multiple

Browser-browser Global variables.node-node.js Global Variables and node. JS SCOPING.COMMONJS-COMMONJS global variable S and CommonJS scoping (use the-browser-only code that uses browserify/webpack). Shared-node-browser-globals Common To both Node and browser.es6-enable all ECMAScript 6 features except for modules.worker-web workers global VARIABLES.A Md-defines require () and define () as global variables as per the AMD Spec.mocha-adds all of the mocha testing Global V Ariables.jasmine-adds all of the jasmine testing global variables for version 1.3 and 2.0.jest-jest global VARIABLES.P HANTOMJS-PHANTOMJS Global Variables.protractor-protractor Global Variables.qunit-qunit Global Variables.jquery-jqu  ery Global Variables.prototypejs-prototype.js Global VARIABLES.SHELLJS-SHELLJS Global Variables.meteor-meteor Global VARIABLES.MONGO-MONGODB Global Variables.applescript-applescript Global Variables.nashorn-java 8 Nashorn Global var Iables.serviceworker-sErvice Worker Global variables.atomtest-atom Test Helper Globals.embertest-ember Test helper Globals.webextensions-w EbExtensions Globals.greasemonkey-greasemonkey Globals.

If you want to configure this configuration in a file to be verified:

/**/

If you want to configure in the configuration file:

{    "env": {        true,        true    }}

If configured in Package.json:

{    "name": "MyPackage",    "version": "0.0.1",    "Eslintconfig": {         "ENV": {            true,            true        }}    }

If configured in Yaml:

---  env:    truetrue    

You can also use plugins

{    "plugins": ["Example"],    "env": {        true    }}

5. Configuring global variables (specifying Globals)

After defining the global variables, using them, Eslint does not issue a warning.

In the JS file, define:

/ *global var1, var2* /

Set Read Only

/ *global var1:false, Var2:false* /

In the configuration file:

{    "globals": {        true,        false    }}

6. Configuring the Plug-in (configuring Plugins)

Installing third-party plugins with NPM

{    "plugins": [        "Plugin1",        "eslint-plugin-plugin2"    ]} 

7. Configuration rule (Configuring rules)

JS in the configuration:

/ *eslint eqeqeq: "Off", Curly: "Error"* /

Or:

/ *eslint eqeqeq:0, curly:2* /

If the rule has multiple options:

/ *eslint Quotes: ["Error", "Double"], curly:2* /

Set in the configuration file:

{    "rules": {        "Eqeqeq": "Off",        "Curly": "Error",        " Quotes ": [" Error "," Double "]    }}

Using plugins:

{    "plugins": [        "Plugin1"    ],    "rules": {        "Eqeqeq": "Off" ,        " Curly ":" Error ",        " quotes ": [" Error "," Double "],        " plugin1/rule1 ":" Error "     }}

/ *eslint "plugin1/rule1": "Error" * /

Temporarily turn off Eslint check:

/**//Disable All rules between commentsalert (' foo '); /* */

/*/alert (' foo '); Console.log (' bar '); /* */

Close the checksum on the JS specific line:

// Eslint-disable-line // eslint-disable-next-linealert (' foo ');

// eslint-disable-line No-alert, quotes, semi // eslint-disable-next-line No-alert, quotes, Semialert (' foo ');

8. Add sharing settings (Adding shared Settings)

{    "settings": {        "shareddata": "Hello"    }}

9. Using the configuration file

Eslint-c Myconfig.json Myfiletotest.js

10. Inheritance profile (extending configuration files)

{    "extends": [        "./node_modules/coding-standard/eslintdefaults.js",        / /  Override eslintdefaults.js        "./node_modules/coding-standard/.eslintrc-es6",         // Override. Eslintrc-es6        ". /node_modules/coding-standard/.eslintrc-jsx ","    ,    "rules": {        // Override Any settings from the "parent" configuration        Eqeqeq ":" Warn "    }}

11. Ignore file or directory (ignoring files and directories)

Create a. eslintignore file

#/node_modules and/bower_components ignored by default# Ignore files compiled from TypeScript and coffeescript**/*. {ts,coffee}.js# Ignore built files except Build/index.jsbuild/!build/index.js

How to use Eslint