VS code开发工具的使用体验

在前端的大军中前行,你总得走过很多弯路,总得体验过各种开发工具,总得尝试各种新技术,然而对于开发工具我希望大家看了我这篇文章后能进行取舍,我是这样理解的。
由于以前总觉得微软太过于垄断,微软的大部分语言都仅支持windows,导致了个人不大喜欢微软的各种编程产品,因此本人不懂.net不懂C++等语言。
不过,自从接触了微软的VS CODE(visual studio code)两周后,感觉微软在开发工具方面做得还是很不错的。因为在我使用过的那么多开发工具中,至少我觉得2017年的VS CODE是良心之作。下面我就来说说各个开发工具的有点与缺点。

1、Atom

Atom从一开始流行我就开始关注与断断续续的使用它了。Atom占内存小,但是我在ionic开发中总是遇到Atom卡死、重启的状况,让我对Atom不抱有任何希望,果断放弃了Atom。

2、sublime

sublime在编辑器上创新了很多功能,用户量也是非常之大,而且对于个人用户免费。如此看来选择sublime不错,但是在sublime的外观上,不论换任何一款主题,我都觉得很难看,另外就是sublime经常时不时的弹个窗让你购买他们得产品,也让我突然想起了当年的360弹窗,由此果断放弃了sublime。

3、HBuilder

这款号称“当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛.”,据说是通过eclipse核心开发出来的,不过在我的使用中,感觉其速度倒是挺不错,就是太中国化了,让我看到了08到09年我低着头在宿舍里使用Dreamweaver 8写代码一样,说到这里,其实并不是说他的功能太差,而是他总是附带了一个浏览器的功能,可以进行实时预览,对于初学者来说,特别适合,但是对于像我这样用惯了一些更智能的工具的人,我不会喜欢上HBuilder的。

4、webstorm

下面说说webstorm这款牛逼的工具。webstorm我之前使用中,感觉很是牛逼,不论是代码提示、自动补全、报错等等功能,webstorm已经发挥到了极致,但是不好的是webstorm是收费的,并且没有太多插件(因为软件是收费的,只有开源的软件插件才多),因此会造成更新不及时而导致了对某些新版本语言的支持度不好,这不,我2017年2月份安装的webstorm,在我2月份到3月份写VUE2代码的时候,webstorm就直接变成个傻子了!不过到4月份后更新的版本中,得到了改善。
不过webstorm体积大、占用内存多、我在scss编写过程中,经常会卡死(当然可能是我的电脑内存小),由此我也开始慢慢远离了webstorm。偶尔会打开它欣赏下。

5、visual studio code

上面已经说了,我接触了VS CODE才2周,因为之前一直很抵触微软的编程产品。不过这款工具让我改变了对微软的一些看法,此款软件是免费的,且其他软件有的功能他都有,它有点像Atom,有的朋友告诉我说是Atom的变种,不过它到底是不是Atom的变种,我确实无法考证。在使用中,它和现有的atom、sublime一样是通过安装插件的方式来对功能进行扩展的。不过微软做的好的是外观与性能。从外观上看,简洁、该有的功能区都有,从性能方面看,运行快,不卡顿(暂时我用来开发ionic是不会像之前的Atom和webstorm卡顿的),不卡顿就意味着不占用大量内存。
虽然微软有很多失败的产品(比如windows phone、win8),但是我觉得微软的这款开发工具真心不错。下面我们来看使用VS code进行前端开发,该安装哪些常用插件:
HTML Snippets
超级实用且初级的 H5代码片段以及提示
HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式
HTML SCSS Support
适用于非css项目,例如vue2/angular2+.
与上个插件类似,区别是class的提示来至于scss文件,可以直接从html-class跳转到scss文件,需要手动配置global文件地址
Debugger for Chrome
让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试
jQuery Code Snippets
jquery 重度患者必须品
Path Intellisense
自动路劲补全,默认不带这个功能的,赶紧装
Document this
js 的注释模板 (注意:最新版的vscode已经原生支持)
ESlint
ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,我之前发过一篇文章 sublime 配置 Atom js 语法校验中有提到,他们的配置文件是通用的。
HTMLHint
html代码检测
Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。
GitLens
丰富的git日志插件
fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

如果你需要让其支持VUEjs的开发你可以直接搜索vue有关的插件,请安装最新版的vue2插件,另外还有ionic3,angular4等等各种常用的JS插件,超级诱人。总之我使用了两周下来,从来没有出现过卡死、重启的状况,着实在性能上要超越很多工具!

不过大家不要急于去放弃一直使用的工具而使用VS CODE,我使用它最主要的原因是用于ionic的web app开发,大家都知道ionic2或者ionic3使用的是angular框架,而angular又使用了微软的typescript,因此在微软自己的产品中对自己同类产品支持还是比较不错的。
当然如果你的电脑内存足够大,CPU足够强劲,那么你根本没有必要去选择工具,你可以直接使用webstorm等这一类重量级开发工具!

VS CODE
VS CODE

发表评论

电子邮件地址不会被公开。 必填项已用*标注