Vscode formatting plug-in

using vscode to develop vue projects, currently .vue files cannot be formatted with one button at the same time html,js,css.

  1. has not been configured for using vetur, so you can only format one of the html,js,css, and the other two are too messy to use. If you use this, how to configure it? ;
  2. used to use vue-beauty, before no problem, but now there is a serious bug, can not be used, is there any other plug-ins available;
  3. whether vscode has an one-click export configuration function or plug-ins, can import the boss"s settings and plug-ins.

post the process of configuring vscode when I write vue. ESlint is recommended

1. Plug-in installation is required

  • Vetur: syntax highlighting and other functions
  • ESlint: code style detection
  • Prettier formatter for Visual Studio Code: to cooperate with ESlint

2. Plug-in Settings

  • template formatting for vue:
    "vetur.format.defaultFormatter.html": "js-beautify-html"
  • eslint check of vue template

"prettier.singleQuote": true,
"prettier.semi": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned"
},

this is my own search, copy this configuration, restart, my needs are basically met.

Menu