因個人偏好和使用習慣的不同，開發工具不同人有不同的選擇。以下是幾種常見的前端開發工具：

* 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開發，快速編碼

開發者可根據自己的需要和個人偏好選擇其中一個或多個工具使用，以滿足快速開發的需求。

推薦閱讀：

JavaScript全棧開發-運行環境

「JavaScript 教程」入門篇-導論

詳解 js 閉包（圖文版）

js 中原型和原型鏈深入理解

面試：JavaScript基礎篇