前端开发者手册第三部分: 前端开发工具代码编辑
代码编辑
了解代码编辑器
源代码编辑器是一个文本编辑程序, 专门为编辑计算机程序源代码的程序员而设计的, 它可能是一个独立的应用程序或内置在集成开发环境(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-jshint
- SublimeLinter-html-tidy
- SideBarEnhancements
- Terminal
- BracketHighlighter
- Color Highlighter
- CSS3
- HTMLAttributes
- StringEncode
- HTML-CSS-JS Prettify
Sublime 的学习资源:
- Sublime Productivity [read][$]
- Sublime Text Power User Book [read][$]
- Sublime Text 3 From Scratch [watch][$]
- Perfect Workflow in Sublime Text 2 [watch][requires login, but free]
如果你想用免费的软件替代 Sublime($70), 可以考虑 atom 或brackets
在线合作的代码编辑器:
- jsbin.com [free to $]
- jsfiddle.net
- liveweave.com
- es6fiddle.net
- codepen.io [free to $]
- Plunker
在线代码编辑器:
- codeanywhere [free to $]
- Koding [free to $]
- Cloud9 [free to $]