回顧 12 個面向 Web 開發人員的在線代碼編輯器

什麼是在線代碼編輯器？

在線代碼編輯器是駐留在遠程服務器上的工具，能夠經過瀏覽器訪問。

一些在線代碼編輯器具備與文本編輯器更類似的基本特性，而另外一些則像完整的集成開發環境(Integrated Development environment，IDE)。在本文中，咱們將介紹這兩種類型。

一些在線代碼編輯器專一於一種語言，甚至一個框架。例如，有些產品自稱 Javascript 在線代碼編輯器或 React 在線編輯器。

在線代碼編輯器的基本使用實例

許多方法可使用在線代碼編輯器，但咱們要強調幾個基本的方法，這些方法證實了對在線代碼編輯器的需求。

合做

使用桌面 IDE 設置協做過程可能很困難。有了在線代碼編輯器，這項任務就像在谷歌文檔中建立文檔同樣簡單。

共享和開發者關係

可使用在線代碼編輯器與同事、朋友或全世界共享您的代碼。您能夠在博客文章、入門教程和文檔中使用沙箱嵌入或連接。

快速安裝新應用程序

有一些在線代碼編輯器以與主機集成在一塊兒，所以您能夠開發一個簡單的應用程序並在幾分鐘內託管它來測試它。

在線面試和招聘

使用在線代碼編輯器，能夠在一分鐘內完成詢問，這有助於瞭解候選人的解決方案和處理代碼。

原型設計

儘早並常常測試你的想法。能夠驗證想法，並從用戶那裏獲得即時反饋。不須要設置。共享和協做選項也將爲您提供幫助。

學習

在現代網絡開發中，跟隨最新的消息是值得的，更好的是，在真實的環境中嘗試它們。最好的在線代碼編輯器容許您快速地完成這項工做，而不須要沒必要要的設置。

如何選擇在線代碼編輯器

大多數有名的在線代碼編輯器都有許多出色的功能。其中包括自動完成、 git 集成、插件支持、 CI/CD 管道等。可是這些小事情可讓一個特定的編輯器比其餘編輯器更適合你。

選擇在線 IDE/代碼編輯器時須要注意的一些方面:

• 應用程序的運行速度
• 免費編輯：顯示多少廣告
• 與存儲庫管理器集成
• 易於設置
• 語言支持
• NPM支持
• 終端支持
• 大量的文字和佈局設置

在線代碼編輯器的核心功能

在線代碼編輯器必須具有如下基本特徵：

• 分享
• 佈局設置
• 合做
• 製表設置
• 評論
• 結果視圖
• 基本文件結構

在線代碼編輯器的優勢：

• 零安裝。你不須要下載，安裝和配置 IDE
• 共享與協做。開始編碼，而後將 URL 轉發給你的同事，以便繼續你的工做或幫助你調試它
• 零成本或不多成本。絕大多數在線代碼編輯器都有免費版本，足以知足您的大多很多天常任務
• 基於訂閱的訂價。每個月支付在線編輯器而不是每一年支付許可證費用可能很是有用。

在線代碼編輯器的缺點：

• 功能有限。有些代碼編輯器甚至忽略了被稱爲代碼編輯器的基本特性。
• 性能問題。許多基於 web 的 ide 和代碼編輯器都存在性能問題。
• 沒有版本控制，絕大多數的在線代碼編輯器沒有任何 git 工具的集成。
• 沒有互聯網-沒有發展。必須在線工做才能使用線代碼編輯器。

審查過的代碼編輯器

Codesandbox

能夠爲每一個流行的前端框架使用模板。React、Vue、Angular 和 Pop 像 Gatsby、Next 等同樣。

Codesandbox 將本身定位爲一個開發平臺。社區提供了不少模板。此外，您可使用文件結構和依賴關係爲特定用例建立本身的模板，如 IDE 中所示。
該工具與 Github 集成，能夠輕鬆建立提交和打開 PRs。開箱即用，您能夠將應用程序部署到 ZEIT 或 Netlify。

對於前端，在線代碼編輯器中支持 NPM.此外，還有一個熱模塊從新加載。固然，每一個沙箱都有一個安全的 URL，而且支持 HTTPS，用於分享和反饋。

至於與代碼沙箱的寫做，能夠與同事在線工做，與他們聊天，並控制誰能夠進行編輯或觀看代碼。

還有許多其餘功能，好比：

• 測試視圖
• 內置終端
• 自動運行Jest測試
• 熱模塊從新加載
• 項目組織
• 以 zip 形式導出代碼
• 內置鏈接器(ESlint)

至於價格，Codesandbox Pro 版本的價格爲 9 美圓，其中包括私有 GitHub 存儲庫和無限個私有沙箱。

Playcode

Playcode 只是一個簡單的工具，用於快速構建原型和查看編碼結果。該工具具備典型的三窗口布局: 代碼編輯器、控制檯和結果視圖。該產品有一個基本的文件結構，但沒有版本控制和其餘 IDE 特性。

它只支持 Javascript，HTML 和 CSS。還有一個選項能夠選擇編輯器樣式、字體大小和其餘文本編輯功能。

Codepen

代碼編輯器多是在線代碼編輯器市場上最流行的工具。這個平臺在某種程度上已經開始發展成爲社交網絡，相似於 Pinterest。工程師能夠在平臺上分享他們的最佳實踐和標識，並得到社區的承認。

該工具內部有完善的搜索功能。能夠發現感興趣的模板、項目、代碼片斷和主題。
Codepen 的最大特點是學習和發現新技術和最佳實踐。瀏覽、工做和使用 Pens 是瞭解它們是如何構建和代碼如何工做的一個很好的方式。

另外一個有趣的細節——代碼的演示模式。在會議、聚會和講臺上很是有用。

顯著特色:

• 文件系統
• 自動完成
• 私人沙箱
• 網站設置
• 協做模式

價格從每個月8美圓到26美圓不等，還有免費的限量版。

Stackblitz

Stackblitz 與完整的 IDE 很是類似，該工具是基於 VS 代碼構建的。該產品具備普遍的特性，能夠啓動並繼續開發完整的全堆棧應用程序。該工具由許多開發人員所熟悉的 Visual Studio 提供支持。

它會自動處理安裝依賴項、編譯、捆綁和熱重載。

導入庫對於 web 開發相當重要，因此 StackBlitz 包含了一個內置瀏覽器 npm 客戶端，它支持一次安裝多個軟件包和特定的版本。

該項目的殺手級功能是離線編輯。Stackblitz 開發了一個瀏覽器內的網絡服務器來實現這一點。經過 Stackblitz，您能夠在單獨的窗口中預覽和編輯，這與其餘項目中的 iframe 或小窗口相比是很是棒的。

其餘值得注意的特性包括與 Github 鏈接以導入/導出項目，與 Google Firebase 集成以建立全堆棧項目，以及像 ZIP 文件那樣下載項目。

Codeanywhere

Codeanywhere 假裝爲 Web 瀏覽器和移動設備中的完整 IDE。

Codeanywhere 能夠很容易地用 Javascript、 PHP、 HTML 和其餘 72 種語言爲您的項目創建本身的定製開發環境。

顯而易見的主要特性是 Codeanywhere 能夠鏈接任何東西，代碼能夠駐留在 FTP 服務器或者其餘 Github 源代碼上，可是你能夠將它與 Codeanywhere 鏈接並開始編輯和開發。

在編輯器模式下，可使用如下特性:

• 代碼完成
• Linting（js，CSS）
• 多個遊標
• 代碼美化

此外，您能夠發揮佈局和顏色的編輯器的修改。該工具備本身的內置終端。您還能夠與任何開發人員共享整個項目、文件或文件夾。每一個共享均可以有本身獨特的權限。

Codeanywhere 包含一個實用的差別特性，容許您查看修訂之間的差別，甚至容許您恢復到之前的代碼狀態。還有與 git 知識庫和工具的深度集成，這些工具能夠簡化開發操做過程。這個產品適合那些想要移動到雲端並永遠留在那裏的開發者。

JSfiddle

JSfiddle 是一個簡單而又很是流行、快速和高效的在線代碼編輯器。該工具容許您快速共享代碼，並可視化查看結果，StackOverflow 與它集成在一塊兒。
在視覺上，與大多數競爭者同樣，該界面分爲 4 個塊：一個用於編寫代碼的塊、一個用於編輯 CSS、SCSS 或 sass 的代碼，一個用於 HTML 佈局的塊以及一個具備可見工做結果的塊。

代碼編輯塊支持如下語言:

• Pure Javascript
• React、Preact
• Babel + JSX
• Coffee script、Vue
• Type script

還能夠在此塊中更改各類設置，如加載類型、框架類型和框架屬性。這個工具還有很是好和完整的文檔，以及一個開發的社區，它能夠投票決定哪些特性將首先被開發接受。

使用 Vue、 Jquery、 React + JSX 和其餘語言編寫的一些流行樣板文件也促進了開發。至於缺點，JSfiddle 只用於前端工做。它不支持文件和文件夾的概念，也沒有辦法構建 CI/CD 管道。

通常來講，這是測試新框架最合乎邏輯和最酷的選擇之一，在新產品的文章和演示中演示代碼。

Htmlcodeeditor

此代碼編輯器只適用於編輯 HTML，徹底無償使用。值得注意的功能包括:

• 自動完成
• 標題中的基本標記
• 標籤嚮導
• 查找和替換標籤的特性
• 具備多種清潔功能
• 這個工具的缺點是有大量的廣告

Repl.it

Repl.it 是最強大的在線開發工具之一。該產品支持多種語言和框架，包括現代流行的 Haskell、Kotlin 和著名的 Javascript、C ++、Ruby 等。

主頁開始於語言搜索，而後提供選擇如下類別之一：Web 開發，遊戲開發等。而後，您須要選擇語言並建立表明。

即便在免費版本中，您也能夠建立文件結構、控制版本和安裝包。在設置中，您能夠編輯佈局、主題、字體大小和縮進大小。共享選項包括嵌入連接、普通連接、與 dev.to 社區集成。還有一個叫作「對話」的社交媒體功能，開發者能夠在這裏分享收到的反饋和代碼。還有一個很大的功能叫作教室，在這裏你能夠建立教室，邀請學生並追蹤進度。

Repl 已被 Facebook、MIT、Google 等公司和組織使用。

價格從免費到每個月 7 美圓不等，包括私人表明，無限存儲空間和更快的速度。

Jsoneditoronline

Jsoneditoronline 是一個基於 web 的工具，用於查看、編輯和格式化 JSON。它在一個清晰的、可編輯的樹形視圖或代碼編輯器中並排顯示數據。您能夠在本地或雲中存儲文檔。

您還可使用連接共享文檔，將 JSON 文件視爲普通代碼或樹，進行查詢，固然，還能夠在本地保存文件。這是在任何設備上都不使用設置和文本編輯器編輯 JSON 文件的一個很好的選擇。

Codeply

Codeply: 市場上又一個快速編輯 Javascript 及其框架的工具。該產品最初於2014年發佈，2019年發佈了第二版。

可讓你編輯 angular、react、Vue、HTML 引導程序和純 Javascript。該公司背後的團隊表示，該產品適用於快速原型設計，建立模型，學習和探索新的流行庫、API、插件和框架。

標準功能集包括佈局設置、結果預覽、現成模板和社交網絡元素。與其餘工具相比，速度至關獨特。

Gitpod

Gitpod 旨在保持代碼始終處於測試狀態並保持最新狀態。它與 Github 緊密集成：每次更新代碼時，它都會運行測試。

該產品具備VScode接口，並支持全部主要的後端/前端語言和框架（如 Django、Rails、Revel 等）。

Plnkr

Plunker 是一個在線社區，用於建立，協做和共享 Web 開發想法。

Plunker 的核心功能是速度。儘管複雜，但 Plunker 編輯器的設計目的是在 2 秒內加載。

顯著特色:

• 實時代碼協做
• 全功能，可定製的語法編輯器
• 代碼更改的實時預覽
• As-you-type 代碼列表
• 分享、評論和分享 Plunks
• 在 MIT 許可下在 GitHub 上徹底開源

結論：

這些是最可行的在線代碼編輯器和在線運行的 IDE。在某些狀況下，使用在線 IDE/代碼編輯器是天然而然的，可是要當心——不要在在線代碼編輯器上啓動一個龐大的項目。

此總結中沒有包括徹底專一於面試或沒有足夠功能被稱爲完整產品的在線代碼編輯器。