面向 Web 開發人員的 7 個最佳基於瀏覽器的在線代碼編輯器

如果您是一名 Web 開發人員，您很可能在您的工作站上本地設置了一個開發環境。 您已經安裝了您最喜歡的代碼編輯器，添加了最好的包，加載了擴展，整個 IDE 完全按照您的需要運行。 但是，如果您不在普通機器上呢？ 如果您正在旅行或流離失所，甚至在沒有筆記本電腦的情況下在家工作怎麼辦？ 然後怎樣呢？ 那時知道什麼在線代碼編輯器可以真正節省一天的時間。 更重要的是，甚至可以放在你的後口袋裡，作為增強你正常編碼程序的一種方式。

訂閱我們的 YouTube 頻道

為什麼選擇在線代碼編輯器？

考慮使用在線代碼編輯器有幾個原因。 然而，事實是使用在線 IDE（很可能）不會取代您本地安裝的 IDE。 雖然許多在線環境非常強大並且能夠處理您交給它們的大部分工作，但它們並不像桌面安裝那樣強大和強大。 儘管如此，考慮使用一個的原因有很多。

• 您正在旅行，需要隨時隨地訪問您的代碼。
• 您需要共享代碼片段和交互式代碼段。
• 您的時間有限，您需要一個幾乎為零設置的解決方案。
• 您的預算有限。 在線代碼編輯器可能比您可以訪問的工作站擁有更多的功能。
• 您的團隊需要實時協作。 許多在線 IDE 都內置了協作工具，無需設置即可工作。

無論您為什麼想要或需要使用在線 IDE，都有很多可供您選擇，每種都有不同的優點和缺點，並為 Web 開發人員提供不同的功能。

1. 遊戲代碼

PlayCode 是一款不錯的多用途在線代碼編輯器。 使用它，您可以打開在單個項目中一起運行的多個文件，就像使用 Sublime Text 或 VS Code 在典型目錄結構中打開多個文件一樣。 PlayCode 為用戶提供了預製模板，以及瀏覽器中的實時結果和內置控制台調試。 用戶無需登錄即可編輯和工作以進行快速修復等，還可以登錄以保存工作並跨機器使用 PlayCode。

更多信息

2.JSFiddle

JSFiddle 是另一個頂級的在線代碼編輯器，可以像 PlayCode 一樣以多種方式工作。 JSFiddle 專為 JavaScript 編碼人員設計，不一定適用於整個項目，但正如編輯器頂部的信息欄本身所說，它最適合“文檔演示、Github 問題的錯誤報告、在堆棧溢出、實時代碼協作、代碼片段託管”或只是一個沙箱，供您玩弄代碼。

更多信息

3.代碼筆

CodePen很可能被認為是在線代碼編輯器的在線代碼編輯器。 它不僅為您提供了用於協作、實驗和共享的工具，而且您還可以獲得實時結果並能夠搜索他們的數據庫和其他作者提供的片段存儲庫，以便您也可以進行實驗並從他們的工作中學習. 這也是一個有趣的地方，可以看到一些人以新的和有趣的方式處理代碼。 此外，CodePen 片段會被 Google 編入索引，而且很多時候，當您在前往 Stack Overflow 之前尋找解決方案時，您最終會在這裡找到解決方案——有時在此之後，因為人們經常在那裡編寫和分享實時解決方案。

更多信息

4. StackBlitz

StackBlitz 是個好東西。 這款應用程序為開發人員提供的功能給我們留下了深刻的印象，因為它配備了大量工具，可讓您從一個運行開始就開始您的項目。 只需單擊一下。 如果您查看上圖，您會發現文件和依賴項甚至可共享的 URL 都是通過一個Start a New Workspace – React (JavaScript)按鈕生成的。 StackBlitz 能夠保存、共享甚至連接到您的 GitHub 帳戶，值得一看。 StackBlitz 不是代碼片段共享服務或編碼沙箱，而是適合喜歡在線代碼編輯器的人的可靠 IDE。

另外，我們不能不說，它是基於 VS Code 的。 因此，您基本上是在瀏覽器中運行最流行的 IDE 和代碼編輯器，並且每個項目都有自己的服務器空間。 您可以根據需要升級，但即使是免費版本也能正常運行（儘管加載速度稍慢，但這是免費計劃的預期）。 仔細閱讀它，我們認為您會同意，在所有在線代碼編輯器中，這值得花很長時間認真研究。

更多信息

5.AWS雲9

作為 Cloud9 的早期採用者，當時它是c9.io上的一個開源項目，我們強烈推薦該產品。 事實上，它提供了與上面的 StackBlitz 非常相似的體驗。 當亞馬遜收購 C9 時，他們將其連接到他們的雲，作為其 AWS 服務套件的一部分。 AWS Cloud9 絕對是一個可靠的、功能齊全的在線 IDE，他們網站上的信息簡介很好地分解了為什麼值得一看。

AWS Cloud9 是一個基於雲的集成開發環境 (IDE)，讓您只需一個瀏覽器即可編寫、運行和調試代碼。 它包括代碼編輯器、調試器和終端。 Cloud9 預裝了適用於流行編程語言（包括 JavaScript、Python、PHP 等）的基本工具，因此您無需安裝文件或配置開發機器即可啟動新項目。 由於您的 Cloud9 IDE 是基於雲的，因此您可以在辦公室、家中或任何地方使用連接互聯網的機器處理您的項目。 Cloud9 還為開發無服務器應用程序提供了無縫體驗，使您能夠輕鬆定義資源、調試以及在無服務器應用程序的本地和遠程執行之間切換。 使用 Cloud9，您可以快速與您的團隊共享您的開發環境，使您能夠實時配對編程和跟踪彼此的輸入。

更多信息

6.JSBin

如果您曾經見過或使用過 PasteBin，那麼 JSBin 會很熟悉。 JSBin在結構、風格和實用性上都相似，主要是一個共享代碼的站點。 我們認為最好在這裡註冊一個帳戶以保持登錄狀態。原因是，JSBin 會自動保存您正在使用的任何代碼的進度。 即使您只是想看看代碼片段的作用，您也不會丟失您的工作。 JSBin 是一個簡單的、嚴肅的編輯器。 如果這就是你所需要的，你真的不能變得更好了。

更多信息

7. WordPress 主題編輯器

關於在線代碼編輯器，WordPress 可能不是您想到的第一件事。 但這絕對是需要考慮的事情。 在 WordPress 4.9 中，WP Core 更新為包含 CodeMirror。 對代碼區域內所做的任何更改的語法突出顯示和錯誤警告現在是 WordPress 的基線。 其主要位置在外觀 – 主題編輯器區域內，但它也出現在任何小部件化區域（例如自定義 HTML小部件）或自定義 CSS選項卡中的主題定制器中。 雖然這絕對不是一個完整的 IDE，但我們絕對可以推薦 WP CodeMirror 編輯器作為一種檢查錯誤和更新代碼片段的方式，而無需處理 FTP 和各種文件管理系統。

更多信息

結束與在線代碼編輯器

大多數在線代碼編輯器不會取代您的本地開發環境。 那不是他們的工作。 大多。 然而，他們可以做的是提供一種可靠而簡單的方式來實時編輯代碼、共享片段、進行備份以及在安全可靠的位置試驗新功能。 在像 StackBlitz 這樣的完整 IDE、像 JSBin 這樣的片段共享服務，甚至像 WordPress CodeMirror 集成這樣的生活質量在線代碼編輯器之間，如果您從未玩過在線編輯，那麼現在是開始的最佳時機。

你最喜歡的在線代碼編輯器是什麼？

Fernandodiass/shutterstock.com 的文章特色圖片