实用主义：前端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 就是这样 ：）