A brief analysis of how to use eslint and prettier in vscode

How to use eslint and prettier in vscode? The following article will introduce to you the usage of eslint in vscode and the combined use of eslint and prettier. I hope it will be helpful to you!

1. Use of eslint in vscode

1) First install eslint in vscode, and then add the following code to settings.json of vscode

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2) eslint must be installed in the project (or installed globally)

This is the requirement for the eslint plug-in in vscode: [Recommended study: "vscode Getting Started Tutorial"]

3) Add the .eslintrc.js file in the root directory and add the following code

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4) Settings in rules

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']

• Setting the first element in the attribute value array

• Setting the second element in the attribute value array

eslint.bootcss.com/docs/rules/ Find the corresponding attribute, click to enter, and then find options

• eslint:recommended The default rules are marked

Note: At this time, the project will be prompted according to the default settings and the rules in rules, and it will also be formatted according to the eslint rules when saving.

2. Use eslint in combination with prettier

(Note: The combination of eslint and prettier depends on the situation, and it does not have to be used together with prettier)

1) First of all, Install the prettier plug-in in vscode, and then add the following code in settings.json in vscode

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2) Install prettier

in the project and also You need to install eslint-plugin-prettier and eslint-config-prettier. The purpose of these two plug-ins is to enable eslint to prompt according to the rules of prettier (note that these two plug-ins Version number problem, there is a problem when using the latest eslint-plugin-prettier version 4.0)

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

Then add plugin:prettier/recommended## to the extends in .eslintrc.js #

extends: ["eslint:recommended", "plugin:prettier/recommended"]

Actually do the following things

Then you can add the

.prettierrc.js file in the root directory, eslint will follow The rules inside will prompt, and when saving, it will be formatted according to the rules inside

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

3. Use prettier rules in the vue project

1) First select eslint when creating Prettier settings

2) Create .prettierrc.js in the root directory and add rules

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

Default In this case, when the format in the code is incorrect, a warn warning will be issued

If you need to turn it into an error, you need to add the following code to .eslintrc.js

rules: {
//…
  'prettier/prettier': 'error'
}

The effect at this time is as follows

Note: After modifying some configurations, vscode may not take effect immediately. Close the project and reopen it to try

For more knowledge about VSCode, please visit:

vscode tutorial! !

The above is the detailed content of A brief analysis of how to use eslint and prettier in vscode. For more information, please follow other related articles on the PHP Chinese website!