vscode中如何让vue文件语法高亮_vscode中vue代码颜色插件

本文介绍了如何使用VSCode增强Vue开发体验,推荐了vetur插件进行语法高亮,并列举了其他提升效率的插件,如DocumentThis用于自动生成JSdoc注释,eCSStractor抽取CSS类,CSSPeek实现类名跳转,LiveServer创建本地服务器,以及用于生成假数据的vscode-faker等。这些插件旨在帮助开发者更高效地编写和调试代码。

vue提示插件【Vscode】

编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受。曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了。

在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有vue,vue-beautify,vue-color,VueHelper,vertur等等。比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧。

20181011105132460739.png

vscode提高效率有效使用插件:

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

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

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

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

VueHelper  Vue2代码段(包括Vue2 api、vue-router2、vuex2)

Quokka.js  可以即时显示js和ts的运行结果,想试验一些短代码的运行结果,但是又不想之后删除文件的时候可以用到

codeRunner 可以运行C,

C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua,

Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C#

Script,等开发语言并支持局部执行

IntelliSense for CSS class names  智能提示 css 的 class 名

Node.js Modules Intellisense  可以在导入语句中自动完成JavaScript / TypeScript模块。

vscode-faker   生成假数据,地址,电话,图片等等

Regex Previewer   测试正则的插件

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值