因个人偏好和使用习惯的不同，开发工具不同人有不同的选择。以下是几种常见的前端开发工具：
* WebStorm
* Sublime
* HBuilder
1. WebStorm
首页：http://www.jetbrains.com/webstorm
下载：http://www.jetbrains.com/webstorm/download
1.1 功能特性
WebStorm是由JetBrains开发的一个比较强大的轻量级开发工具，能够完美地支持前端开发及基于NodeJS的服务端开发。
— 支持JavaScript, Node.js, ECMAScript 6, TypeScript, CoffeeScript, HTML, CSS, Less, Sass 和 Stylus。语法高亮，文档查询，重构
— 快速定位及错误高亮
— 项目导航及高级重构功能
— 支持AngularJS、React、Meteor、Express、其它框架
— 内置前端及服务端NodeJS断点调试器
— 与构建工具（Grunt、Gulp）、代码质量工具（JSHint，JSLint，ESLint，JSCS），测试工具（Karma，Mocha），版本控制工具（Git，GitHub，Mercurial，SVN）集成。
— 版本控制集成（Subversion，Perforce，Git，CVS）
1.2 小技巧
— 更改IDE主题：File -> Setting -> Appearance & Behavior -> Appearance
— 更改编辑器代码风格：File -> Setting -> Editor -> CodeStyle
— 设定IDE和项目的默认编码：File -> Setting -> Editor -> File Encoding
— 插件安装：File -> Setting -> Plugins
— 编辑器配置导入导出：File -> Import Settings… / Export Settings…
— 快捷键设置：File -> Setting -> Keymap
— 自动保存，文件关闭后仍能进行撤销和重做操作
— 显示行号，自动换行功能开关：代码左侧区域右键菜单勾选。如下图左侧
— 鼠标移至html文件顶部区域出现不同浏览器快速打开按钮。如下图右侧
1.3 实用快捷键
1.4 插件支持
WebStorm插件仓库里面很多实用的插件来扩展WebStorm的能力。详见：http://plugins.jetbrains.com/webStorm。
可以通过 File -> Setting -> Plugin 里面的功能在线安装插件，也可将插件下载然后离线安装。
2. Sublime Text
首页：http://www.SublimeText.com/
下载：
http://www.sublimetext.com/2 （Sublime Text 2）
http://www.sublimetext.com/3 （Sublime Text 3）
2.1 功能特性
Sublime Text是一个跨平台的文本编辑器，支持基于Python的插件，可通过Package扩展。
— 内置支持很多编程语言，并支持语法高亮。用户也可以通过插件支持更多编程语言
— Go to anything功能，快速跳到文件，符号或行数
— Command palette功能：弹性快捷键功能
— 多行选择功能：同时修改多行内容
— 基于 Python 语言的外挂 API
— 针对个别项目使用不同的编辑器设置
— 通过 JSON 文件自定义设置值
— 跨平台（Windows、Linux 和 Mac OS X）
— 兼容 TextMate 的语言标记语法
2.2 小技巧
— 文件未保存退出编辑器，下次启动会自动恢复
— 双击选中一个标识符，然后连按ctrl D可以连续选中多个标识符，进行重命名等操作
— 以某种编码格式打开，以某种编码格式保存见File -> Reopen with Encoding / Save with Encoding
— 矩形选取，按住鼠标中键（滚轮）不放，向下拉取选择然后松开即可垂直方向选择矩形内的内容。配合ctrl多处选择，可以进行多处编辑
— html中输入一个标签名如div，按Tab会自动生成<div></div>，如安装Emmet插件会给你惊喜
— 按住ctrl alt，然后按上或下方向键可进行垂直方向光标定位，按左或右方向键可进行水平选取
2.3 实用快捷键
快捷键练习网站：http://www.shortcutfoo.com/
2.4 插件支持
1) 编写自定义插件扩展：Tools -> New Plugin..
2) 插件下载：https://packagecontrol.io
3) 插件管理
可以安装包管理器来查找，安装，更新插件包。包管理器及安装方法见：https://packagecontrol.io/installation。页面有自动安装或手动安装示例方法。安装完成后在菜单References -> PackageControl打开包管理器。选择Package Control: Install Package选项，可搜索待安装的插件。
4) 常用插件
— NodeJS扩展
SublimeText-Nodejs(已停止维护)：https://packagecontrol.io/packages/Nodejs
Jake：https://github.com/mde/jake
3. HBuilder
首页：http://www.dcloud.io
下载：http://download.dcloud.net.cn/HBuilder.windows.6.0.1.zip
3.1 功能特性
HBuilder是DCloud推出的一款免费的支持HTML5的Web开发IDE。通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML、JavaScript、CSS的开发效率。
— 代码助手
— 内置web服务器，可用各种主流浏览器进行测试
— 各种眼睛保护配色
— 内置最全语法库支持和浏览器兼容数据
— 可进行手机App开发
— 跳转助手、选择助手、转义助手、快捷键助手
— 语法校验、转到定义、重构 、大纲、任务TODO 、版本历史、内置webserver、预编译less、sass等
3.2 小技巧
— 代码提示时，按下候选列表前的数字，自动把该候选项输入到编辑区
— 内置Emmet插件，输入div按Tab，自动生成<div></div>，详见Emmet插件
— 内嵌jQuery、Zepto、微信JS SDK、MUI框架插件，可提示相应框架API的语法。在工程点右键 -> 引用框架语法 来添加对其它（angular、ext、dojo..）框架库语法提示的支持。
— Ctrl P边写代码边预览
— 拖动tab代码选项卡，可以进行左右或上下分屏显示
3.3 实用快捷键
3.4 插件支持
HBuilder基于Eclipse 3.7（2011年6月发布）开发，因此兼容Eclipse3.x版本插件。也可进到 工具 -> 插件安装 -> 浏览Eclipse插件市场 来安装插件。
NodeJS插件：Nodeclipse 安装方法见：http://ask.dcloud.net.cn/article/230
4. 开发工具小结
作为一款开发工具，能让开发者将写代码当成一种享受，愉快地编码，最核心的功能应该满足以下几点：
1. 功能完善，该有的常用功能都有
2. 编码快速，智能提示，自动完成
3. 启动速度，测试速度快
4. 开发工具界面的主题和配色也是比较重要，耐看、代码区分一目了然，不刺眼，不引起视觉疲劳。
5. 可配置，可插件，有扩展的能力，满足自定义开发的需求
上述的几种开发工具各自有其优势：
1) WebStorm ：功能完善强大
2) SublimeText：轻量快捷，界面优美
3) HBuilder：Html5开发，快速编码
开发者可根据自己的需要和个人偏好选择其中一个或多个工具使用，以满足快速开发的需求。
推荐阅读：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。