前端实用主义Web前端之路让前端飞

实用主义:前端IDE选择从入门到高阶

2017-02-01  本文已影响5786人  Mr_Treasure

前言

前端的开发工具称为IDE不太准确,准确的说法应该是文本编辑器,因为HTML和CSS都只是解释性语言,javascript也是在运行时编译。但是随着前端技术的突飞猛进,传统的文本编辑器已经不再适合前端的工作需求,随着各种MVVM框架,自动化工具,各类库的引入,前端愈发向着软件工程看齐,而且现在不会个ES6,node都不好意思称为前端工程师。前端开发工具更加智能化、多功能化。因此已经可以称为IDE,这里为大家介绍几款常用的从入门到高阶的前端IDE。

入门

HBuilder前端入门首选

HBuilder编译界面

最早打开我前端大门的工具,新手入门最好用的IDE,基于eclipse深度封装,全中文界面,完善的代码自动补全,HTML+CSS+JQ+JS,支持emmet输入,满足新手的大部分应用。
优点:傻瓜化安装,全中文,出色的智能提示;
缺点:没有社区支持,代码补全有点老旧,对预处理器支持不太好;

进阶

Dreamweaver CC 2017

电脑上的DW炸了,找个图代替吧

老牌的IDE ,曾经以PS+DW+FW称霸网页领域,号称网页三剑客,然而之前的版本缺乏更新,并且发展思路有错误。
2017以前的版本 试图通过修改选项以生成代码的方式以及拖拽组件制作网页,许多小白很喜欢这样干。但是现在的前端已经要求全代码化编程,以前的方法已经不适用。好在2017版本及时修正,外观、界面、语法高亮等已经很漂亮,并且添加了CSS预处理器支持,同时保留了部分预制组件,方便对语法还不熟悉的同学,对于不会node的同学也有提供实时预览,适合对前端有进一步了解的同学。
优点:全中文,CSS预处理器支持,界面友好,集成了很多傻瓜插件
缺点:闭源没有社区支持,不能自行添加插件,付费,重量级软件,启动较慢

WebStorm新一代IDE霸主

不支持Vue格式
在DW犯错误的时候,WebStorm一路高歌,系列软件已经占据国内IDE不少的份额,由官方提供的插件支持,满足许多不会配置的同学,ESlint,词法高亮,emmet,CSS预处理器,新版本也添加了对ES6的支持,内建了服务器调试。
当然缺点还是不少的,英文界面,虽然有第三方汉化,但不推荐使用;难看的界面,这个配色我怎么也调整不好。不能修改字体,只能使用内置的字体,然而我喜欢的是YaheiConsolasHybrid,贼好看,谁用谁知道。当然还有一个尴尬的地方,如图片显示,不支持vue格式的扩展 /滑稽

并且因为是付费闭源软件,尤大本人也不喜欢用。
优点:足够多的扩展功能满足喜欢插件但不会配置的同学
缺点:付费,闭源,没有社区支持,重量级软件启动缓慢,以及上面所述

高阶

把webstorm归为进阶类我也思考了很久,因为webstorm的功能不可谓不齐全,操作不可谓不复杂,但是webstorm好虽好,却仍然是傻瓜化操作。我认为IDE应该满足各种折腾,按照想要的功能进行拓展。

sulimeText3优雅与小巧的IDE

sublimeText3经过美化后

优雅是我对sublime的第一印象,小巧,启动速度特别快,基本替代了我对文本文档的使用,虽然是闭源软件,但是有着丰富的第三方支持,能够满足各种各样的扩展。并且最好用的地方在于可以通过本地node进行编译
,在工具里设置编译器,选择node,Ctrl+B就可以进行快速编译
解决ECMAscript问题方便

编译界面
其他软件也能编译,但是速度真的是Sublime明显快得多。
优点:太多了,上面说了很多
缺点:受到神秘的结界保护,安装插件的时候比较麻烦,插件配置也比较麻烦,确实有点难度

Atom为开源而生

漂亮的界面

Github基于coffeescript制作的开源IDE。如果说sublime是优雅小巧的女子,宛如四川妹纸的古灵精怪,那么Atom则有江南女子的美丽,端庄。第一次见面就被她清秀的面容所吸引,然后深深爱上不能自拔。曾经问过我自己,为什么喜欢上编程,我想我在这里找到了答案,被这些漂亮的语法高亮所吸引,配上ESlint,使得一个强迫症深深得到了满足······

呃,不好意思跑题了。内置了插件库,安装傻瓜化,也有相当强大的社区支持,能够找到前端基本所有需要的工具。

优点:一见钟情
缺点:爱之深,恨之切。因为使用V8内核,导致了和Chrome一样的毛病,太吃内存了,一打开我的CPU风扇就起飞了,并且面临着崩溃风险,我的可是(i7+8G内存)啊,想说爱你不容易。

VSCode微软出品必属精品

VSCode

一款由微软出品,据说教前端什么才是IDE的开源产品,凭借老大哥VS的优势,这款IDE可谓是集大成的精华。小巧精致,中文化,界面简洁。丰富的插件支持,关键在于占用内存小,打开速度贼快。配合Atom主题,我终于找到了Atom的替代品。
优点:最关键的就是占用内存小,启动快,这就是我想要的IDE
缺点:与其他IDE不同,VScode一个窗口下只能打开一个工程项目,并且没办法修改,因为它要使用调试,多个窗口导致变量追踪出现问题。

最后

前端的IDE形形色色太多了,我甚至在腾讯课堂看见使用VS写前端的,这有点太重量级了。我对IDE的要求就是漂亮的外观+极致的打开速度。当然还有些同学对于代码补全很看重,曾经我也疯狂的寻找这类插件。这里推荐atom的 ternjs 支持ES6 angular jq react的智能提示。后来发现基本的方法我都会,所以对自动补全这块不太看重了。Atom伴随我很长一段时间,从第一个Vue Demo到完整的项目,后来因为老是崩溃所以改用了VSCode,目前的配置是VSCode+sublime,vscode写程序,sublime调试一些基本的语法,以及看别人的代码。
最后的最后,希望大家都能在自己目前的阶段找到最适合自己的IDE
就是这样 :)

上一篇 下一篇

猜你喜欢

热点阅读