首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实用主义:前端IDE选择从入门到高阶

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

作者头像
MrTreasure
发布2018-05-10 11:12:48
1.4K0
发布2018-05-10 11:12:48
举报
文章被收录于专栏:不止是前端不止是前端

前言

前端的开发工具称为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 就是这样 :)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.02.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 入门
  • 进阶
  • 高阶
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档