前端代码格式化VSCode，插件Volar，配置默认格式化程序

原创已于 2022-02-15 12:55:34 修改 · 2.1w 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-02-15 12:04:34 首次发布

89 篇文章

订阅专栏

64 篇文章

订阅专栏

本文介绍了如何在VSCode中利用Volar插件进行Vue代码的格式化，特别适合处理标签属性多的情况。通过快捷键Ctrl+Shift+F进行格式化，并解决了自动将单引号转换为双引号的问题。Volar提供了强大的格式化功能，是提升Vue开发效率的好帮手。

一、概述

vscode复制代码十分乱格式，但是需要搭配一个好的格式化程序（插件），这里选择Volar（一个标签属性多了就会帮你自动换行。就很棒）

离开你，我才发现 2022.04.13
volar 识别vue怎么解决
- 离开你，我才发现回复Program W 2024.06.21
  感谢博主大大
- Program W回复离开你，我才发现 2022.04.13
  没用volar了，现在主要用vetur。直接看配置吧。 [code=javascript] { "editor.tabSize": 2, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force" }, "prettyhtml": { "printWidth": 160, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false } }, "search.followSymlinks": false, "git.autorefresh": false, "explorer.confirmDelete": false, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "99999", "width": "50%", "height": "100%", "background-position": "50% 50%", "background-repeat": "no-repeat", "opacity": 1 }, "liveServer.settings.useWebExt": true, "liveServer.setti [/code]