一般軟件開發(fā)中必備的一樣工具就是代碼編輯器。傳統(tǒng)的代碼編輯器一般都是以軟件安裝包的形式安裝到電腦里面，代碼編輯保存后一般也是通過ftp或者svn等工具提交到服務(wù)器的（當然，像.NET開發(fā)中Microsoft Visual Studio這樣強大的集成工具另說了。）。

　　在實際的項目開發(fā)中這樣的方式也是挺便捷的。但是，隨著各種云服務(wù)的興起，云存儲時代幾乎已經(jīng)是大勢所趨了。個人或者小公司搭建一個類似的服務(wù)自然代價不菲。這時候利用一些現(xiàn)有的在線代碼編輯器，可以為你的項目進度和日常學習帶來很大的幫助。特別是一些開源項目的代碼維護和分享。

　　今天給大家?guī)淼木褪?0個程序員最喜歡的在線代碼編輯器。包括HTML，CSS、JavaScriptPHP、Python 、Ruby on Rails和C/C++等。具體的大家可以自己去官方網(wǎng)站詳細了解。

　　好了，廢話不多說。來看看具體都有哪些在線代碼編輯器。或許有一些你應(yīng)該會比較熟悉。

　　1. CodePe

　　CodePen是我最喜歡的代碼編輯器之一。 CodePen有一些炫酷而獨特的功能，這使得它成為Web開發(fā)中最流行的在線代碼編輯器之一。

　　CodePen的特點是：

• 實時預覽HTML，CSS和JavaScript
• 您可以使用預處理程序的語法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade
• 使用CodePen組合展示才華和設(shè)計自己的組合主頁。
• 您可以使用Hire Me（聘用我）功能服務(wù)找到兼職工作。
• 任何資源都可以嵌入在任何其他網(wǎng)站。

　　Dabblet

　　Dabblet的界面十分簡潔，操作起來并不復雜，特別適合新手和想嘗試最新HTML5標簽和CSS3樣式的前端攻城師使用。Dabblet的一大特色是代碼編寫時可免加CSS前綴。因為，Lea Verou（工具的作者）本人就是免CSS前綴JavaScript腳本 -prefix-free的作者，Dabblet擁有此功能當然是順理成章的事。HTML和CSS代碼間的切換也很方便，點擊隱藏工具欄右上方的標簽即可。用戶可以根據(jù)習慣，調(diào)整前端代碼的預覽效果，瀏覽器內(nèi)全屏預覽將新標簽頁中打開。

　　Dabblet支持用Github帳號登錄，測試的代碼段既可以匿名保存也可以保存在用戶的Github:gist中，以便用戶將代碼段嵌入自己的站點或是進一步分享給其他人。

　　Thimble

　　Mozilla 推出 的HTML/CSS 在線交互式學習網(wǎng)站 Thimble：左側(cè)編輯，右側(cè)實時預覽，帶有大量真實案例。該站是 Mozilla 新近推出的 Webmaker 計劃 的組成部分，旨在幫助普通用戶在線學習編寫 HTML 和 CSS。

　　Thimble 提供的是雙面板設(shè)計， 左側(cè)為帶語法高亮的代碼編輯，右側(cè)可實時預覽 網(wǎng)頁效果， 如果用戶對效果滿意， 可通過右上方的藍色 “Publish” 按鈕一鍵發(fā)布， 還可通過提供的 Twitter 發(fā)布按鈕與好友分享你的設(shè)計成果。

　　JSFiddle

　　JSFiddle是一個老牌的在線JavaScript代碼調(diào)試工具。支持JavaScript、CSS、HTML代碼可視化在線調(diào)試工具，支持多種應(yīng)用多種主流框架，用起來非常方便，而且還可以將調(diào)試好的結(jié)果以非常簡潔的頁面直接嵌其他網(wǎng)頁里。

　　除了可以調(diào)試代碼外，還可以方便的發(fā)布到社區(qū)，論壇或者社交媒體上與朋友們分享或者提問。整合了很多的不同的類庫供大家選擇。

　　CSSDesk

　　CSSDesk工具是一個標準的CSS沙盒，可以給予CSS初學者最大的幫助，網(wǎng)站分成三欄，我們可以非常方便的通過在左側(cè)實時修改代碼來查看某個CSS屬性的改變給HTML元素帶來的影響，甚至我們可以把整個網(wǎng)站都放到其中來進行調(diào)試，并將調(diào)試完成的文件保存為HTMl。唯一的遺憾是缺少代碼提示，需要手工輸入CSS屬性。

　　CodeMirror

　　又一款“Online Source Editor”，基于Javascript，短小精悍，實時在線代碼高亮顯示，他不是某個富文本編輯器的附屬產(chǎn)品，他是許多大名鼎鼎的在線代碼編輯器的基礎(chǔ)庫。

　　可以看出，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本身的定位也很明確，短小精悍，但代碼質(zhì)量很高，在Google Group的群里面，人們熱烈的進行著用CodeMirror做各式各樣改造的討論，可見對他的歡迎。

　　假如你有項目需要在線代碼編輯，還等什么？CodeMirror，絕對是你最好的選擇。

　　JS Bin

　　JSBin 是一個 Web 應(yīng)用，主要用于幫助測試 JavaScript 和 CSS 的代碼片段。功能與 jsFiddle 網(wǎng)站一致。

　　eCoder

　　ecoder是一個基于Web的代碼編輯器，采用PHP和JavaScript開發(fā)。它包括：實時語法加亮，一個文件瀏覽器，一個文件上傳器和一個標簽系統(tǒng)能夠?qū)崿F(xiàn)直接在服務(wù)器上同時編輯多個文件。

　　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上創(chuàng)建html等文件，你寫的代碼都存放在Dropbox上了。

　　Cloud9 IDE

　　Cloud9 IDE是一個用來測試運行Node.js 和 JavaScript平臺，但也支持Python, Ruby和 Apache+PHP的應(yīng)用程序，例如Wordpress。前幾天分享了支持Node.js、Python、Go、Rails等程序語言的Nitrous.io空間，很快有朋友給部落寫郵件，告知Cloud9可以比Nitrous.io更長久地運行應(yīng)用實例。

　　Cloud9支持的程序語言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供FTP、S-S-H和空間托管，有MysqL、MongoDB、SQLite數(shù)據(jù)庫，可以一鍵安裝Wordpress，也可以自己上傳程序代碼，支持協(xié)同編輯合作，另外可以和其它的云空間整合。

　　Cloud9支持將代碼一鍵發(fā)布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空間上，還可以同步應(yīng)用到Github空間上，總之，除了Cloud9空間不支持綁定自己的域名、無法永久保持應(yīng)用在線外，Cloud9空間用來測試程序和代碼還是不錯的。

　　注：部分內(nèi)容參考自 Best Online HTML and CSS Code Editor For Web Developers。有個別編輯器網(wǎng)站可能需要自備梯子。

　　via: yusi123