【VSCode】vue文件保存时自动格式化

用户目录下：AppData\Roaming\Code\User\settings.json

 1 {
 2   "workbench.colorTheme": "Default Dark+",
 3   "workbench.iconTheme": "vscode-icons",
 4   "bracket-pair-colorizer-2.depreciation-notice": false,
 5   "vsicons.dontShowNewVersionMessage": true,
 6   "security.workspace.trust.untrustedFiles": "open",
 7   "terminal.integrated.profiles.windows": {
 8     "PowerShell": {
 9       "source": "PowerShell",
10       "icon": "terminal-powershell"
11     },
12     "Command Prompt": {
13       "path": [
14         "${env:windir}\\Sysnative\\cmd.exe",
15         "${env:windir}\\System32\\cmd.exe"
16       ],
17       "args": [],
18       "icon": "terminal-cmd"
19     },
20     "Bash": {
21       "path": "D:\\soft\\Git\\bin\\bash.exe",
22       "args": []
23     }
24   },
25   "terminal.integrated.defaultProfile.windows": "Bash",
26   "[javascript]": {
27     "editor.defaultFormatter": "esbenp.prettier-vscode"
28   },
29   "[json]": {
30     "editor.defaultFormatter": "vscode.json-language-features"
31   },
32   "editor.unicodeHighlight.nonBasicASCII": false,
33   "[jsonc]": {
34     "editor.defaultFormatter": "esbenp.prettier-vscode"
35   },
36   "explorer.confirmDelete": false,
37   "omnisharp.autoStart": false,
38   "javascript.updateImportsOnFileMove.enabled": "always",
39   "window.zoomLevel": 1,
40   "workbench.editorAssociations": {
41     "*.emmx": "mergeEditor.Input",
42     "*.xmind": "mergeEditor.Input"
43   },
44   "explorer.confirmDragAndDrop": false,
45   "[vue]": {
46     "editor.defaultFormatter": "esbenp.prettier-vscode"
47   },
48   "html.format.wrapLineLength": 200,
49   "editor.formatOnSave": true,
50   "vetur.format.enable": false,
51   "java.format.enabled": false
52 }

核心代码：

1. vue中默认格式化工具配置为prettier

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

　2. vscode配置为保存时自动格式化

  "editor.formatOnSave": true,

---------------------------------------------------

以上配置完成后，可以用vscode打开一个vue项目测试下，我的.prettierrc文件如下：

{
	"useTabs": true,
	"tabWidth": 4,
	"printWidth": 200,
	"singleQuote": true,
	"semi": false,
	"trailingComma": "none"
}