代码编辑 · 前端开发者手册

## 了解代码编辑器 >源代码编辑器是一个文本编辑程序, 专门为编辑计算机程序源代码的程序员而设计的, 它可能是一个独立的应用程序或内置在集成开发环境(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) * [AutoFileName](https://packagecontrol.io/packages/AutoFileName) * [SublimeLinter](https://packagecontrol.io/packages/SublimeLinter) * [SublimeLinter-json](https://packagecontrol.io/packages/SublimeLinter-json) * [SublimeLinter-jshint](https://packagecontrol.io/packages/SublimeLinter-jshint) * [SublimeLinter-html-tidy](https://packagecontrol.io/packages/SublimeLinter-html-tidy) * [SideBarEnhancements](https://packagecontrol.io/packages/SideBarEnhancements) * [Terminal](https://packagecontrol.io/packages/Terminal) * [BracketHighlighter](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) * [StringEncode](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 $]