visual studio html插件,实用的 Visual Studio Code 插件

1.vscode-color-highlight------颜色代码高亮插件。(sublime text也有)

2.vscode-Open in Browser------右键在浏览器打开。(sublime text也有)

3.vscode-Path Intellisense------文件路径提示。(sublime text也有)

4.vscode-JS-CSS-HTML Formatting------js-css-html格式化。(sublime text也有)

5.vscode-Visual Studio Code Format------vscode代码格式增强工具。(右键格式化)

6.vscode-Sass------sass/scss文件语法提示。(sublime text也有)

7.vscode-Easy Sass------scss编译成css,min.css。(不错的一个sass编译工具)

8.vscode-csscomb------css属性排序。(sublime text也有)

9.vscode-HTML Class Suggestions------工作空间class代码提示。

PS:(1)npm install csscomb -g

npm install csscomb --save-dev

这两步是必须的。

(2)配置vscode

打开“文件”-“首选项”-“设置”。找到“csscomb configuration”选项。添加“csscomb.preset”选项。

cd1f4ad0e1436b993f07c050f316552a.png

模式有三种,csscomb, yandex, zen。任选其一。

(3) 选中css/less/scss文件,运行按F1,输入"csscomb",回车即可。

be7f066751d2af2e26e2823afacefc79.png

特别注意一点,“csscomb.preset”选项还可以这样配置的。

3c76a29c0fd21ee8cb19fc9a1d144623.png

10.vscode-fake------生成各种假数据类型。(姓名,电话)

11.vscode-CSS Peek------class名字定义跳转。(终于拥有dw cc的这个css定义跳转功能)

12.vscode-eCSStractor-----抽取页面的class,生成一个css文档。

13.vscode-Regex Previewer------正则匹配预览。

14.vscode-Quokka------js实时编译。(相当于边写边输出控制台信息)。

15.vscode-SVG Viewer------svg预览。

16.vscode-Change Case-----变量名命名风格切换。(解决了命名风格不统一的工具)

17.vscode-Document This-----jsdoc注释生成。

18.vscode-Live Server-----http服务器(相当于使用nodejs的http-server )。

PS:vscode底部可以点击运行,十分方便。

52ecf173e64da77dc3287bca5fdd9a10.png

vue框架

18.vscode-Vue 2 Snippets------vue2的语法高亮,语法提示。

19.vscode-Vetur------vue单文件能够像html,js,css一样编写,注释。

20.vscode-wpy-beautify------vue2单文件格式化。

PS:vscode确实是一个不错的编辑器。

与sublime text3对比,有以下优点。

1.文件搜索功能。

bd7a11448500cdce0d434d6188fb40ce.png

有一个很好的文件浏览器去筛选文件,查找,修改,替换。

2.文件拖拽移动。

ac4348a3abc45fa94ba543269bc12d85.png

3.默认集成终端。无需装插件去打开终端。

补充:1.使用Visual Studio Code - Insiders版才有工作空间这功能,支持拖拽多项目。

2.vscode显示空格代码。打开“查看”-“切换呈现空格”。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值