preface

Yes, there are many tutorials on the Internet, but after I followed the configuration, I found that there were still problems.

If you save the file, you will find that the file is formatted twice.

Either: can format, but not fix success, and several errors.

When there was only ESLint, the world wasn’t so messed up…

So without further ado, just blow it up once:

1. Install the plug-in

Prettir-code Formatter, Prettier ESLint Lint lint lint lint lint lint lint lint

2. Eat straight, answer questions 3

The project root directory creates the.vscode folder where you create settings.json (note: do not write.gitignore).

{
  "------[vue]------": "Recognize vUE using Prettier, other frameworks are similar"."[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true."eslint.packageManager": "yarn"."prettier.packageManager": "yarn"."eslint.run": "onSave"."vetur.validation.template": false."editor.formatOnPaste": true."editor.formatOnType": true."editor.formatOnSave": true."files.eol": "\n"."------typescript------": "Reference from https://github.com/microsoft/vscode"."[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "typescript.tsc.autoDetect": "off"."------mark below------": "Turn off default format formatting in Vetur, JS/TS, and esLint formatting on"."javascript.format.enable": false."vetur.format.defaultFormatter.js": "none"."typescript.format.enable": false."vetur.format.defaultFormatter.ts": "none"."eslint.format.enable": true."eslint.validate": ["vue"."javascript"."javascriptreact"."typescript"]."------editor.codeActionsOnSave------": "Enable ESLint to automatically fix JS/TS, latest syntax"."editor.codeActionsOnSave": {
    "source.fixAll.eslint": true}}Copy the code

The project root directory is created.prettierrc.json

{
  "tabWidth": 2."useTabs": false."endOfLine": "auto"."singleQuote": true."semi": false."trailingComma": "none"."bracketSpacing": true
}
Copy the code

Enable ESLint and Prittier and check Allow Everywhere in the lower right corner of the plugin:

Wrap it up! The above configuration is based on vue-CLI created project, make sure there are.eslintrc.js and other necessary files, after configuration, remember to reload vscode! .

In addition, there is no need to post.eslintrc.js code here, you can refer to the big factory, can also default, unified standard, after getting used to it will be fragrant, or you can refer to the configuration of my canvas made lottery small game.

Answer 3.

Q: I know Vetur has the ability for Prettier and ESLint built-in, do they have to be installed separately?

A: Absolutely, if you want to be lazy!

Vetur syntax is highlighted, with formatting and error reporting, but not fully functional. Eslint is used for quality checking code and will throw warnings in VSCode that you need to modify manually. Usually such errors are Spaces, symbols, useless variables, etc. Let me do something? It’s not elegant… There is a need for an automation tool: Prettier automatically formats, adding a uniform style that saves time and effort.

In addition, the configuration file in the project takes precedence over VSCode setting.json.

Q: Why is there a flash back after the save is formatted twice?

A: because you have too many formatting plugins, who should VSCode listen to?

  • VSCode itself has a formatter.

  • Eslint can execute formatted JS.

  • Prettier can perform formatting, JAVASCRIPT, HTML, and CSS.

  • Vetur can execute various languages in a formatted Vue single file.

Prettier takes longer than prettier, eslint -> default -> prettier when you press Save, eslint -> default -> prettier, if there is an inconsistent rule, it’s not blinking……

Q: Why are errors still reported after formatting?

A: Again, plugin conflicts.

Vetur has the ability to prettier and ESLint built in, sometimes Prettier executes slower than ESLint. Eslint will report errors after js formatting in Vue files.

To sum up, we are directly violent to remove, turn off unnecessary default configuration, see above:

"------mark below------": "Turn off default format formatting in Vetur, JS/TS, and esLint formatting on"
Copy the code

Q: Other methods

Tips1: Browse a article, before a friend directly using the eslint – plugin – prettier, eslint – config – prettier let the formatting plug-ins only heard prettier, regardless of the order, we are interested in can have a try, anyway, I don’t try, enough is good…

Tips2: Even more violent, don’t install the plugin at all, leave the code highlighted, and then use vue-CLI integrated formatting configuration.

The last

If you find this post helpful, give it a thumbs up.

In addition, this chapter will be updated, revised and supplemented all the time, with the same address. I plan to add other engineering practices in the tail as extensions, which can be regarded as notes.

Previous selections:

“Intermediate advanced front-end interview” handwritten code collection

TLS handshake process in detail

Canvas Twister mini game