话不多说,本文中苏南大叔介绍的是vscode的两款插件uihelperbeautifyuihelper可以根据html结构生成.scss文件结构,beautify可以对代码进行格式化,可用于.scss文件的格式化深加工,两者的组合可以大大加快切图仔写页面的效率。苏南大叔,就从效率角度说说看,vscode对于切图仔写前端页面时的存在意义。

苏南大叔:vscode 可加快切图仔工作效率的插件:uihelper 和 beautify - vscode-extension
vscode 可加快切图仔工作效率的插件:uihelper 和 beautify(图8-1)

本文测试环境:vscode@1.30.2

安装插件

插件的安装方式有很多种,比如使用vscodef1功能,或者vscode官方的插件市场网站。

苏南大叔:vscode 可加快切图仔工作效率的插件:uihelper 和 beautify - vscode-插件市场
vscode 可加快切图仔工作效率的插件:uihelper 和 beautify(图8-2)

总的原则就是安装两个插件:uihelperbeautify

苏南大叔:vscode 可加快切图仔工作效率的插件:uihelper 和 beautify - uihelper-install
vscode 可加快切图仔工作效率的插件:uihelper 和 beautify(图8-3)

苏南大叔:vscode 可加快切图仔工作效率的插件:uihelper 和 beautify - beautify-install
vscode 可加快切图仔工作效率的插件:uihelper 和 beautify(图8-4)

补充内容

可能大家会想卸载掉已经安装好的插件,那么如何知道自己的vscode里面,都安装了什么插件呢?按着下面截图里面所示,操作就可以了。

苏南大叔:vscode 可加快切图仔工作效率的插件:uihelper 和 beautify - 显示所有模块
vscode 可加快切图仔工作效率的插件:uihelper 和 beautify(图8-7)

本地相关的插件都有什么?按照其状态分组可以查看,分为enabled/recommended/disabled三个组。

苏南大叔:vscode 可加快切图仔工作效率的插件:uihelper 和 beautify - 已经安装的插件
vscode 可加快切图仔工作效率的插件:uihelper 和 beautify(图8-8)

总结

本文中,苏南大叔给大家稍稍解读了一下:vscode快速友好地生成htmlcss文件的可能性。这些操作,都是可以大大加大工作效率的。

更多vscode相关经验文章,请点击苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   scss    vscode

本站的忠实读者小伙伴,正在阅读下面这些文章: