EsLint Introduction Learning Tutorial

Introduction

ESLint is written by Nicholas C. Zakas, the author of JavaScript Red Book, 2013 The first version was released in the year. The original intention of NCZ was not to reinvent the wheel, but to make a choice when the actual needs could not be responded to by the JSHint team: to write a lint tool with the concept of extensibility, independent rules, and no built-in coding style.

Official address: http://eslint.org/

ESLint helps us check syntax errors in JavaScript programming. For example: in a JavaScript application, it is difficult to find the variables or methods you have missed. ESLint can help us analyze JS code, find bugs, and ensure a certain degree of correctness in the writing of JS syntax.

ESLint is based on Esprima (ECMAScript parsing architecture). Esprima supports ES5.1It is also written in ECMAScript, used 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
• Custom errors and prompts
  

ESLint provides the following validations:

• Syntax error checking
• Unimportant or missing punctuation, such as semicolons
• Code blocks that cannot be executed (students who have used WebStorm should understand)
• Reminders for unused parameters
• Missing end symbols, such as}
• Ensure uniform style rules, such as sass or less
• Check variable naming
  

Usage

1. Installation

Npm install gulp-eslint –save-dev

Under your project directory, run: eslint –init will generate an .eslintrc file, which contains some validation rules

{
 "rules": {
  "semi": ["error", "always"],
  "quotes": ["error", "double"]
 }
}

Among them, "semi" and "quotes" are the names of the rules. 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 without prompt,1It represents a warning reminder that does not affect the existing compilation,2error will throw an error.

"extends": "eslint:recommended"

Extends is the default recommendation of ESLint, you can use the configuration to select which validations you need, and you can log innpmjs.comView

Second, customize the EsLint configuration

As mentioned earlier, you can turn off all EsLint default validations and add the specific validation rules you need. For this purpose, EsLint provides2The following methods can be used to set up:

1. Configuration Comments: Directly use JavaScript comments to nest configuration information in the file to be validated
2. Configuration Files: Use JavaScript, JSON, or YAML files, such as the .eslintrc file mentioned earlier, of course, you can also add the eslintConfig field in the package.json file, and EsLint will automatically read and validate it.
   

Start introducing the usage of EsLint

parserOptions

EsLint allows specifying the ecma version to be validated through parserOptions, as well as some features of ecma

{
 "parserOptions": {
  "ecmaVersion": 6, //Specify the ECMAScript version supported,6For ES6
  "sourceType": "module", //Specify the type of source, there are two types: "script" or "module"
  "ecmaFeatures": {
   "jsx": true//Start JSX
  },
 }
}

Parser

EsLint uses esprima by default for script parsing, of course, you can also switch it, such as switching to babel-EsLint parsing

{
 "parser": "esprima" //Default, can be set to babel-eslint, supports jsx
}

Environments

Environment can preset global variables for other environments, such as brower, node environment variables, es6Environment variables, mocha environment variables, etc.

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

If you want to use environment variables from the plugin, you can use plugins to specify, as follows

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

Globals

Specify the global variables you want to use, true means allow overwrite, false means do not allow overwrite

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

Plugins

EsLint allows the use of third-party plugins

{
 "plugins": [
  "react" 
  ]
}

Rules

Custom rules, general format: "rule name": error level coefficient. A coefficient of 0 means no prompt (off),1为警告(warn)、2为错误抛出(error)，可指定范围，如[1,4]

可以包括Strict模式、也可以是code的方式提醒，如符号等。还可以是第三方的校验，如react。

默认校验的地址http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Javascript code 默认校验
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //使用第三方插件的校验规则
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/package/eslint-plugin-react ， 此链接是react的eslint使用

三、Gulp中使用

var eslint = require('gulp-eslint');
-eslint
 return gulp.src(['app/**/*.js'"])) //specified validation path
  .pipe(eslint({configFile: "./.eslintrc")) //Use your eslint to validate files
  .pipe(eslint.format())
});

Summary

That is all for this article. I hope the content of this article can bring you some help in learning or work. If you have any questions, you can leave a message for communication.