随着微软的开源计划,vscode在这两年中突飞猛进,势头甚至要盖过一些IDE,轻巧、免费、支持中文、插件众多,可以应对各种不同的开发环境。

就我使用这么久以来,挑出几个觉得最满意的插件推荐给大家,网上的文章千篇一律,抄来抄去没有任何意思~

1、koroFileHeader

简直让人爱不释手!很强大的JS文件头注释、函数注释插件!

首先在vscode的setting.json中自定义模板:

在一个JS文件中,按下快捷键 command + control + I,即可快速生成文件头注释,如下:

我始终认为,良好的代码习惯及清晰的组织结构,能让自己的代码更加规范,同时也能让接手的同事在最短的时间内读懂你的代码,自己给自己挖坑可以,但不要给别人挖坑!


将光标定位在一个函数块之前,按下 command + control + T,即可为一个函数块生成注释,如下图:

一个完整清晰的方法,必须有描述、参数说明、返回值说明,这样别人能一目了然地了解到这个方法干了什么事情,应该如何使用。还是那句话,自己的项目随便自己玩,但多人协作的项目,你的垃圾习惯会坑了整个团队,有时候就很奇怪,越是简单的事情,很多人越是做不好,最后成了大家口中的猪队友。

2、Easy LESS

顾名思义,vscode中,将*.less文件转换为*.css的插件,在CSS中,我们为什么要使用LESS进行预处理?很简单,嵌套写法、全局变量、自动添加前缀……

我记得很久以前,要使用less,可能需要gulp、npm、webstorm配置、考拉工具等,总之非常麻烦,配置半天,不得不说vscode真是神器,插件安装成功后,开箱即用。

最近我非常频繁地使用这款插件,因为不仅仅开发微信小程序,也在做支付宝小程序,但两者官方出品的小程序IDE使用起来非常不顺手,而且最终魔改的CSS后缀名为 *.wxss*.acss,只是后缀名变了一下,里面的CSS写法和以往完全一样,但如果我每天要在多项目之间切换,假如使用全局配置,非常麻烦,能不能每一个项目单独配置呢?比如,微信小程序使用一套方案,将*.less自动转换为*.wxss,支付宝小程序使用一套方案,将*.less转换为*.acss,H5使用一套方案,将*.less转换为*.css,这时候,Easy LESS完美解决了我目前的痛点!

只需要在每一个项目的根目录中,建立一个名为 .vscode的文件夹,在文件夹内建立一个名为settings.json的配置文件,即可针对该项目作出灵活配置:

自定义输出的文件格式,非常强大!


虽然只是两款插件,对我而言依然具有意义,大家都说简单,可很多人却做不好简单的事情。

不论是“高端”的技术,还是看似简单的“低端”技术,只要对我有帮助,那么都是好的技术,但前面提到过的代码习惯、注释等,我觉得更为重要,代表着一个程序员的责任与态度,你本着浮躁的态度和完任务的心态,写着屎一样的代码,我只希望将屎山留给自己,不要去坑害别人及团队~