Getting Started with EsLint

Introduction

ESLint was written by Nicholas C. Zakas, the author of JavaScript Red Book, and the first edition was released in 2013. The original intention of NCZ is not to build a wheel repeatedly, but to make a choice when the actual requirements are not responded by JSHint team: to write an lint tool with the concept of extensibility, independence of each rule and no built-in coding style.

Official address: http://eslint.org/

EsLint helps us check for syntax errors in Javascript programming. For example, in Javascript applications, it is difficult for you to find the variables or methods you leaked. EsLint can help us analyze JS code, find bug and ensure that a certain degree of JS syntax is written correctly.

EsLint is based on Esprima (ECMAScript parsing architecture). Esprima supports ES 5.1 and is itself written in ECMAScript for multi-purpose analysis. EsLint not only provides some default rules (extensible), but also provides user-defined rules to constrain the Javascript code we write.

EsLint provides the following support:

ES6 AngularJS JSX Style Check Customize Errors and Prompts

EsLint provides the following types of validation:

Syntax error checking An unimportant or missing punctuation mark, such as a semicolon Code blocks that can't be run (children's shoes who have used WebStorm should know) Unused parameter reminder Missing terminators, such as} Ensure the uniform rules of styles, such as sass or less Check the naming of variables

Use

Step 1 Install

Npm install gulp-eslint  In fact, in fact, the save-dev

Running: eslint init in your project directory will result in a. eslintrc file containing 1 validation rule

{

 "rules": {

  "semi": ["error", "always"],

  "quotes": ["error", "double"]

 }

}

Where "semi" and "quotes" are the rule names. EsLint also provides the level of error, corresponding to the number, the higher the number, the higher the error prompt, such as 0 code error does not prompt, 1 stands for warning reminder but does not affect the existing compilation, and 2error will throw an error.

"extends": "eslint:recommended"

Extends is the default recommended validation for EsLint. You can use the configuration to select which validations you need. You can log in to npmjs. com to see

2. Custom Configuration of EsLint

As mentioned earlier, you can turn off all EsLint default validation and add the exact validation rules you need. EsLint provides two ways to set it up:

Configuration Comments: Nested configuration information directly using Javascript annotations in the file to be validated Configuration Files: Use JavaScript, JSON or YAML files, such as the aforementioned. eslintrc file. Of course, you can also add eslintConfig fields to package. json files, and EsLint will automatically read and verify.

Begin to introduce the usage of EsLint

parserOptions

EsLint, through parserOptions, allows you to specify the version of ecma to be verified and one of the features of ecma

{
 "parserOptions": {
  "ecmaVersion": 6, // Specify ECMAScript Supported versions, 6 For ES6
  "sourceType": "module", // Specifies the type of source, and there are two types of " script "Or" module " 
  "ecmaFeatures": {
   "jsx": true// Start JSX
  },
 }
}

Parser

By default, EsLint uses esprima for script parsing. Of course, you also switch it, for example, switch to babel-eslint parsing

{
 "parser": "esprima" // By default, it can be set to babel-eslint , support jsx
}

Environments

Environment can preset global variables of other environments, such as brower, node environment variables, es6 environment variables, mocha environment variables, etc

{
 "env": {
  "browser": true,
  "node": true
 }
}

If you want to use the environment variables in the plug-in, you can specify them using plugins, as follows

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

Globals

Specify the global variables you want to use, true for overrides allowed, false for overrides not allowed

{
 "globals": {
  "var1": true,
  "var2": false
 }
}

Plugins

EsLint allows use of third-party plug-ins

{
 "plugins": [
  "react" 
  ]
}

Rules

Custom rule, 1 format: "Rule name": error level coefficient. The coefficient 0 is no prompt (off), 1 is warning (warn), 2 is error thrown (error), and the range can be specified, such as [1, 4]

It can include Strict mode or code mode reminders, such as symbols, etc. It can also be a third-party check, such as react.

Default check address http://eslint. org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Javascript code  Default check 
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   // Use the 3 Verification rules for square plug-ins 
  "react/jsx-quotes": 0
 }
}

https://www.npmjs.com/package/eslint-plugin-react, this link is used by eslint of react

3. Use in Gulp

{

 "rules": {

  "semi": ["error", "always"],

  "quotes": ["error", "double"]

 }

}

0

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.