如何在vscode中重新格式化Vue.js组件?

月刊

我使用Visual Studio Code对Vue.js组件进行编码,并且需要重新格式化该组件的代码。

我没有找到任何内置的插件,首选插件是vue-buetify在安装后通知

扩展程序中有很多错误,请不要使用它,更好的选择是vetur

然后,我通过安装Vetur进行了尝试,但是没有地方可以看到美化当前编辑器中代码的选项。Shift+ Alt+F 命令没有效果。

如何实际美化(重新格式化)Vue组件的代码?

鲍勃·海

自从我以前的项目停止格式化一天以来,我就一直在进行格式化方面的工作。我认为这是当前的最新状态:

使用扩展名vetur和更漂亮(特别是,esbenp.prettier-vscode漂亮-代码格式化程序)。(您可以通过Vue.js Extension Packesbenp.prettier-vscode预先安装这些文件。)

Vetur是vue的(当前)强制性默认工具。不接受替代品。

Prettier本身不支持.vue文件,因此默认情况下该文件类型为禁用:https : //github.com/prettier/prettier-vscode/issues/338

但是Vetur理解了它的局限性,而是将.vue文件的各个部分的格式委托给可能不同的格式化程序。但是,默认情况下,它将HTML节以外的所有内容委派给Prettier。https://vuejs.github.io/vetur/formatting.html它禁用HTML节的格式。

Vetur开发人员不赞成使用js-beautify-html,尽管它显然仍然可以正常工作:https ://vuejs.github.io/vetur/formatting.html 而且他们目前没有提出其他建议。

长久以来,对HTML的更好支持(如果仅存在的话)将是显而易见的选择。当前(2018年5月),更漂亮的HTML格式为JSX。提到了许多微妙之处,但是我已经掌握的一个问题是JSX将begin / empty / end标记转换为空标记,例如。显然,React和(我相信)Vue不喜欢这样,因此vetur禁用了HTML的Prettier。

因此,我将继续在vetur设置中启用js-beautify-html,希望做到最好,并保持双眼平整。但是我是一个肤浅的编码器,以至于我可能永远不会跳过它的已知问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章