前端常用的幾種在線代碼編輯器各有什麼優勢？

12-31

在Stackoverflow提問時，經常需要一個可以編輯的Demo，因此像jsfiddle這樣的在線代碼編輯器提供了很大便利。
前端的在線代碼編輯器有不少，我發現似乎用jsfiddle和CodePen的人比較多（不過有一點不太爽的是它們似乎不提供代碼模板，比如我想測試一個AngularJS的功能，需要從頭寫很多腳手架代碼）
大家經常用的在線代碼編譯器（Javascript/CSS/HTML Online Playground）是哪一個呢？有哪些使用心得？

學習的時候

學習ES6的時候我會用 Babel · The compiler for writing next generation JavaScript 來了解 Babel 編譯/Polyfill 和 ES6 的語法運作機理。

學習 LESS / SASS 的時候我會用 LESS2CSS | LESS Live Preview 和 Online SCSS Compiler - BeautifyTools.com

找靈感的時候

有的時候需要找一找 CSS/Canvas/SVG 動畫的靈感，我會上 Explore Pens on CodePen

在團隊中分享代碼片段的時候

我會用 Github Gist，或者 JS Fiddle，JS Bin。

如果身邊沒有開發環境，但是需要緊急提交 Git

可以考慮Your development environment, in the cloud，或者國內的 coding.net。

面試的時候

如果面試者未能連接上阿里的面試工具，我會發給他一個 Share code in real-time 連接，最大的好處是可以實時看到對方coding，從而了解對方的思考習慣、解題過程和 format 習慣。

從前有一個靈感迸發的夜裡我在jsfiddle上寫下了一大段美妙的代碼.然後不小心寫了一小段會導致循環的js腳本.然後....這堆代碼就再也取不出來了

這是我認為jsfiddle的一個劣勢,沒辦法自動終結無限循環的腳本

我們前端群規定提代碼問題要有在線Demo，關於這點總結的還算不錯，搬運一下吧：

3. 沒有圖片的代碼發

a. 在線編輯類的：
JS Bin - Collaborative JavaScript Debugging
介紹一款在線編輯器：jsbin jsbin的用法
優點：不需要登錄，即發即預覽
缺點：速度不靠譜
RunJS - 在線編輯、展示、分享、交流你的 JavaScript 代碼
優點：國內訪問速度快，可以上傳圖片(左下角)
缺點：需要登錄，用戶名
Create a new fiddle

優點：功能強大，歷史記錄給力，缺點：訪問速度慢

參考資料：

有道雲筆記

給大家介紹幾個北美經常用的：

jsfiddle

Create a new fiddle

最經典的的編輯器了，主要寫頁面，沒有集成console不太方面調JS

jsbin

JS Bin

跟jsfiddle差不多，有自帶console挺適合調JS的，我最近幾篇專欄文章的代碼都是放在jsbin里的，可以方便的到處到gist很不錯。但是存snapshot有點不清楚（反正我是還沒弄清楚）。Node快閃御用。

plunker

https://plnkr.co/

這個好像國內用的人不多，難道是被牆了？這是我見過的最貼近真實開發環境的ide，所有html js css文件一覽無遺，不像jsfiddle一樣隱藏html和body元素。要是有console就更好了。Angular1文檔御用。

repl.it

Online REPL, Compiler IDE

這個大家可能見的不多，多語言環境，JS的是純console環境，布局很乾凈，調JS挺好的。

codepen

CodePen

這個跟jsbin差不多，好像上面的代碼大多數是CSS相關的。http://css-tricks.com御用。

hackerrank

HackerRank

這個嚴格說是個比賽／面試環境，實時性不錯，其它跟jsfiddle大同小異。我司電面御用。

runkit

RunKit is Node prototyping

這個是node編程用的，在線require( )各種包，看上去挺屌的，我還沒怎麼玩過。npm御用。

推薦 KODExplorer（代碼編輯器插件叫 ACE.js，http://c9.io 用的那個）

優點回來有空補充

jsfiddle
jsbin
codepen css的居多

jsfiddle 經常在用，就是國內環境太差了 Create a new fiddle

推薦 JSRUN , 速度很快 http://jsrun.net