vscode 格式化vue外掛wpy-beautify 快捷鍵ctrl+shift+6
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"
}
ps
最近做微信小程式開發,使用到了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
gif動畫工具,mac上使用的是LICEcap for mac。
版本號與參考時vue-beautify的一致。
Github
參考工具:
vscode外掛開發文件