了解代码编辑器

源代码编辑器是一个文本编辑程序, 专门为编辑计算机程序源代码的程序员而设计的, 它可能是一个独立的应用程序或内置在集成开发环境(IDE)或web浏览器中. 源代码编辑器是最基本的编程工具, ,作为程序员的基本工作就是编写和编辑源代码. - Wikipedia

前端代码可以被一个简单的文本编辑应用程序(如: Notepad 或 TextEdit), 但是, 大多数前端人员使用专门为一种编程语言而设计的代码编辑器编辑.

可以这么说, 代码编辑器有各种各样的类型和大小. 选择一个编辑器是主观行为。选择一个, 学习它的使用,然后继续学习 HTML, CSS 和 JavasCript DOM.

但是, 我一直相信, 编辑器应该有如下特点:

• 一份不错的关于如何使用编辑器的文档
• 报告 HTML, CSS 和 JavaScript 代码的质量
• 为 HTML, CSS 和 JavaScript 提供语法高亮
• 为 HTML, CSS 和 JavaScript 提供代码自动完成
• 通过插件的方式自定义编辑器架构
• 有大量的第三方仓库/插件社区, 能够用于自定义编辑器
• 轻量, 简单, 不耦合代码(不需要编辑代码等等)

我个人推荐将下列的插件和 Sublime Text 一起使用:

• Package Control
• AutoFileName
• SublimeLinter
  • SublimeLinter-json
  • SublimeLinter-jslint
  • SublimeLinter-html-tidy
• Side​Bar​Enhancements
• Terminal
• Bracket​Highlighter
• Color Highlighter
• CSS3
• HTMLAttributes
• StringEncode
• HTML-CSS-JS Prettify

Sublime 的学习资源:

• Sublime Productivity [read][$]
• Sublime Text Power User Book [read + watch][$]
• Sublime Text 3 From Scratch [watch][$]
• Perfect Workflow in Sublime Text 2 [watch][requires login, but free]

代码编辑器:

• Atom
• Brackets
• Sublime Text [$]
• WebStorm [$]
• Visual Studio Code

在线合作的代码编辑器:

• jsbin.com [free to $]
• jsfiddle.net
• liveweave.com
• es6fiddle.net
• codepen.io [free to $]
• Plunker

在线代码编辑器:

• codeanywhere [free to $]
• Koding [free to $]
• Clound9 [free to $]