我正在使用Visual Studio Code编写Vue.js组件,并需要重新格式化该组件的代码。
我没有找到任何内置的格式化工具,第一个选择是vue-buetify
插件,但在安装后提示:
扩展中有许多错误,请不要使用它,更好的选择是vetur。
然后我尝试安装Vetur,但我没有看到任何选项可以美化编辑器中当前的代码。快捷键Shift+Alt+Fcommand没有效果。
我应该如何实际地为Vue组件美化(重新格式化)代码?
我正在使用Visual Studio Code编写Vue.js组件,并需要重新格式化该组件的代码。
我没有找到任何内置的格式化工具,第一个选择是vue-buetify
插件,但在安装后提示:
扩展中有许多错误,请不要使用它,更好的选择是vetur。
然后我尝试安装Vetur,但我没有看到任何选项可以美化编辑器中当前的代码。快捷键Shift+Alt+Fcommand没有效果。
我应该如何实际地为Vue组件美化(重新格式化)代码?
自从之前一个项目突然停止格式化以来,我一直在尝试修改格式。以下是我认为当前技术水平的总结:
使用扩展名为vetur
和prettier
(特别是esbenp.prettier-vscode
Prettier - Code formatter)。(你可以通过 Vue.js Extension Pack esbenp.prettier-vscode
等预安装这些扩展)。
Vetur
是Vue的(当前)强制默认工具。不接受替代品。
Prettier不直接支持.vue文件,所以该文件类型默认被禁用:https://github.com/prettier/prettier-vscode/issues/338。
但是Vetur
理解其限制,并将.vue文件的除HTML部分之外的所有内容委派给潜在的不同格式化程序进行格式化。虽然按默认情况下,除了 HTML 部分,它把所有东西都代理给。https://vuejs.github.io/vetur/formatting.html。对于 HTML 部分,它禁用了格式化。
Vetur
开发人员不喜欢js-beautify-html,尽管它似乎仍然可以使用:https://vuejs.github.io/vetur/formatting.html。但他们目前没有提供替代建议。
Prettier对HTML的支持本应是显而易见的选择,但这是一个长期而悲惨的故事。目前(2018年5月),prettier将HTML格式化为JSX。有提到很多微妙之处,但我掌握的一个问题是,JSX将开始/空/结束标签转换为空标签,例如<br>
变成<br />
。 显然React和(我相信)Vue不喜欢这样做,因此vetur禁用了Prettier的HTML部分。
因此,我在vetur设置中启用js-beautify-html,希望一切顺利,并保持警惕。但我只是一个表面编码工程师,我可能永远不会遇到已知的问题。
Vetur › Format › Default Formatter: JS Default formatter for <script> region
pretter-eslint
。2022年,关于Vue文件格式的问题,已经在另一个答案中得到了极大的改善。
Vetur仍然是在VS Code中管理.vue
文件的事实标准解决方案,但在此问题被提出后的这段时间里,Prettier也添加了对它们的全面支持(以及HTML)。这意味着您可以使用Prettier格式化它们,而无需Vetur。
请注意,尽管Prettier对一小部分语言支持VS Code的“格式选定内容”功能,但Vetur不支持该功能:
Vetur只有“整个文档格式化程序”,不能格式化任意范围。因此,只有“格式化文档”命令可用。“格式选定内容”的命令不起作用。
如果您决定使用Vetur,在获取格式化功能工作时不需要安装其他扩展,因为该扩展已绑定了所有可用的格式化程序。只要安装并启用了该扩展,使用“格式化文档”命令或Shift+Alt+F键就可以开箱即用。
Vetur的设置允许用户为其支持的每种语言配置使用哪个可用格式化程序(默认情况下,除Sass和Stylus外都是Prettier)。这些格式化程序也可以按语言进行切换,或者完全禁用,如果您更喜欢使用其他格式化解决方案。