因個人偏好和使用習慣的不同，開發工具不同人有不同的選擇。以下是幾種常見的前端開發工具：
* 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開發，快速編碼
開發者可根據自己的需要和個人偏好選擇其中一個或多個工具使用，以滿足快速開發的需求。
推薦閱讀：
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。