【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" }