源代碼編輯器是為編輯計(jì)算機(jī)程序源代碼而設(shè)計(jì)的文字編輯程序。它可能是一個(gè)單獨(dú)的應(yīng)用程序，也可能嵌入在一個(gè)集成的開(kāi)發(fā)環(huán)境（IDE）或者瀏覽器中。因?yàn)榫幊倘藛T最基本的工作就是編寫源碼，因此源代碼編輯器是最基本的編程工具。

— 維基百科

使用諸如 Notepad 和 TextEdit 之類簡(jiǎn)單的文字編輯器即可滿足前端代碼編寫的最低要求。然而，大多數(shù)的前端開(kāi)發(fā)者傾向于使用為編輯程序語(yǔ)言而專門設(shè)計(jì)的代碼編輯器。

代碼編輯器有各種各樣的類型和大小，因此完全可以根據(jù)個(gè)人偏好來(lái)進(jìn)行選擇。做出選擇以后，全面地學(xué)習(xí)使用方法，然后投入到 HTML，CSS，DOM 和 Javascript 的學(xué)習(xí)中去吧。

盡管如此，我還是強(qiáng)烈認(rèn)為一款合格的代碼編輯器至少應(yīng)該達(dá)到以下標(biāo)準(zhǔn)（在默認(rèn)設(shè)置或者使用插件的情況下）：

1. 能夠找到關(guān)于如何使用該編輯器的條理清晰的文檔；
2. 能夠?qū)?HTML，CSS 以及 Javascript 代碼的質(zhì)量進(jìn)行匯報(bào)（提示／診斷／報(bào)錯(cuò)）；
3. 提供 HTML，CSS 以及 Javascript 代碼高亮；
4. 提供 HTML，CSS 以及 Javascript 代碼補(bǔ)全；
5. 可以利用插件進(jìn)行自定義構(gòu)建；
6. 有許多可以使用的第三方／社區(qū)插件，可以用來(lái)把編輯器自定義為自己喜歡的樣子；
7. 小而輕量，同代碼不相耦合。

代碼編輯器: [^1]

• Atom
• Brackets
• Sublime Text [付費(fèi)]
• WebStorm [付費(fèi)]
• Visual Studio Code

在線代碼編輯器:

• Cloud9 [增值付費(fèi)]
• Codeanywhere [增值付費(fèi)]

可運(yùn)行，可分享的代碼編輯器:

可以用來(lái)分享一定數(shù)量，且即刻可以運(yùn)行在 web 瀏覽器中的代碼。這類工具并非真正的代碼編輯器。

• CodePen [增值付費(fèi)]
• jsbin.com [增值付費(fèi)]
• jsfiddle.net
• liveweave.com
• Plunker

建議：

[^1] 強(qiáng)烈建議使用 Visual Studio Code ，這款編輯器非常優(yōu)質(zhì)并且處于持續(xù)的更新中，另，作為微軟出品的軟件，其質(zhì)量和更新速度都能夠到有效的保證。