Shulou(Shulou.com)06/01 Report--

How to use eslint and prettier in vscode, aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

1. Use of eslint in vscode

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

"editor.formatOnSave": true, / / Save is formatted "editor.codeActionsOnSave": {"source.fixAll.eslint": true / / format according to eslint rules}, "eslint.format.enable": true, / / enable ESLint as a formatter for authenticated files

2) eslint (or global installation) must be installed in the project

This is the requirement of the eslint plug-in in vscode:

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

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

4) the settings in rules

Quotes: ['error',' single'], semi: ['error',' never']

The first element in the attribute value array sets the

The second element setting in the attribute value array

Eslint.bootcss.com/docs/rules/ finds the corresponding attribute and clicks to enter, and then finds options.

Eslint:recommended default rules are marked

Note: at this point, the project will be prompted according to the default settings and the rules in rules, and will be formatted according to the rules of eslint when saving.

2. Use eslint in conjunction with prettier

(note: the combination of eslint and prettier depends, and does not have to be used with prettier.)

1) first install the prettier plug-in in vscode, and then add the following code to settings.json in vscode

"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}

2) install prettier in the project

At the same time, eslint-plugin-prettier and eslint-config-prettier need to be installed. The purpose of these two plug-ins is to enable eslint to prompt according to the rules of prettier (pay attention to the version numbers of these two plug-ins, there are problems with the use of the latest version 4.0 of eslint-plugin-prettier).

"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"]

Then you can add the. prettierrc.js file to the root directory, and eslint will prompt you according to the rules in it, and format it in accordance with the rules when you save it

Module.exports = {semi: false, singleQuote: true, bracketSpacing: true,} 3. Using prettier rules in vue projects

1) first, select the setting of eslint + prettier when creating.

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

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

By default, when the format in the code is incorrect, it will be a warn warning

If you need to change it to error, you need to add the following code to .eslintrc.js

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

Note: after modifying some configurations, vscode may not take effect immediately. You can close the project and reopen it at this time.

This is the answer to the question about how to use eslint and prettier in vscode. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.