## 了解代碼編輯器 >源代碼編輯器是一個文本編輯程序, 專門為編輯計算機程序源代碼的程序員而設計的, 它可能是一個獨立的應用程序或內置在集成開發環境(IDE)或web瀏覽器中. 源代碼編輯器是最基本的編程工具, ,作為程序員的基本工作就是編寫和編輯源代碼. - Wikipedia 前端代碼可以被一個簡單的文本編輯應用程序(如: Notepad 或 TextEdit), 但是, 大多數前端人員使用專門為一種編程語言而設計的代碼編輯器編輯. 可以這么說, 代碼編輯器有各種各樣的類型和大小. 選擇一個編輯器是主觀行為。選擇一個, 學習它的使用,然后繼續學習 HTML, CSS 和 JavasCript DOM. 但是, 我一直相信, 編輯器應該有如下特點: * 一份不錯的關于如何使用編輯器的文檔 * 報告 HTML, CSS 和 JavaScript 代碼的質量 * 為 HTML, CSS 和 JavaScript 提供語法高亮 * 為 HTML, CSS 和 JavaScript 提供代碼自動完成 * 通過插件的方式自定義編輯器架構 * 有大量的第三方倉庫/插件社區, 能夠用于自定義編輯器 * 輕量, 簡單, 不耦合代碼(不需要編輯代碼等等) 我個人推薦將下列的插件和?[Sublime Text](http://www.sublimetext.com/)?一起使用: * [Package Control](https://packagecontrol.io/packages/Package%20Control) * [Auto?File?Name](https://packagecontrol.io/packages/AutoFileName) * [Sublime?Linter](https://packagecontrol.io/packages/SublimeLinter) * [Sublime?Linter-json](https://packagecontrol.io/packages/SublimeLinter-json) * [Sublime?Linter-jshint](https://packagecontrol.io/packages/SublimeLinter-jshint) * [Sublime?Linter-html-tidy](https://packagecontrol.io/packages/SublimeLinter-html-tidy) * [Side?Bar?Enhancements](https://packagecontrol.io/packages/SideBarEnhancements) * [Terminal](https://packagecontrol.io/packages/Terminal) * [Bracket?Highlighter](https://packagecontrol.io/packages/BracketHighlighter) * [Color Highlighter](https://packagecontrol.io/packages/Color%20Highlighter) * [CSS3](https://packagecontrol.io/packages/CSS3) * [HTMLAttributes](https://packagecontrol.io/packages/HTMLAttributes) * [String?Encode](https://packagecontrol.io/packages/StringEncode) * [HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify) Sublime 的學習資源: * [Sublime Productivity](https://leanpub.com/sublime-productivity)?[read][$] * [Sublime Text Power User Book](https://sublimetextbook.com/)?[read][$] * [Sublime Text 3 From Scratch](http://www.pluralsight.com/courses/sublime-text-3-from-scratch)?[watch][$] * [Perfect Workflow in Sublime Text 2](https://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2)?[watch][requires login, but free] 如果你想用免費的軟件替代 Sublime($70), 可以考慮?[atom](https://atom.io/)?或[brackets](http://brackets.io/) **在線合作的代碼編輯器:** * [jsbin.com](http://jsbin.com/)?[free to $] * [jsfiddle.net](http://jsfiddle.net/) * [liveweave.com](http://liveweave.com/) * [es6fiddle.net](http://www.es6fiddle.net/) * [codepen.io](http://codepen.io/)?[free to $] * [Plunker](http://plnkr.co/) **在線代碼編輯器:** * [codeanywhere](https://codeanywhere.com/)?[free to $] * [Koding](https://koding.com/)?[free to $] * [Cloud9](https://c9.io/)?[free to $]