WebStorm

Jetbrain家的IDE就不用多解釋了吧，用過都覺得挺方便和容易上手，除了平常大家經常使用IDE的基礎功能如新建專案、Debug、快捷鍵等之外。特別是裡面的程式碼自動生成功能，免去了寫html模版程式碼的麻煩，在平常程式設計能夠大大提升效率。還有javascript的自動排版及程式碼高亮功能，也是效率神器。

Dreamweaver是包括網頁製作和管理網站功能的IDE。透過對 HTML、CSS、JavaScript等內容的支援，設計和開發人員可以快速製作和進行網站建設。該軟體我試過一段時間，雖然挺好用的，但是需要破解版支援。

除了WebStorm和Dreamweaver外，還有很多文字編輯器也可以提高效率，如SublineText3，VIM，Notepad++等，只要熟悉快捷鍵操作後，能夠比一般文字編輯器提高數倍效率。因為這些軟體基本都包含了應用建立、程式碼提示、程式碼管理、實時預覽、真機同步、本地打包等功能，已經滿足了開發者基本的開發環境條件。

實際開發工作中前端經常要用到json資料，那麼能夠方便簡潔檢視json格式的文字就是一件很必要的事情，在Chrome中有這麼一個外掛——jSonView，就很好地滿足了該功能。

如果不想安裝不同的瀏覽器如IE、Chrome 或者是 IOS、 Android等做測試，就可以試試User-Agent Switcher for Chrome，這是一個瀏覽器外掛，能夠把Chrome偽裝成各大家不同的瀏覽器，讓你方便測試初始網頁。

EnjoyCSS是一款很有用的CSS3程式碼生成工具，有了這個工具後就可以擺脫一部分重複編碼。它易於使用的使用者介面允許快速、無需編碼就可以調節出豐富的圖形樣式，是一款前端開發者的利器。

我推薦hbuilder ，作為一箇中國產的開發軟體

我用dreamweaver有五六年的時間，後來才用hbuilder的，用熟了的話，相對dreamweaver可以提高1倍的速度，親測

編輯器推薦websroem, vscode, sublime text

這三款都有不錯的表現，深受廣大開發者的喜愛，後兩者輕方便開發。

三者都有豐富的外掛，便於快速寫程式碼，還可以除錯，進行eslint檢測。

自動化構建工具

webpack,gulp,fis3

可以自動化編譯程式碼，壓縮，合併，提取公共模組的程式碼，代理請求解決開發時的跨域問題，對less,sass進行編譯，簡化開發的複雜度等

vconsole除錯線上程式碼