In vscade, how to use eslint to lint and format

stay Vscode in , How to use eslint Come on lint and format

This tutorial has been used Visual Studio Code v1.63.2、ESLint Extension v2.2.2、Node.js v17.2.0、npmv8.1.4 and eslintv8.3.0 It was verified .

The first 1 Step - establish JavaScript Starting code

1. Create a directory folder

$ mkdir vscode-eslint-example

2. Enter the directory folder

$ cd vscode-eslint-example

3. stay vscode-eslint-example Inside the catalog , Create a JavaScript file app.js：

$ touch app.js

4. stay Visual Studio Code Open in app.js. Write the following code in the file ：

const name = 'James'

const person = {
    first: name}

console.log(person)

const sayHelloLinting = (fName) => {
    
console.log(`Hello linting, ${
     fName}`);
};

You may have noticed that there are formatting problems that can be improved ：

• Inconsistent use of quotation marks
• Inconsistent semicolon use
• spacing

5. Now you can initialize this project . Navigate back to... On the command line vscode-eslint-example Catalog , Then run the following command ：

$ npm init --yes

Now? JavaScript The test item has been set correctly , You can start setting ESLint.

The first 2 Step - Set up ESLint

1. Setting for the project ESLint Before , First, install in the project directory ESLint：

$ npm install eslint --save-dev

The --save-dev Signs are important , Because this saves the package as a development only dependency , Once the project enters the production environment ,eslint No longer need

2. Now? ESLint already installed , You can use the following command to initialize your project ESLint To configure ( Navigate to... Under the project root directory node_modules/.bin In the middle )：

$ ./node_modules/.bin/eslint --init

Next , Different questions about the project will be prompted . These questions are asked to ensure that the configuration initialized for the project is best suited to your own needs .

• The first tip will be , choice To check syntax, find problems, and enforce code style Options .

? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
* To check syntax, find problems, and enforce code style

• The second tip will be , choice CommonJS Use CommonJS Options for global variables .

 What type of modules does your project use? …
  JavaScript modules (import/export)
* CommonJS (require/exports)
  None of these

• The next tip will say , choice None of these Options ：

? Which framework does your project use? …
  React
  Vue.js
* None of these

• The next prompt will ask , choice No Options ：

? Does your project use TypeScript? › No / Yes

• The following prompt will say , choice Browser Options ：

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
 Browser
  Node

• The next tip will say , choice Use a popular style guide Options ：
  ( about **Which style guide do you want to follow?** Tips , choice Airbnb: https://github.com/airbnb/javascript Options )

 How would you like to define a style for your project? …
* Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

• The next prompt will ask , choice JSON Options .：

? What format do you want your config file to be in? …
  JavaScript
  YAML
* JSON

• Then you will see this message ：

Checking peerDependencies of [email protected]
The config that you've selected requires the following dependencies:

[email protected] [email protected]^7.32.0 || ^6.8.0 || ^7.2.0 [email protected]^2.25.2

• The last tip will ask , choice Yes Options for installing dependencies npm：

? Would you like to install them now with npm? › No / Yes

After all prompts are completed , You will notice a file named .eslintrc.json Has been added to your vscode-eslint-example Directory . Now installed ESLint. The code in app.js Not changed . This is because ESLint Need and Visual Studio Code Integrate .

The first 3 Step - install ESLint Expand

stay Visual Studio Code Install in ESLint after , Be careful app.js Colored underscores in the file highlight errors . These markings are color coded according to severity . If you hover over underlined code , You will see a message explaining the error to you . In this way ,ESLint It can help us find and remove code and syntax errors .

ESLint Can do more for you . You can modify ESLint To automatically fix errors each time a file is saved .

The first 4 Step - Format on save

To put ESLint It is configured to automatically fix syntax and formatting problems every time it is saved , You need to open the setup menu .

To be in Visual Studio Code Find settings in , Please use the command panel to open Preferences: Open Workspace Settings (JSON).

# .vscode/settings.json
{
    
    "editor.codeActionsOnSave": {
    
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
}

Okay , Now? ESLint The plug-in will now automatically correct the error and verify on save JavaScript.

return app.js File and save . You will see some changes , Include less colored underscores .ESLint Some formatting issues that have been fixed include ：

• Use single quotation marks consistently
• Appropriate indentation inside the function
• Use semicolons consistently

ESLint Syntax errors will now be automatically resolved when you save app.js. There are some remaining error messages . These can be customized ESLint Configure to catch or ignore specific errors and formatting problems to fix .

The first 5 Step - Customize ESLint The rules

This step is no longer necessary .

In mode ,console.log Statements are usually required . You can customize ESLint To configure , To allow the use of console.log Statement without generating an error message .ESLint Configuration rules can be set in .eslintrc.json Modification in file .

open .eslintrc.json file . You will see in this file
These codes ：

{
    
  "env": {
    
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": ["airbnb-base"],
  "parserOptions": {
    
    "ecmaVersion": 12
  },
  "rules": {
    }
}

stay .eslintrc.json At the bottom of the file , You will see a "rules" object . Here you can customize the trigger ESLint Error or disable ESLint Response to some code , You will "rules" Object to add key value pairs . This key will match the name of the rule you want to add or change . This value will match the severity level of the problem . You can choose three severity levels ：

• error- Produce a red underline
• warn- A yellow underline will be generated
• off- It doesn't show anything .

such as ： If you don't want to use console.log Statement generates any error messages , You can use no-console Rule name as key . Input off by Value no-console.

In the file .eslintrc.json Add ：

"rules" : {
    
    "no-console": "off"
}

app.js Will no longer produce console.log Error message ：