素材多多
前端開發是目前一個非常火的行業，就業前景和薪資水平都非常不錯，至於開發工具的話，那就非常多了，大部分代碼編輯器、IDE環境都支持，下面我簡單介紹4個非常不錯的前端開發工具，感興趣的朋友可以嘗試一下：
01
VS Code
這是目前前端開發一個非常流行的開發工具，在業界非常受歡迎，免費、開源、跨平臺，由微軟自主研發，可以說是良心產品，常見的智能補全、代碼高亮、語法提示等功能這個軟件都能很好支持，除此之外，插件擴展非常豐富，可以很好的進行代碼編輯和調試，輕巧靈活，運行速度快，對於前端開發來說，是一個非常不錯的選擇：
Sublime Text
這也是一個比較輕巧靈活的代碼編輯器，文本編輯功能強大，完美支持3大操作平臺，但原則上不免費，和VS Code類似，Sublime Text也支持自動補全、語法提示、代碼高亮等常見功能，除此之外，針對前段開發也提供了非常多的插件，不管是編輯還是調試代碼來說，都非常方便，對於前端開發來說，也是一個不錯的選擇：
02
IDE環境
HBuilder
這是一個純粹的國產Web IDE開發工具，目前在前端開發中也有著較高的使用率，常見的自動補全、代碼高亮、語法提示、錯誤檢查等功能這個軟件都能很好兼容，除此之外，界面柔綠、清爽護眼，針對Vue專門打造了插件擴展，可以很好的提高開發效率，還支持安卓、iOS打包，對於前端開發來說，也是一個非常不錯的工具：
WebStorm
這是一個非常專業的Web IDE開發工具，Jetbrains公司的產品，被譽為“Web前端開發神器”、“最智能的JavaScript IDE”，除了基本的智能補全、代碼高亮、語法提示等常見功能，這個軟件還支持代碼分析與重構、聯想查詢、單元測試等高級功能，因此在開發效率上更高，也更適合大型項目，對於多人協作的前端開發來說，是一個非常不錯的選擇：
當然，除了以上4個比較常用的前端開發工具，還有許多其他軟件也支持前端開發，像Atom、Notepad++、Dreamweaver等也有非常不錯，但在功能和使用範圍上就不如前面4個軟件了，網上也有相關教程和資料，介紹的非常詳細，感興趣的話，可以搜一下，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言進行補充。
小小猿愛嘻嘻
HTML通常會和JavaScript、CSS同時出現。三者均是前端開發最常用到的。目前最常用到的HTML其實就是HTML5。常用的前端編程軟件有HBuilder、Sublime Text等等。
HBuilder是一款免費的國產前端開發工具，編者用的就是HBuilder，對於小白和英語不太好的前端開發者這是一款難得的IDE。對代碼自動補全方面簡直是強大到沒朋友。強力推薦。
Sublime Text是一個輕量級的編輯器，不端支持前端的html，js，css。還支持覺得多數的後端語言，比如C語言、java、python等。sublime text的強大之處是支持各種插件而且快捷鍵非常好用，可以極大的提高開發效率。缺點是代碼提示方面不如Hbuilder。
菜牙ol
WebStorm
和idea同屬於jetbrains公司開發的，它是旗下一款JavaScript開發工具，被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。
早起作為一個插件可以集成與Eclipse中來開發前端，現在已經獨立出來，也是我最早接觸js所使用的一款開發工具，如果熟悉了Eclipse快捷鍵的童鞋可以快速上手。
一款代碼編輯器，藉助豐富的插件資源，可以擴展成強大的前端開發工具，和IDE相比，屬於一款輕量級的，啟動特別快。
Atom
作為開源老大哥GitHub出的一款代碼編輯器，和上面那個比較而言，插件略少，但和GitHub無縫結合，尤其是markdown編寫，界面也很漂亮。
TextMate是Mac下的著名的文本編輯器軟件，與BBedit一起並稱蘋果機上的emacs和vim。尤其適合程序員使用，可以定製許多貼心使用的功能。
Emacs即Editor MACroS（宏編輯器），是一種強大的文本編輯器。Emacs使用了Emacs Lisp這種有著極強擴展性的編程語言（它的核心是一個Emacs Lisp解釋器），並實現了文本編輯支持等的擴展。
Notepad++是 Windows操作系統下的一套文本編輯器(軟件版權許可證: GPL)，有完整的中文化接口及支持多國語言編寫的功能(UTF8 技術)。
北瓜點影
JetBrAIns WebStorm 2019 for Mac是一款知名的前端開發工具，提供JavaScript和編譯到JavaScript語言，Node.js，HTML和CSS的智能編碼輔助。
最聰明的編輯利用現代JavaScript生態系統的全部功能 - WebStorm為您提供幫助！享受智能代碼完成，動態錯誤檢測，JavaScript，TypeScript，樣式表語言和最流行的框架的強大導航和重構。
調試器在IDE中輕鬆調試客戶端和Node.js應用程序 - 在源代碼中放置斷點，探索調用堆棧和變量，設置監視，以及使用交互式控制檯。
無縫工具集成利用linters，構建工具，測試運行器，REST客戶端以及更多工具，這些工具都與IDE深度集成。但是，只要您需要終端，它也可以作為IDE工具窗口使用。
單元測試在WebStorm中使用Karma，mocha，Protractor和Jest運行和調試測試。立即在編輯器中或在方便的樹視圖中查看測試狀態，您可以從中快速跳轉到測試。
與VCS集成使用簡單的統一UI來使用Git，github，Mercurial和其他VCS。使用IDE中的可視差異/合併工具提交文件，查看更改並解決衝突。
WebStorm為大多數版本控制系統提供支持，例如Git，github Mercurial，Perforce，Subversion和SVN，可用於創建各種網站和應用程序，強大而靈活！
風絮o允詠
Visual Studio 2008：可以提示外部引用的js代碼中的變量和方法，支持C#風格的文檔註釋；支持單步跟蹤調試，也可以格式化代碼，當寫js的時候會根據輸入的分號和括號自動格式化代碼，當代碼有語法錯誤的時候不能格式化，所以寫代碼的時候很容易發現代碼是不是有語法錯誤。
EmEditor：這個是輕量級的文本編輯器，支持多種語言的代碼高亮，但不支持智能提示，支持安裝插件（基於js開發），我一般用來寫簡單的腳本和格式化代碼（許安裝插件）。
常用的調試工具：
瀏覽器下的插件：
調試工具有Firebug（FF），Web Developer（IE），IETester（瀏覽器兼容性測試）。
個人在FF下調試多一些，還裝了幾個插件：YSlow（性能優化），Page Speed（性能優化），DNS Flusher（清除瀏覽器DNS緩存，不重啟瀏覽器使hosts生效），Sen SEO（SEO優化工具），CSS Userage（清理多餘的CSS），Web Developer，User Agent Switcher。
第三方軟件：
Fiddler：Microsfot出品的免費產品，非常好用，可以抓幾乎所有的應用程序的HTTP請求。可以抓包，修改請求等，具體可以Google一下“Fiddler用法”。
HttpWatch：也是抓包工具，這個是收費的，IE下非常好用的抓包工具。
佩奇撩劇場
為了讓入行新人能夠更快的掌握Web前端開發，千鋒武漢小編推薦五個優秀的前端開發工具，供小夥伴們參考。框架類：Bootstrap全世界最流行的響應式前端框架。基於HTML、CSS、JAVASCRIPT的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格。併兼容大部分jQuery插件。簡潔靈活，使得Web開發更加快捷。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。代碼編輯器：Codepen、VScodeCodePen是一個在線的HTML、CSS和JavaScript代碼編輯器，能夠編寫代碼並即時預覽效果。可以用於在線展示的作品，也可以看到其他人在網頁中實現的各種令人驚奇的效果。VScode免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux。
性能測試：Google PageSpeed InsightsPageSpeed是谷歌的網頁測試工具，通相信有接觸前端開發的大神們都聽說過Google官方的PageSpeed Tools，這個網頁載入速度檢測工具有在線版本也有一個 Chrome擴展，叫PageSpeed Insights。PageSpeed Insights的Chrome擴展是由谷歌官方開發的一款可以分析頁面載入的各個方面，包括資源、網絡、DOM以及時間線等等信息的插件，過檢測評分給你優化建議。調試類：AtomAptana Studio它是非常強悍的JavaScript編輯器和調試器，可以支持多種AJAX和JavaScript工具箱，包括JavaScript編輯和調試。具有智能代碼完成、瀏覽器兼容性提示、代碼錯誤提示、文檔結構樹等功能。HTML5：HTML5測試得分能夠提示您正常使用的瀏覽器對於HTML5標準和相關規範的支持情況的指標。前端開發工具數量很多，這裡只是推薦了千鋒武漢HTML5前端小編覺得比較好的5個前端開發工具。如果你有更好的意見，歡迎給我們留言分享。 ------------- 如果我回答對你有幫助，請關注我一下。或有其他問題也可以關注我，給我發私信小魚兒的歌聲
很高興能回答你的問題，作為一個後端開發，也曾經開發過前端，也用過很多前端開發工具。
1.sublime text用著確實不錯，但是代碼開發提示不強，平時用著文本編輯器還是可以的。
2.hbuild+用了一段時間各種不適用，最後就卸載了。
3.vs code用著一段時間寫vue，需要安裝插件，而且提交代碼用感覺不方便，把不想提交的最後提交了，導致代碼衝突，也許是因為自己用不熟。
4.webstorm 推薦使用，代碼智能提示，而且提交代碼方便。
JAVA程序猿成長之路
1、HBuilder
功能簡介：HBuilder是專為前端打造的開發工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數據、可以方便的製作手機APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發。從開放註冊以來深受廣大前端朋友們的喜愛。
永不回頭
大家好我是瑞瑄酒業
webstorm當然很好，沒話說。 vscode火起來是因為它是免費的+微軟出品品質保障，像Vue甚至專門給vscode開發了Vetur，webstorm都沒這待遇。個人覺得如果不想買webstorm它自然是最好選擇。
回覆
活寶前端攻城獅
第10樓2019-06-22
贊
瑞瑄酒業萍萍
開發工具和開發框架是兩個概念。
如果說開發工具，chrome的開發者工具絕對是第一，雖然借簽了當年的firebug, 但青出於藍勝於藍，調試功能強大。結合workspace更是可以直接修改代碼
開發框架的話，國人出的vuejs代碼清楚，比當年的angularjs更好。強烈推薦
