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

前言

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏酷玩时刻

QQ轻游戏入门到精通OR放弃?

注册很简单,使用已有Q号登录「厘米游戏」开放平台按照流程提交资料审核即可 。开发者接入官方说明文档

7594
来自专栏黑白安全

如何防范黑客人肉搜索

不要在网络上泄露自己的隐私 这里的隐私指的是自己的真实身份,例如我们在注册一些网站、论坛的ID时,会让你填写一些个人的真实情况,这时我们最好不要填写(通常在注册...

1605
来自专栏小文博客

“息屏提醒”你的小米手机用上了吗

1832
来自专栏WeTest质量开放平台团队的专栏

Android性能优化来龙去脉总结

一款app除了要有令人惊叹的功能和令人发指交互之外,在性能上也应该追求丝滑的要求,这样才能更好地提高用户体验。

90014
来自专栏hotqin888的专栏

用slide做html5的ppt

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

3501
来自专栏BestSDK

用户不填表?那是因为你没用好这7个设计准则

无线端用户使用移动应用程序或网站都有一个特定的目标。通常情况下,站在用户和他的目标之间都会有一个交互形式 – 。实际情况中,表单被认为是用户使用链路中达到目标的...

2756
来自专栏Python数据科学

Python爬虫之撩妹篇—微信实时爬取电影咨询

“ 本文将介绍如何使用爬虫在微信对话中实现实时的电影咨询爬取功能,希望和大家一起来分享”

1462
来自专栏安恒网络空间安全讲武堂

0CTF h4x0rs.club1/2 复现

周末肛了一下0ctf,发现自己依旧那么菜。一道题也没解出来,成功的再一次拖了队伍后退。 今天发现国外大佬们已经开始放wp了。于是自己学习一波,复现一下。 先吐槽...

4007
来自专栏wblearn

我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

971
来自专栏张戈的专栏

WordPress 4.0 Benny简体中文版现已开放下载

昨天,收到了 WordPress 官方邮件,告知 4.0 已发布,要我确认中国联盟的导航插件是否兼容新版本。 ? 不过后台看了下,却没提示更新。直到今早才在后台...

3637

扫码关注云+社区

领取腾讯云代金券