代碼編輯器

了解代碼編輯器

源代碼編輯器是一個(gè)文本編輯程序, 專門為編輯計(jì)算機(jī)程序源代碼的程序員而設(shè)計(jì)的, 它可能是一個(gè)獨(dú)立的應(yīng)用程序或內(nèi)置在集成開發(fā)環(huán)境(IDE)或web瀏覽器中. 源代碼編輯器是最基本的編程工具, ,作為程序員的基本工作就是編寫和編輯源代碼. - Wikipedia

前端代碼可以被一個(gè)簡單的文本編輯應(yīng)用程序(如: Notepad 或 TextEdit), 但是, 大多數(shù)前端人員使用專門為一種編程語言而設(shè)計(jì)的代碼編輯器編輯.

可以這么說, 代碼編輯器有各種各樣的類型和大小. 選擇一個(gè)編輯器是主觀行為。選擇一個(gè), 學(xué)習(xí)它的使用,然后繼續(xù)學(xué)習(xí) HTML, CSS 和 JavasCript DOM.

但是, 我一直相信, 編輯器應(yīng)該有如下特點(diǎn):

• 一份不錯(cuò)的關(guān)于如何使用編輯器的文檔
• 報(bào)告 HTML, CSS 和 JavaScript 代碼的質(zhì)量
• 為 HTML, CSS 和 JavaScript 提供語法高亮
• 為 HTML, CSS 和 JavaScript 提供代碼自動(dòng)完成
• 通過插件的方式自定義編輯器架構(gòu)
• 有大量的第三方倉庫/插件社區(qū), 能夠用于自定義編輯器
• 輕量, 簡單, 不耦合代碼(不需要編輯代碼等等)

我個(gè)人推薦將下列的插件和 Sublime Text 一起使用:

• Package Control
• Auto?File?Name
• Sublime?Linter
  • Sublime?Linter-json
  • Sublime?Linter-jshint
  • Sublime?Linter-html-tidy
• Side?Bar?Enhancements
• Terminal
• Bracket?Highlighter
• Color Highlighter
• CSS3
• HTMLAttributes
• String?Encode
• HTML-CSS-JS Prettify

Sublime 的學(xué)習(xí)資源:

• 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]

如果你想用免費(fèi)的軟件替代 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 $]