陌上人如玉
公子世无双

vscode vue美化插件

wpy-beautify

https://marketplace.visualstudio.com/items?itemName=doingweb.wpy-beautify

Beautify Vue or wpy code in Visual Studio Code.

preview

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

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

indent option

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):

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

https://github.com/webdzq/plugins/raw/master/wpy-beautify

vscode插件开发文档

https://github.com/peakchen90/vue-beautify

赞(0) 打赏
未经允许不得转载:陌上寒 » vscode vue美化插件

评论 2

  1. #-49

    .wpy文件中使用sass的语法会报错啊,比如sass定义变量,样式嵌套等

    shi6年前 (2018-06-19)回复
  2. #-48

    我也刚刚发现这个问题,正在处理,稍后答复,不过现在不是都用mpvue了吗?

    陌上寒6年前 (2018-06-19)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫

支付宝扫一扫