To normalize project code and improve readability and maintainability, we usually use ESlint for normalization processing; The benefits are self-evident. How to use them

How do I use ESlint

1. Initialization

# Prerequisites: Node.js (>=6.14), NPM version 3+

# # #
 # 1. Install ESLint globally
# # #

To ensure that some esLint operation commands take effect, global installation is recommended
This command installs the ESLint CLI from the NPM repository
npm install eslint -g

# Enter the project
cd ~{username}/workspace/ESLint-Test

Initialize package.json, skip this step for existing files
npm init -y

# Initialize the ESLint configuration
eslint --init


# # #
 # 2. Install ESLint within the project
# # #
npm install eslint --save

# Enter the project
Initialize package.json, skip this step for existing files

# Initialize the ESLint configuration
./node_modules/.bin/eslint --init
Copy the code

Eslint -- Init dialog option, optional different configurations

After the above dialog selection, generate a.eslintrc.js file as follows:

Note:.eslintrc.js can be configured separately, and can be later modified by yourself or by searching for “eslint-config” at npmjs.com to use configurations created by others

2. ESlint commands for formatting

Run ESLint to validate files or folders using the following command line:

eslint [options] [file|dir|glob]*

#, such as:
eslint file1.js file2.js

# or:
eslint lib/**
Copy the code

For more Command Line statements, see ESlint Command Line

Configuration to use ESlint in the project

1.ES6+The above syntax configuration

ESLint allows you to specify JavaScript language options that you want to support. By default, ESLint supports ECMAScript 5 syntax. You can override this setting to enable support for other versions of ECMAScript and JSX.

Parser Settings

#Install the parser
$ npm install eslint @babel/core @babel/eslint-parser --save-dev
# or
$ yarn add eslint @babel/core @babel/eslint-parser -D
Copy the code
//.eslintrc.js Configures parser
module.exports = {
    extends: "eslint:recommended".parser: "@babel/eslint-parser".env: {
        browser: true.node: true.commonjs: true.// require() does not require an error
        es2021: true,},parserOptions: {
        requireConfigFile: false.ecmaVersion: 6.sourceType: 'module',},rules: {}};Copy the code

ESlint is used in vUE projects

  • The new project

Vue create hello-world select the default Babel,ESlint will do

  • The old project
# Install ESLint
vue add @vue/eslint
Copy the code

After installing @vue/ cli-plugin-esLint will let you select esLint style and validation time, similar to the completion diagram

However, you may not execute esLint –fix at git commit time.

3. Use it with Git

In the figure above, we chose to validate ESLint at code save time, or we could add a configuration to validate before git commit

  • Install the Husky pack, Husky
  • Install lint-staged packages, Lint-staged
yarn add husky lint-staged --save-dev

# lint-staged intall
After this command is executed, you do not need to run other installation commands
npx mrm lint-staged

# husky intall
# npx husky install

Create a hook
# npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

After executing NPX MRM Lint-Staged, a.husky folder will be generated in the project file, as shown in the figure below

Package. json extra configuration

  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
Copy the code

Now run git commit to see how esLint works.

Other auxiliary development configurations

1. Vscode editor plug-in Settings

Configuring the vscode plugin ESlint allows developers to pre-normalize code based on validation rules when editing or modifying it.

  • Plug-in Market SearchESlintInstall

  • vscode setting.jsonAdded configuration
// ESLint verifies the following types
"eslint.validate": ["javascript"."vue"]

// When files are saved, they will be formatted according to rules configured by ESLint
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
Copy the code

2. Additional configuration of ESlint in applets

/** * Due to the special nature of applets, there are some global variables and methods for developers to use, but ESlint does not have built-in support * so you need to add some extra global variables to.eslintrc.js, like */
 module.exports = {
    / /... , other configurations
    'globals': {
        'App': true.'Page': true.'Component': true.'Behavior': true.'wx': true.'getApp': true.'getCurrentPages': true,}}Copy the code