1. Know ESLint

Note that ESLint has two tools, a module package and an extension to VSCode. This tutorial will focus on the ESLint module package

1.1 ESLint package

  • Installation method:

    • A. Install NPM I ESlint -d globally or as a project using NPM or YARN

    • B. Select install esLint module package when creating project through Vue scaffolding vue CREATE Select Lint when creating project

ESLint extension tools in 1.2 VS

  • Installation method: Search for installation using VScode

2. ESLint explanation

【 official website 】eslint.bootcss.com/

2.1 introduction

  • Eslint is itself a syntax-checking package

2.2 Why USE ESLint

Code tens of millions of lines, the first line of security; Front end is not standard, colleagues two lines of tears

  • Unified team coding specifications (naming, numerous formats, etc.)

  • Unified syntax, after all, there are quite a few ES versions (var/let….)

  • Reduce unnecessary git commits (if the file format is different, git will commit)

  • Avoid silly mistakes

  • Check the syntax at compile time, not when the JS engine is running

2.3 eslint usage

  • You can download the configuration manually

  • Configuration can be downloaded automatically when a project is created through vue scaffolding

3. Manually download the configuration (Working principle)

[official website] eslint.bootcss.com/docs/user-g…

You can better understand how ESLint works by manually downloading the configuration

3.1 Creating a Project

  • Create a test folder: eslint_test

  • Initialize project: NPM init -y (create package.json)

3.2 ESLint installation

  1. Install the ESLint package NPM I ESlint -d directly into the project

  2. Note the installation result: many packages are downloaded in node_moduels

    • .bin/eslint. CMD script file that internally executes the esLint package code via nodejs

    • The @esLint package is used to standardize esLint configuration files

    • Packages that start with ESLint are ESLint runtime packages that contain ESLint code

3.3 Generating ESLint Configuration Files

ESLint can create a separate configuration file.eslintrc.js, or it can be configured directly in package.json

  1. Execute the eslint script in the node_modules/.bin folder to create the configuration file

    • The command containing the full script path:./node_modules/.bin/eslint –init

    • This can also be done with NPX (recommended) : NPX eslint –init

      (NPX is installed with Node. You can find the target script file in the.bin directory to simplify the syntax of executing the script.)

  2. During the configuration file creation, you need to select the following configurations:

  1. Execution Result:
  • The configuration file is created.eslintrc.js

  • Relevant specification packages have been downloaded
    • The standard syntax specification package was downloaded, and it required the import, Node, and Promise plug-in packages

3.4 Configuration File Generation Error Occurs

  • At the end of the configuration file generation, an error will be reported, although the file is not available:

  • If ignored, the check will fail: Invalid ecmaVersion

  • Reason: During the configuration file option creation, the mandatory code style specification was selected, which in turn selected the Standard package

    • This option would degrade the current project ESLint version (8.3 => 7.32) to not support the ES13 syntax

3.5 Solutions

  • Change the ecmaVersion configuration item in the generated configuration file from 13 to 12

  • Essential reason: These newly downloaded packages still use older versions of ESLint, and older versions of ESLint do not yet support ES13

3.6 ESLint perform

  • Command: NPX eslint./ File path to check syntax

  • If the specification is violated, an error message will be sent to the terminal, indicating that ESLint is working properly

4. Getting started with ESLint configuration files

[official website] eslint.bootcss.com/docs/user-g…

4.1 Configuration file Format

  • When creating a configuration file with NPX eslint –init, we have a choice of configuration file formats:

    • .js / .yaml / .json

  • Eslint loads with a priority of JS > YAMl > JSON, so it’s best to choose JS

4.2 USAGE mode of JS Format

  • We noticed that the module.exports export configuration data used internally in the configuration file

  • This is because we chose CommonJS when we added the configuration file earlier

  • If JavaScript Modules is selected, the configuration data is exported using export

  • Recommendation: CommonJS

    • Since we typically use Vue scaffolding for development, the default for internal WebPack packaging is CommonJS

    • So the ESLlint configuration file should be as consistent as possible with it

4.3 env node

"env": {
    "browser": true."commonjs": true."es2021": true
}
Copy the code

  • Due to the various specifications of ESLint, it is generally not allowed to use members that are not declared within the page

  • Some runtime environment apis are often used in development, such as:

    • Window /document in the browser, etc

    • **__dirname** in nodejs

    • WeakRef in ES2021, etc

  • So tell ESLint what environment the code is currently running in so it doesn’t report errors when checking

4.4 globals node

  • The no-undef rule warns when accessing variables that are not defined in the current source file. If you want to use global variables in a source file, it is recommended that you define these global variables in ESLint so that ESLint does not issue warnings. You can use comments or define global variables in configuration files.
 "globals": {
  "_": true  // Can be read, can be modified
  "$": false // Can be read, cannot be modified
 }
Copy the code

  • You can also use globals nodes to manually configure global members

  • Note: This node needs to be added manually, which is not available by default

4.5 extends the node

"extends": [
  "standard" // "eslint-config-standard"
 ]
Copy the code

  • What specifications are used for ESLint checking? This node allows you to configure whether to use built-in or third-party specifications

    • This is configured using the eslint-config-standard specification downloaded by a third party

    • Note: When configuring extends, you can omit eslint-config- and write standard

4.6 parserOptions node

 "parserOptions": {
  "ecmaVersion": 12
 }
Copy the code

  • The ESLint parser can specify which JS version to use when parsing code

  • Note: this specifies which JS version syntax to check against, but does not include global variables

  • Global variables need to be configured through the previous env node

4.7 rules node

 "rules": {}Copy the code

  • Two usages:

    • Instead of using the EXTEND node to configure the entire specification, you configure it directly in the Rules node

  • useextendNode configurationComplete set of specificationsIn therulesModify the configuration of some specifications in the node eg:

5.ESLint checks syntax rules

[official website] eslint.bootcss.com/docs/rules/

Where do these errors start? What specification does ESLint use to check code?

5.1 The nature of the ESLint syntax specification

  • That’s ** **

  • You can check this by looking at the ESLint source code:

    • Eslint has 285 built-in rules, each of which is a create function

    • When a syntax check is done, the code is switched to another

6. Syntax specifies package types

  • As you can see, ESLint comes with more than 280 specifications installed and may not use all of them when developing

  • So different combinations of options are used:

    A. ESLint built-in specification package: eslint-all/eslint-recommended

    B. Standard specification package: eslint-config-standard

    C. third-party specification package (Google/an/facebook…).

6.1 Built-in specification package

  • Already downloaded with ESLint:

    Eslint-all: Uses all 280 + rules

    Eslint-recommended: Use only the 60 rules recommended

6.2 Standard Specification Package (Download required)

  • Package name: eslint-config-standard also uses more than 200 rules

  • Download method:

    • You can choose to download the ESLint configuration file when you create it earlier

  • Manual download, official git address: github.com/standard/st…

    • A. Download package:npm i eslint-config-standard -D
    • B. Reduce the ESLint version:NPM I [email protected](Standard relies on earlier versions of ESLint)
    • C. Modify the ES version in the ESLint configuration file:

6.3 Third-party specification package

There are many, let’s take the most popular Airbnb for example

  • Package name: eslint-config-airbnb-base: lots of rules…

  • The official NPM address: www.npmjs.com/package/esl…

  • Manual download:

A. Check the package and version NPM info “eslint-config-airbnb-base@latest” peerDependencies

B. Download the related package NPX install-peerdeps –dev eslint-config-airbnb-base

7. Configure the specification package

7.1 Modifying esLint Configuration Files

module.exports = {
    "env": {
        "browser": true."commonjs": true."es2021": true
    },
    // "extends": "eslint:all", // Built-in :all rules
    // "extends": "esLint :recommended", // Built-in :recommended rules
    "extends": "eslint-config-standard".// Third party: standard rules
    // "extends": "eslint-config-airbnb-base", // third party: Airbnb company rule
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {}};Copy the code

7.2 run ESLint

  • Use ESLint to check the target file or folder

  • Note: ESLint only checks js file code by default, if you want to check vue or React files, you need to install other plugin packages

npx eslint ./index.js // Check the target file
npx eslint ./src // Check all js files in the target folder
Copy the code

7.3 Testing Different packages Check the same code

  • A piece of identical code
   let a = 1;
// delete a
try {
            console.log(a)
} catch (error) {
   
}
const ref = new WeakRef({ name: 'daotin' });
let obj = ref.deref();
if (obj) {
  console.log(obj.name); // daotin
} 

Copy the code
  • Check result: Severity all > Airbnb-base > Standard > recommended