1、HBuilder

简介：HBuilder是专为前端开发打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

优点：

因为是一款国产软件，所以中文界面更容易迅速上手。HBuilder拥有完善的帮助文档，诸如快捷键列表什么的，都能快速调出查询；

编码速度飞快。它拥有完整的语法提示和代码输入法、代码块等，以及浏览器兼容性提示，大幅提升HTML、js、css的开发效率。内嵌了emmet、jquery、bootstrap、angular、mui等常用框架的语法提示库。支持less，sass等预编译器。通过快捷键（alt+点击）方便查找到js方法名、ID、CSS类名和链接的出处（定义），支持跨文件查找。HBuilder JSDoc+规范。编写JSDoc有助于代码可读性的提升，还可生成API手册（主要是框架）；

强大的边看边写功能。按下Ctrl P进入边看边改视图，左边保存右边立即刷新。支持模拟手机端，方便进行UI调试。科学护眼。绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强。对着这样的界面写一天代码，感受要比对着太亮或太暗的界面舒服很多。

缺点：

功能比文本编辑器多，执行也自然会相对慢。编辑器滚动条的滑动有卡顿卡，略显淡疼；

比较吃内存。HBuilder还自带了可调试控制台的浏览器，ide+浏览器都在这里，内存占用肯定也少不了。资源消耗更多，但HBuilder可保证主流配置电脑流畅使用。

2、WebStorm

简介：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

优点：

容易学习，新手也可以快速上手。不用讲什么插件安装，搞什么配置，直接上手才是王道；

内置功能强大。做为一款真正意义上的前端开发ide，它所集成的功能非常丰富，基本无须安装插件。代码定位能力。只需鼠标一点， 就能能轻松定位到变量/属性/方法的定义处，开发非常有用；

代码和文件关联能力。无论是修改文件名还是变量名（或者删除），ws都会将变动同步到它们被使用到的地方，并且会弹出友好的警告提示。自带git版本控，语法提示，nodeJS调试等功能，命令行功能，支持各种代码检测功能，支持各种代码模板

强大的文件临听能力。轻松实现less、sass、coffescript自动编译等。内置服务器功能。不用配置烦杂的后台环境，就可以简单测试一些需要服务器配合的页面。本地版本控制。在 WS 里所有的编辑都被存在本地，随时可以还原到历史版本（关键时候能救命）。

缺点：

吃内存。如果项目或文件比较大的话，ws运行时间一长就可能出现各种状况，卡顿甚至卡死也可能发生，但概率并不算高。如果用ws打开多个项目的话，内存占用会大幅上升。尽管如此，也从来没有造成过什么损失，最多只是重启一下。

写文章

登录

前端开发常用的编辑器有哪些？它们的优点是什么？

web的前端

前端开发常用的编辑器有哪些？工欲善其事必先利其器，每个前端工程师在做前端开发的时候，一定有几款自己用着顺手的编辑器。而一款好用且适合自己的前端开发编辑器，往往会达到事倍功半的效果。以下是小编为大家推荐的几款编辑器，它们分别是HBuilder、WebStorm、Sublime Text、Visual Studio Code和wampServer。

1、HBuilder

简介：HBuilder是专为前端开发打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

优点：

因为是一款国产软件，所以中文界面更容易迅速上手。HBuilder拥有完善的帮助文档，诸如快捷键列表什么的，都能快速调出查询；

编码速度飞快。它拥有完整的语法提示和代码输入法、代码块等，以及浏览器兼容性提示，大幅提升HTML、js、css的开发效率。内嵌了emmet、jquery、bootstrap、angular、mui等常用框架的语法提示库。支持less，sass等预编译器。通过快捷键（alt+点击）方便查找到js方法名、ID、CSS类名和链接的出处（定义），支持跨文件查找。HBuilder JSDoc+规范。编写JSDoc有助于代码可读性的提升，还可生成API手册（主要是框架）；

强大的边看边写功能。按下Ctrl P进入边看边改视图，左边保存右边立即刷新。支持模拟手机端，方便进行UI调试。科学护眼。绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强。对着这样的界面写一天代码，感受要比对着太亮或太暗的界面舒服很多。

缺点：

功能比文本编辑器多，执行也自然会相对慢。编辑器滚动条的滑动有卡顿卡，略显淡疼；

比较吃内存。HBuilder还自带了可调试控制台的浏览器，ide+浏览器都在这里，内存占用肯定也少不了。资源消耗更多，但HBuilder可保证主流配置电脑流畅使用。

2、WebStorm

简介：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

优点：

容易学习，新手也可以快速上手。不用讲什么插件安装，搞什么配置，直接上手才是王道；

内置功能强大。做为一款真正意义上的前端开发ide，它所集成的功能非常丰富，基本无须安装插件。代码定位能力。只需鼠标一点， 就能能轻松定位到变量/属性/方法的定义处，开发非常有用；

代码和文件关联能力。无论是修改文件名还是变量名（或者删除），ws都会将变动同步到它们被使用到的地方，并且会弹出友好的警告提示。自带git版本控，语法提示，nodeJS调试等功能，命令行功能，支持各种代码检测功能，支持各种代码模板

强大的文件临听能力。轻松实现less、sass、coffescript自动编译等。内置服务器功能。不用配置烦杂的后台环境，就可以简单测试一些需要服务器配合的页面。本地版本控制。在 WS 里所有的编辑都被存在本地，随时可以还原到历史版本（关键时候能救命）。

缺点：

吃内存。如果项目或文件比较大的话，ws运行时间一长就可能出现各种状况，卡顿甚至卡死也可能发生，但概率并不算高。如果用ws打开多个项目的话，内存占用会大幅上升。尽管如此，也从来没有造成过什么损失，最多只是重启一下。

3、Sublime Text

简介：它是一套跨平台的文本编辑器，支持基于Python的插件，开发者是Jon Skinner。虽然Sublime诞生得早，但是至今仍有众多的使用者。而且当前端开发需要在N个项目间频繁切换时，Sublime Text就会派上大用场。

优点：

不仅跨平台，而且在所有平台上看起来都很漂亮。很流畅，响应灵敏，很吸引眼球。支持多光标操作：它能让你对文本中的多个地方同时做修改，你可以看到多个地方在你输入的时候同时发生变化。重构时用它很方便，比如修改一个变量名；

扩展性很好，它使用了Python式的插件系统。这显然是一个很大和活跃的社区，可以为它提供丰富的插件，这也意味着你可以在网上找的任何你想要的插件来集成你想要的功能。

缺点：经常发现手动安装的插件会自动消失，原因是Sublime Text自动移除了。

4、Visual Studio Code

简介：Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。

5、wampServer

简介：WampServer，是Windos Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。PHP扩展、Apache模块，开启/关闭鼠标点点就搞定，再也不用亲自去修改配置文件了，WAMP它会去做。再也不用到处询问php的安装问题了，WAMP一切都搞定了。

本次给大家推荐一个免费的学习圈，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。对web开发技术感兴趣的同学，欢迎加qun：六零三九八五九九三，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天解答问题。

以上就是前端开发常用编辑器的简单介绍。上面大致都讲解了这五种编辑器的优点和缺点。大家可以根据自己的实际情况，选择适合自己的前端开发编辑器。

五、Atom
下载地址：https://atom.io/

功能介绍：

Atom 是github专门为程序员推出的一个跨平台文本编辑器。平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。为开源而生。

具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

7.Dreamweaver CC 2017

下载地址：https://www.adobe.com/products/dreamweaver.html

功能介绍：

老牌的IDE ，曾经以PS+DW+FW称霸网页领域，号称网页三剑客，然而之前的版本更新较慢，版本陈旧，已经满足不了广大前端开发者的项目需求，逐渐被市场淘汰。

好在2017版本及时修正，外观、界面、语法高亮等已经很漂亮，并且添加了CSS预处理器支持，同时保留了部分预制组件，方便对语法还不熟悉的同学，对于不会node的同学也有提供实时预览，适合对前端有进一步了解的同学。

Cloud9 IDE

基于 NodeJS 构建的在线集成开发环境，语法高亮支持 C#, C++, Python, Perl, Ruby, Scala 等等众多常用开发语言。内置的 Vim 模式非常好用，支持流行的版本控制系统，像 Git, Mercurial 和 SVN，另外它还有非常强大的插件系统，可以拓展其功能，例如借助 CSSLint 和 JSBeautify，Cloud9 就可以变成一款非常实用的代码美化工具。

 Notepad ++

Notepad++是一套非常有特色的自由软件的纯文字编辑器(许可证:GPL)，有完整的中文化接口及支援多国语言撰写的功能。所见即所得功能、语法高亮、字词自动完成功能，支持同时编辑多重文档；支持自定义语言；