vscode 格式化vue插件wpy-beautify 快捷键ctrl+shift+6

素颜马尾好姑娘i 2022-05-29 02:38 256阅读 0赞

vscode 格式化vue插件wpy-beautify

Features

Beautify Vue or wpy code in Visual Studio Code.

preview

Usage

Keyboard Shortcut: ctrl+shift+6 ;  
Open context menu in wpy, choose Beautify wpy ;  
Press F1, search Beautify wpy, and click the item.  
Indent Option

The wpy-beautify’s indent option according to the textEditor’s indent option, like this:

indent option

Keyboard Shortcut

Use the following to embed a beautify shortcut in keybindings.json. Replace with your preferred key bindings.

{
      "key": "ctrl+shift+6",          
      "command": "wpyBeautify.format",
      "when": "editorTextFocus && !editorReadonly" 
    }

最近做微信小程序开发，使用到了wepy框架。wpy的文件都是用vue的高亮规则，配置\[首选项\]-\[设置\]:

“files.associations”: \{  
“\*.vue”: “vue”,  
“\*.wpy”: “vue”,  
“\*.wxml”: “html”,  
“\*.wxss”: “css”  
\},  
“emmet.syntaxProfiles”: \{  
“vue-html”: “html”,  
“vue”: “html”  
\},  
但是，没有好的格式化工具。wepy官网推荐修改后缀为.vue。并使用vue-beautify来格式化。本人还是希望使用wpy后缀，所以就在vue-beautify基础上优化了配置。并解决了vue-beautify格式化后有大量空行的问题。wpy-beautify有如下功能(在mac上验证ok)：

支持.vue和.wpy文件格式化 ;  
使用快捷键shift+cmd+6格式化 ;  
可以使用shift+cmd+p调出命令窗口，然后输入wpy，按回车生效。  
可以在当前文件窗口，鼠标右击菜单中选择beautify wpy。  
本插件已上传vscode的官网。也可以手动安装目录下.vsix文件。（扩展管理器-》从VSIX安装，然后重启vscode）  
vscode插件开发方法网上有很多栗子。如：[https://segmentfault.com/a/1190000008968904\#articleHeader3][https_segmentfault.com_a_1190000008968904_articleHeader3]  
gif动画工具，mac上使用的是LICEcap for mac。  
版本号与参考时vue-beautify的一致。  
Github

[https://github.com/webdzq/plugins/raw/master/wpy-beautify][https_github.com_webdzq_plugins_raw_master_wpy-beautify]

参考工具：

vscode插件开发文档

[https://github.com/peakchen90/vue-beautify][https_github.com_peakchen90_vue-beautify]

[https_segmentfault.com_a_1190000008968904_articleHeader3]: https://segmentfault.com/a/1190000008968904#articleHeader3
[https_github.com_webdzq_plugins_raw_master_wpy-beautify]: https://github.com/webdzq/plugins/raw/master/wpy-beautify
[https_github.com_peakchen90_vue-beautify]: https://github.com/peakchen90/vue-beautify