俗話說："欲先善其事，必先利其器"、"磨刀不誤砍柴工，砍柴時，需要一把好斧頭。同樣的前端開發也需要一個好的編譯器，有一個好的編輯器，省時省力。廢話不多書，開始介紹幾款常見的編譯器。
一、Visual Studio Code
下載地址：https://code.visualstudio.com/
屬於微軟旗下的，功能強大且輕巧的免費代碼編輯器具有集成工具，可輕松地將代碼部署到 Azure。軟件功能強大，語法高亮，自動格式化代碼，設計人性化，使用便捷。本人自己就用這個編輯器。
二、sublime text3
下載地址：http://www.sublimetext.com/
sublime text3是一個輕量、簡潔、高效、跨平台的編輯器，支持各種編程語言。體積小，無需安裝，綠色便捷。但是對於項目啟動、打包、提交版本等有點困難。如果制作簡單網頁便可以使用它。
三、Webstorm
下載地址：https://www.jetbrains.com/webstorm/
Webstorm是jetbrains公司一款商業的javascript開發工具，被譽為“web前端開發神器”、“最強大的HTML5編輯器”。官方提供插件支持，自動保存文件、自動格式化代碼、統一風格等很多優勢。唯一缺點，屬於商業版開發工具，體驗版只能使用30天，需要付費購買或破解使用，免費版每次只能使用30分鍾就強制關閉了。
四、HBuilder
下載地址：https://www.dcloud.io/hbuilderx.html
HBuilder是一款輕巧、極速、有強大語法提示的編輯器，提供比其他工具更優秀的vue支持，提升vue開發效率。還支持開發webapp，最強大之處就在於使用uni-app項目時，一套代碼可以發行多個平台，如果是webapp，可直接打包android和ios兩個包；如果是小程序，則可發行至微信、支付寶，抖音、快手、百度、360、快應用等多個平台。一套代碼，解決多個平台，開發和維護效率極高。
五、Dreamweaver
Dreamweaver簡稱“DW”，最早輸“網頁三劍客”之一，是將開發和管理網站於一身的所見所得網頁編輯器。代碼提示功能強大，有設計模式，直接點擊和拖拽，即可實時的更新代碼，適合新手利用它可以輕而易舉的制作出網頁。但是在設計模式下生成的代碼可讀性差。對於大項目，不推薦使用，不便於項目啟動、打包、提交版本等管理。目前需要付費購買或破解才能使用。