I believe that basically everyone who uses Vue code on VSCode will download the Vetur plug-in for formatting and other operations. Today, Vetur has updated version 0.14.2. Recently, when using Vetur, I feel that there is always a problem with formatting. The default formatting configuration is:

{
  "vetur.format.defaultFormatter.html": "prettyhtml"."vetur.format.defaultFormatter.css": "prettier"."vetur.format.defaultFormatter.postcss": "prettier"."vetur.format.defaultFormatter.scss": "prettier"."vetur.format.defaultFormatter.less": "prettier"."vetur.format.defaultFormatter.stylus": "stylus-supremacy"."vetur.format.defaultFormatter.js": "prettier"."vetur.format.defaultFormatter.ts": "prettier"
}
Copy the code

If you don’t need to modify it, leave it alone. My advice is to stick with the default formatting tool

The default HTML formatting tool becomesprettyhtml

The following is an example of the jS-Beautify-HTML format, which is now officially deprecated and I’m going to change to PrettyHTML

The original:

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 160,
      "wrap_attributes": "auto"."end_with_newline": false}},Copy the code

New configuration:

  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {// Start wrapping arguments and events when a single line exceeds 160 lengths"printWidth": 160}}.Copy the code

aboutprettierThe Settings rule has been changed

  1. The root directory of the project cannot have.prettierrc,.prettierrc.jsWait for the configuration file, otherwise the configuration above vscode will be overwritten
  2. The new configuration item is written as follows:
  "prettier.singleQuote": true."prettier.disableLanguages": [ "vue" ]
Copy the code

You can set vue file inside, and js file does not conflict:

/ / js file"prettier.singleQuote": true."prettier.disableLanguages": [ "vue"], // vue file inside js"vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true."proseWrap": "never"."printWidth": 130}}.Copy the code

Written with HTML formatting:

  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 160}."prettier": {
      "singleQuote": true."proseWrap": "never"."printWidth": 130}}.Copy the code

No technical content, but the code format requirements or not a small help