HTML通常會和JavaScript、CSS同時出現。三者均是前端開發最常用到的。目前最常用到的HTML其實就是HTML5。常用的前端程式設計軟體有HBuilder、Sublime Text等等。

HBuilder是一款免費的中國產前端開發工具，編者用的就是HBuilder，對於小白和英語不太好的前端開發者這是一款難得的IDE。對程式碼自動補全方面簡直是強大到沒朋友。強力推薦。

Sublime Text是一個輕量級的編輯器，不端支援前端的html，js，css。還支援覺得多數的後端語言，比如C語言、java、python等。sublime text的強大之處是支援各種外掛而且快捷鍵非常好用，可以極大的提高開發效率。缺點是程式碼提示方面不如Hbuilder。

就工具而言，當前前端最流行的就是

webstorm，vscode，sublime，atom。近來vscode有一統天下之勢

VSC-VSCode

輕量快速，高顏值，社群開源，豐富擴充套件，微軟支援

還有超好用的遠端開發(vscode remote)和協作(live share)支援

之前最喜歡的是sublime,看到它的第一眼就被它吸引了，性感的主題樣式，讓我愛不釋手，快捷的檔案定位，豐富的外掛機制，快到飛起的啟動速度，讓我放不下它。

然而，不是我喜新厭舊，vscode的出現，讓我拋棄了sublime，不是它不夠好，只是vscode太強大了，強大到我真不能對它熟視無睹。看到vscode的第一眼就感覺這傢伙怎麼和sublime這麼像，一樣的快速檔案定位，一樣的豐富外掛機制，一樣的性感主題樣式，可能唯一不同的就是它是開源的，所以它的外掛數量相對於sublime多出許多倍，而且這個量級還在擴大。雖然啟動速度它稍慢一些，但是相比於其它IDE，它還是要快上很多。

豐富的外掛機制，個性化的主題設定，靈活的多語言支援，可以說有了它，可以堪比好幾個IDE。

1.sublime text用著確實不錯，但是程式碼開發提示不強，平時用著文字編輯器還是可以的。

2.hbuild+用了一段時間各種不適用，最後就解除安裝了。

3.vs code用著一段時間寫vue，需要安裝外掛，而且提交程式碼用感覺不方便，把不想提交的最後提交了，導致程式碼衝突，也許是因為自己用不熟。

4.webstorm 推薦使用，程式碼智慧提示，而且提交程式碼方便。

前端開發是目前一個非常火的行業，就業前景和薪資水平都非常不錯，至於開發工具的話，那就非常多了，大部分程式碼編輯器、IDE環境都支援，下面我簡單介紹4個非常不錯的前端開發工具，感興趣的朋友可以嘗試一下：

VS Code

這是目前前端開發一個非常流行的開發工具，在業界非常受歡迎，免費、開源、跨平臺，由微軟自主研發，可以說是良心產品，常見的智慧補全、程式碼高亮、語法提示等功能這個軟體都能很好支援，除此之外，外掛擴充套件非常豐富，可以很好的進行程式碼編輯和除錯，輕巧靈活，執行速度快，對於前端開發來說，是一個非常不錯的選擇：

Sublime Text

這也是一個比較輕巧靈活的程式碼編輯器，文字編輯功能強大，完美支援3大操作平臺，但原則上不免費，和VS Code類似，Sublime Text也支援自動補全、語法提示、程式碼高亮等常見功能，除此之外，針對前段開發也提供了非常多的外掛，不管是編輯還是除錯程式碼來說，都非常方便，對於前端開發來說，也是一個不錯的選擇：

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。

喜歡用webstorm，atom和vs code，sublimetext都裝了，幾乎只用webstorm，atom介面是漂亮，也是我第一個下載安裝的，裝了各種外掛，那時初學，感覺提示不全，還有就是外掛安裝了幾個後開機明顯變好慢，無奈下了webstorm，感覺很爽

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，可用於建立各種網站和應用程式，強大而靈活！

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直譯器），並實現了文字編輯支援等的擴充套件。

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下非常好用的抓包工具。

1、HBuilder

功能簡介：HBuilder是專為前端打造的開發工具，具有飛一樣的編碼、最全的語法庫和瀏覽器相容資料、可以方便的製作手機APP、最保護眼睛的綠柔設計等特點。支援HTML、CSS、JS、PHP的快速開發。從開放註冊以來深受廣大前端朋友們的喜愛。

前端開發最爽的地方就在於，一個編輯器，一個瀏覽器就足矣走天下。

前端開發利器，超級好用的編輯器，對於大前端來說更是不可多得。由微軟出品，跨平臺支援，顏值高，易上手，豐富的外掛支援。下面推薦幾個前端常用外掛。

HTML Snippets：及初級又實用的HTML程式碼智慧提示，對經常手誤的小夥伴簡直不能太友好。

HTML CSS Support：讓你在寫html 標籤時寫class 智慧提示當前專案所支援的樣式，目前最新版本已經支援css檔案檢索。

Debugger for Chrome：直接讓你的程式碼在Chrome中執行程式碼，vscode中除錯。

jQuery Code Snippets：jQuery使用者的福音，用起來難道不香嗎？

Atuo Rename Tag：

CSS Peek：很方便的來檢視CSS樣式。

F12功能：瀏覽器自備，功能強大，推薦使用Chrome瀏覽器

Fiddler：非常好用的一款抓包工具，可以抓幾乎所有的應用程式的HTTP請求。可以抓包，修改請求等。唯一的缺點就是需要安裝.net支援。

Firebug：火狐瀏覽器的經典外掛，能夠除錯所有網站語言，最經典實用的莫過於對Javascript語言的除錯功能了。

Postman：一款功能強大的網頁除錯與傳送網頁HTTP請求的Chrome外掛。可以讓我們很方便的對REST API等HTTP服務介面進行測試。

User Agent Switcher：從名稱我們就可以看出來，用來更換瀏覽器的UserAgent。

Yellow Lab Tools：一款Web效能及前端質量測試工具。與其他工具不同的是，它有一些在其他工具上無法看到的獨特功能，例如頁面載入時 JavaScript 與 DOM 互動和其他程式程式碼驗證問題。

但是，如果做前端開發，我認為除了jetbrain的webstorm，還有很多選擇，而其中我最為推薦的當屬VS Code，下面就來介紹一下。

VS Code是一款出自微軟之手的開發工具，我想，僅憑這一點就值得關注並且嘗試一下。

微軟在開發工具領域已經有了多年積澱，而VS Code有時微軟結合了visual studio和其他開發工具，不斷改進、最佳化推出的一款免費開發工具。

可以說VS Code是當下最為熱門的開發工具之一，對比於eclipse、IDEA這些老牌開發工具，微軟對於VS Code的改變更為大膽創新，已經處於領頭羊的地位。每年微軟開發者大會，都會對 VS Code進行大幅度的創新，經過多年的最佳化，VS Code已經讓很多開發者愛不釋手。

首先說一下它幾個為人熟知的優點，

輕量化

豐富的外掛

首先說一下輕量化，我覺得僅憑這一點，就足以讓jetbrain全家桶汗顏。無論是webstorm、還是IDEA，最令人痛苦的就是開啟過程，臃腫、漫長，載入工程專案和配置項需要多大幾分鐘，令人無法忍受。而VS Code則不同，它更像一個編輯器，能夠秒級開啟，速度堪比UE、notepad++這些文字編輯器。

其次說一下豐富外掛，豐富的外掛造就了VS Code完整的生態，“你想要的，這裡都有”，無論是標籤樣式還是DEBUG或者功能增強，VS Code都有非常多熱門的外掛，使得你的開發效率大大提升，當然，前端需要的那些優質外掛這裡都有。

其實，讓我轉向VS Code並非上述這兩點，而是遠端開發。

我覺得這是微軟大膽創新和引領者角色必然的產物，讓很多其他開發工具很難望其項背。

有了VS Code遠端開發功能，我們可以實時同步本地和伺服器程式碼，不需要再去複雜的配置遠端伺服器，對於專案管理也非常方便。

做開發20年了 從ASP，ASP. Net 到PHP 說個很不好意思的話 用得最多的就是記事本了。

最開始的時候用過frontpage ，但是畢竟不是哪個電腦都裝過這個軟體，其他的動不動就收費，註冊 麻煩。

所以用得最多的是記事本，早期的記事本里沒有行號，那個除錯程式碼累啊。現在的記事本好多了。

直到去年用了VSCODE 這個免費的 比記事本好用多了。