一般軟體開發中必備的一樣工具就是程式碼編輯器。傳統的程式碼編輯器一般都是以軟體安裝包的形式安裝到電腦裡面，程式碼編輯儲存後一般也是通過 ftp 或者 svn 等工具提交到伺服器的（當然，像 .NET 開發中 Microsoft Visual Studio 這樣強大的整合工具另說了。）。
在實際的專案開發中這樣的方式也是挺便捷的。但是，隨著各種雲服務的興起，雲端儲存時代幾乎已經是大勢所趨了。個人或者小公司搭建一個類似的服務自然代價不菲。這時候利用一些現有的線上程式碼編輯器，可以為你的專案進度和日常學習帶來很大的幫助。特別是一些開源專案的程式碼維護和分享。
今天給大家帶來的就是 10 個程式設計師最喜歡的線上程式碼編輯器。包括 HTML，CSS、JavaScriptPHP、Python 、Ruby on Rails 和C/C++等。具體的大家可以自己去官方網站詳細瞭解。
1. CodePe
CodePen 是我最喜歡的程式碼編輯器之一。 CodePen 有一些炫酷而獨特的功能，這使得它成為 Web 開發中最流行的線上程式碼編輯器之一。
CodePen 的特點是：
- 實時預覽 HTML，CSS 和 JavaScript
- 您可以使用預處理程式的語法像 Sass, LESS, Stylus. Markdown, Haml, Slim, Jade
- 使用 CodePen 組合展示才華和設計自己的組合主頁。
- 您可以使用 Hire Me（聘用我）功能服務找到兼職工作。
- 任何資源都可以嵌入在任何其他網站。
Dabblet
Dabblet 的介面十分簡潔，操作起來並不複雜，特別適合新手和想嘗試最新 HTML5 標籤和 CSS3 樣式的前端攻城師使用。Dabblet 的一大特色是程式碼編寫時可免加 CSS 字首。因為，Lea Verou（工具的作者）本人就是免 CSS 字首 JavaScript 指令碼 -prefix-free 的作者，Dabblet 擁有此功能當然是順理成章的事。HTML 和 CSS 程式碼間的切換也很方便，點選隱藏工具欄右上方的標籤即可。使用者可以根據習慣，調整前端程式碼的預覽效果，瀏覽器內全屏預覽將新標籤頁中開啟。
Dabblet 支援用 Github 帳號登入，測試的程式碼段既可以匿名儲存也可以儲存在使用者的 Github:gist 中，以便使用者將程式碼段嵌入自己的站點或是進一步分享給其他人。
Thimble
Mozilla 推出的 HTML/CSS 線上互動式學習網站 Thimble：左側編輯，右側實時預覽，帶有大量真實案例。該站是 Mozilla 新近推出的 Webmaker 計劃的組成部分，旨在幫助普通使用者線上學習編寫 HTML 和 CSS。
Thimble 提供的是雙皮膚設計， 左側為帶語法高亮的程式碼編輯，右側可實時預覽網頁效果， 如果使用者對效果滿意， 可通過右上方的藍色 “Publish” 按鈕一鍵釋出， 還可通過提供的 Twitter 釋出按鈕與好友分享你的設計成果。
JSFiddle
JSFiddle 是一個老牌的線上 JavaScript 程式碼除錯工具。支援 JavaScript、CSS、HTML 程式碼視覺化線上除錯工具，支援多種應用多種主流框架，用起來非常方便，而且還可以將除錯好的結果以非常簡潔的頁面直接嵌其他網頁裡。
除了可以除錯程式碼外，還可以方便的釋出到社群，論壇或者社交媒體上與朋友們分享或者提問。整合了很多的不同的類庫供大家選擇。
CSSDesk
CSSDesk 工具是一個標準的 CSS 沙盒，可以給予 CSS 初學者最大的幫助，網站分成三欄，我們可以非常方便的通過在左側實時修改程式碼來檢視某個 CSS 屬性的改變給 HTML 元素帶來的影響，甚至我們可以把整個網站都放到其中來進行除錯，並將除錯完成的檔案儲存為 HTMl。唯一的遺憾是缺少程式碼提示，需要手工輸入 CSS 屬性。
CodeMirror
又一款“Online Source Editor”，基於 Javascript，短小精悍，實時線上程式碼高亮顯示，他不是某個富文字編輯器的附屬產品，他是許多大名鼎鼎的線上程式碼編輯器的基礎庫。
可以看出，CodeMirror 的作者是一個十分嚮往自由的人。但他的 CodeMirror 絕對不簡單，看看下面這份清單：
- Google Earth KML sampler
- Eloquent JavaScript’s console
- The qooxdoo playground
- A cool tutorial about the element
- An online IDE for the Orc programming language
- Google’s API playground
- Raphaël Live
- JS Bin
- The RokPad plugin for Joomla
- The scraperwiki editor
- jsLinb UI Builder
上述的這些線上程式碼編輯器都是基於 CodeMirror 的，是不是感到驚訝，裡面有你熟悉的 JS Library。
CodeMirror 本身的定位也很明確，短小精悍，但程式碼質量很高，在 Google Group 的群裡面，人們熱烈的進行著用 CodeMirror 做各式各樣改造的討論，可見對他的歡迎。
假如你有專案需要線上程式碼編輯，還等什麼？CodeMirror，絕對是你最好的選擇。
JS Bin
JSBin 是一個 Web 應用，主要用於幫助測試 JavaScript 和 CSS 的程式碼片段。功能與 jsFiddle 網站一致。
eCoder
ecoder 是一個基於 Web 的程式碼編輯器，採用 PHP 和 JavaScript 開發。它包括：實時語法加亮，一個檔案瀏覽器，一個檔案上傳器和一個標籤系統能夠實現直接在伺服器上同時編輯多個檔案。
Codeanywhere
Codeanywhere 是一個線上的程式碼編輯器，你可以在瀏覽器中編寫 html、css、javascript、php、XML 的程式碼，目前支援 chrome、firefox、Opera、Safari、IE，當然也可以在 android、iphone 上安裝 codeanywhere 的軟體。
Codeanywhere 的特點是：隨時隨地可以寫程式碼（雖然我認為手機上寫程式碼有點搞笑）。
Codeanywhere 支援連線 FTP Server、Dropbox、Github，比如 Dropbox，你只要有一個賬號，連上 Dropbox 後，Codeanywhere 能夠在 Dropbox 上建立 html 等檔案，你寫的程式碼都存放在 Dropbox 上了。
Cloud9 IDE
Cloud9 IDE 是一個用來測試執行 Node.js 和 JavaScript 平臺，但也支援 Python, Ruby 和 Apache+PHP 的應用程式，例如 Wordpress。前幾天分享了支援 Node.js、Python、Go、Rails 等程式語言的 Nitrous.io 空間，很快有朋友給部落寫郵件，告知 Cloud9 可以比 Nitrous.io 更長久地執行應用例項。
Cloud9 支援的程式語言有 Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供 FTP、S-S-H 和空間託管，有 MysqL、MongoDB、SQLite 資料庫，可以一鍵安裝 Wordpress，也可以自己上傳程式程式碼，支援協同編輯合作，另外可以和其它的雲空間整合。
Cloud9 支援將程式碼一鍵釋出到 Heroku、Windows Azure、Google App Engine、CloudFoundry 等雲空間上，還可以同步應用到 Github 空間上，總之，除了 Cloud9 空間不支援繫結自己的域名、無法永久保持應用線上外，Cloud9 空間用來測試程式和程式碼還是不錯的。
注：部分內容參考自 Best Online HTML and CSS Code Editor For Web Developers。有個別編輯器網站可能需要自備梯子。
相關閱讀
評論(2)