ESLint

ESLint is a Static program analysis tool that analyzes code without any program being executed.

ESLint can help you establish a consistent team code specification for a project, maintain a correct, consistent code style, and improve code readability and maintainability

Rules in ESLint are configurable, and we can customize our own rules

ESLint relies on the JS compiler for analysis, using the JS editor to lexical and parse the code we write

Generate the corresponding AST tree. ESLint checks code validity by walking through the AST tree and sends us warnings and errors

The installation

#The installation
npm install eslint -D

#Creating ESLint configuration files - what rules does ESLint check against
#Follow the instructions step by step to generate.eslintrc.js (or yaml, json) in the project root directory.
#.eslintrc.js is a configuration file that records all of the configuration items we have selected previously
npx eslint --init
Copy the code

.eslintrc.js

module.exports = {
  env: { // Project runtime environment
    browser: true.// The browser side
    commonjs: true.CJS / / support
    es2021: true.// Support all syntax before ES2021
  },
  
  // The value can be a string or an array.
  extends: [ // Inheritance, that is, rules inherit from those rules (these rules are incorporated into custom rules and can be considered extensions of rules)
    'plugin:vue/essential'.// Basic rules of vue
    'airbnb-base'.// Airbnb's verification rules].// What interpreter can be configured as a top-level property or as a child property of parserOptions
  // parser: '@typescript-eslint/parser',
  
  // Parser information. You can specify ESMAScript version and sourceType
  parserOptions: { 
    ecmaVersion: 12.// The version of ECMA used
    // What interpreter to use, espree by default, @typescript-eslint/parser, because TS rules are checked
    parser: '@typescript-eslint/parser',},plugins: [ // Plugin list
    'vue'.// short for eslint-plugin-vue@latest
    '@typescript-eslint',].// Array of user-defined rules -- The user-defined rule has the highest priority
  rules: {}};Copy the code

use

Used on the command line
#Use ESLint to verify code on the command line
npx eslint ./src/index.js
Copy the code

You can customize your own rules in the.eslintrc rules object

User-defined rules take precedence over those configured in plug-ins

rules: {
  // Rule name: value
  // The value can be a number or a string
  // There are three optional values
  // 1. Off Disables the corresponding digit 0
  // 2. Warn warning corresponds to the number 1
  // 3. Error Indicates the number 2
  semi: 'off'.'no-console': 0.// ==> You can use console
  'comma-dangle': 0.// ==> There is no need to add a semicolon to the last bit of the object
  quotes: [ // ==> Configuration for quotation marks
    'error'.// When an error occurs, the prompt level is displayed
    // Each rule can be configured with different values. Refer to the documentation for details
    // https://eslint.org/docs/rules/
    'single' // Modify the default verification rules]}Copy the code
Integrate in the build tool
#The installation
npm install eslint-loader -D
Copy the code
module: {
  rules: [{test: /\.js$/,
      use: [
        // The order of the two loaders is not strictly limited
        // Because the eslint-Loader rule validates content more in the form of warnings, it does not prevent the actual compilation and execution of the code
        'babel-loader'.'eslint-loader']],}}Copy the code