色香蕉视频,免费手机av,日韩一欧美,2018天天日天天色,www.天天操.com,黄色小视频在线,日韩无码电影网站,综合欧美亚洲

技術(shù)編輯：芒果果丨發(fā)自思否編輯部

SegmentFault 思否報(bào)道丨公眾號(hào)：SegmentFault

什么是在線代碼編輯器？

在線代碼編輯器是駐留在遠(yuǎn)程服務(wù)器上的工具，可以通過(guò)瀏覽器訪問(wèn)。

一些在線代碼編輯器具有與文本編輯器更相似的基本特性，而另一些則像完整的集成開(kāi)發(fā)環(huán)境(Integrated Development environment，IDE)。在本文中，我們將介紹這兩種類型。

一些在線代碼編輯器專注于一種語(yǔ)言，甚至一個(gè)框架。例如，有些產(chǎn)品自稱 Javascript 在線代碼編輯器或 React 在線編輯器。

在線代碼編輯器的基本使用實(shí)例

許多方法可以使用在線代碼編輯器，但我們要強(qiáng)調(diào)幾個(gè)基本的方法，這些方法證明了對(duì)在線代碼編輯器的需求。

合作

使用桌面 IDE 設(shè)置協(xié)作過(guò)程可能很困難。有了在線代碼編輯器，這項(xiàng)任務(wù)就像在谷歌文檔中創(chuàng)建文檔一樣簡(jiǎn)單。

共享和開(kāi)發(fā)者關(guān)系

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

快速安裝新應(yīng)用程序

有一些在線代碼編輯器以與主機(jī)集成在一起，因此您可以開(kāi)發(fā)一個(gè)簡(jiǎn)單的應(yīng)用程序并在幾分鐘內(nèi)托管它來(lái)測(cè)試它。

在線面試和招聘

使用在線代碼編輯器，可以在一分鐘內(nèi)完成詢問(wèn)，這有助于了解候選人的解決方案和處理代碼。

原型設(shè)計(jì)

盡早并經(jīng)常測(cè)試你的想法。可以驗(yàn)證想法，并從用戶那里得到即時(shí)反饋。不需要設(shè)置。共享和協(xié)作選項(xiàng)也將為您提供幫助。

學(xué)習(xí)

在現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)中，跟隨最新的消息是值得的，更好的是，在真實(shí)的環(huán)境中嘗試它們。最好的在線代碼編輯器允許您快速地完成這項(xiàng)工作，而不需要不必要的設(shè)置。

如何選擇在線代碼編輯器

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

選擇在線 IDE/代碼編輯器時(shí)需要注意的一些方面:

應(yīng)用程序的運(yùn)行速度
免費(fèi)編輯：顯示多少?gòu)V告
與存儲(chǔ)庫(kù)管理器集成
易于設(shè)置
語(yǔ)言支持
NPM支持
終端支持
大量的文字和布局設(shè)置

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

在線代碼編輯器必須具備以下基本特征：

分享
布局設(shè)置
合作
制表設(shè)置
評(píng)論
結(jié)果視圖
基本文件結(jié)構(gòu)

在線代碼編輯器的優(yōu)點(diǎn)：

零安裝。你不需要下載，安裝和配置 IDE
共享與協(xié)作。開(kāi)始編碼，然后將 URL 轉(zhuǎn)發(fā)給你的同事，以便繼續(xù)你的工作或幫助你調(diào)試它
零成本或很少成本。絕大多數(shù)在線代碼編輯器都有免費(fèi)版本，足以滿足您的大多數(shù)日常任務(wù)
基于訂閱的定價(jià)。每月支付在線編輯器而不是每年支付許可證費(fèi)用可能非常有用。

在線代碼編輯器的缺點(diǎn)：

功能有限。有些代碼編輯器甚至忽略了被稱為代碼編輯器的基本特性。
性能問(wèn)題。許多基于 web 的 ide 和代碼編輯器都存在性能問(wèn)題。
沒(méi)有版本控制，絕大多數(shù)的在線代碼編輯器沒(méi)有任何 git 工具的集成。
沒(méi)有互聯(lián)網(wǎng)-沒(méi)有發(fā)展。必須在線工作才能使用線代碼編輯器。

審查過(guò)的代碼編輯器

Codesandbox

可以為每個(gè)流行的前端框架使用模板。React、Vue、Angular 和 Pop 像 Gatsby、Next 等一樣。

Codesandbox 將自己定位為一個(gè)開(kāi)發(fā)平臺(tái)。社區(qū)提供了很多模板。此外，您可以使用文件結(jié)構(gòu)和依賴關(guān)系為特定用例創(chuàng)建自己的模板，如 IDE 中所示。
該工具與 Github 集成，可以輕松創(chuàng)建提交和打開(kāi) PRs。開(kāi)箱即用，您可以將應(yīng)用程序部署到 ZEIT 或 Netlify。

對(duì)于前端，在線代碼編輯器中支持 NPM.此外，還有一個(gè)熱模塊重新加載。當(dāng)然，每個(gè)沙箱都有一個(gè)安全的 URL，并且支持 HTTPS，用于分享和反饋。

至于與代碼沙箱的寫(xiě)作，可以與同事在線工作，與他們聊天，并控制誰(shuí)可以進(jìn)行編輯或觀看代碼。

還有許多其他功能，比如：

測(cè)試視圖
內(nèi)置終端
自動(dòng)運(yùn)行Jest測(cè)試
熱模塊重新加載
項(xiàng)目組織
以 zip 形式導(dǎo)出代碼
內(nèi)置連接器(ESlint)

至于價(jià)格，Codesandbox Pro 版本的價(jià)格為 9 美元，其中包括私有 GitHub 存儲(chǔ)庫(kù)和無(wú)限個(gè)私有沙箱。

Playcode

Playcode 只是一個(gè)簡(jiǎn)單的工具，用于快速構(gòu)建原型和查看編碼結(jié)果。該工具具有典型的三窗口布局: 代碼編輯器、控制臺(tái)和結(jié)果視圖。該產(chǎn)品有一個(gè)基本的文件結(jié)構(gòu)，但沒(méi)有版本控制和其他 IDE 特性。

它只支持 Javascript，HTML 和 CSS。還有一個(gè)選項(xiàng)可以選擇編輯器樣式、字體大小和其他文本編輯功能。

Codepen

代碼編輯器可能是在線代碼編輯器市場(chǎng)上最流行的工具。這個(gè)平臺(tái)在某種程度上已經(jīng)開(kāi)始發(fā)展成為社交網(wǎng)絡(luò)，類似于 Pinterest。工程師可以在平臺(tái)上分享他們的最佳實(shí)踐和標(biāo)識(shí)，并獲得社區(qū)的認(rèn)可。

該工具內(nèi)部有完善的搜索功能。可以發(fā)現(xiàn)感興趣的模板、項(xiàng)目、代碼片段和主題。
Codepen 的最大特色是學(xué)習(xí)和發(fā)現(xiàn)新技術(shù)和最佳實(shí)踐。瀏覽、工作和使用 Pens 是了解它們是如何構(gòu)建和代碼如何工作的一個(gè)很好的方式。

另一個(gè)有趣的細(xì)節(jié)——代碼的演示模式。在會(huì)議、聚會(huì)和講臺(tái)上非常有用。

顯著特點(diǎn):

文件系統(tǒng)
自動(dòng)完成
私人沙箱
網(wǎng)站設(shè)置
協(xié)作模式

價(jià)格從每月8美元到26美元不等，還有免費(fèi)的限量版。

Stackblitz

Stackblitz 與完整的 IDE 非常相似，該工具是基于 VS 代碼構(gòu)建的。該產(chǎn)品具有廣泛的特性，可以啟動(dòng)并繼續(xù)開(kāi)發(fā)完整的全堆棧應(yīng)用程序。該工具由許多開(kāi)發(fā)人員所熟悉的 Visual Studio 提供支持。

它會(huì)自動(dòng)處理安裝依賴項(xiàng)、編譯、捆綁和熱重載。

導(dǎo)入庫(kù)對(duì)于 web 開(kāi)發(fā)至關(guān)重要，所以 StackBlitz 包含了一個(gè)內(nèi)置瀏覽器 npm 客戶端，它支持一次安裝多個(gè)軟件包和特定的版本。

該項(xiàng)目的殺手級(jí)功能是離線編輯。Stackblitz 開(kāi)發(fā)了一個(gè)瀏覽器內(nèi)的網(wǎng)絡(luò)服務(wù)器來(lái)實(shí)現(xiàn)這一點(diǎn)。通過(guò) Stackblitz，您可以在單獨(dú)的窗口中預(yù)覽和編輯，這與其他項(xiàng)目中的 iframe 或小窗口相比是非常棒的。

其他值得注意的特性包括與 Github 連接以導(dǎo)入/導(dǎo)出項(xiàng)目，與 Google Firebase 集成以創(chuàng)建全堆棧項(xiàng)目，以及像 ZIP 文件那樣下載項(xiàng)目。

Codeanywhere

Codeanywhere 偽裝為 Web 瀏覽器和移動(dòng)設(shè)備中的完整 IDE。

Codeanywhere 可以很容易地用 Javascript、 PHP、 HTML 和其他 72 種語(yǔ)言為您的項(xiàng)目建立自己的定制開(kāi)發(fā)環(huán)境。

顯而易見(jiàn)的主要特性是 Codeanywhere 可以連接任何東西，代碼可以駐留在 FTP 服務(wù)器或者其他 Github 源代碼上，但是你可以將它與 Codeanywhere 連接并開(kāi)始編輯和開(kāi)發(fā)。

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

代碼完成
Linting（js，CSS）
多個(gè)游標(biāo)
代碼美化

此外，您可以發(fā)揮布局和顏色的編輯器的修改。該工具有自己的內(nèi)置終端。您還可以與任何開(kāi)發(fā)人員共享整個(gè)項(xiàng)目、文件或文件夾。每個(gè)共享都可以有自己獨(dú)特的權(quán)限。

Codeanywhere 包含一個(gè)實(shí)用的差異特性，允許您查看修訂之間的差異，甚至允許您恢復(fù)到以前的代碼狀態(tài)。還有與 git 知識(shí)庫(kù)和工具的深度集成，這些工具可以簡(jiǎn)化開(kāi)發(fā)操作過(guò)程。這個(gè)產(chǎn)品適合那些想要移動(dòng)到云端并永遠(yuǎn)留在那里的開(kāi)發(fā)者。

JSfiddle

JSfiddle 是一個(gè)簡(jiǎn)單而又非常流行、快速和高效的在線代碼編輯器。該工具允許您快速共享代碼，并可視化查看結(jié)果，StackOverflow 與它集成在一起。
在視覺(jué)上，與大多數(shù)競(jìng)爭(zhēng)者一樣，該界面分為 4 個(gè)塊：一個(gè)用于編寫(xiě)代碼的塊、一個(gè)用于編輯 CSS、SCSS 或 sass 的代碼，一個(gè)用于 HTML 布局的塊以及一個(gè)具有可見(jiàn)工作結(jié)果的塊。

代碼編輯塊支持以下語(yǔ)言:

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

還可以在此塊中更改各種設(shè)置，如加載類型、框架類型和框架屬性。這個(gè)工具還有非常好和完整的文檔，以及一個(gè)開(kāi)發(fā)的社區(qū)，它可以投票決定哪些特性將首先被開(kāi)發(fā)接受。

使用 Vue、 Jquery、 React + JSX 和其他語(yǔ)言編寫(xiě)的一些流行樣板文件也促進(jìn)了開(kāi)發(fā)。至于缺點(diǎn)，JSfiddle 只用于前端工作。它不支持文件和文件夾的概念，也沒(méi)有辦法構(gòu)建 CI/CD 管道。

一般來(lái)說(shuō)，這是測(cè)試新框架最合乎邏輯和最酷的選擇之一，在新產(chǎn)品的文章和演示中演示代碼。

Htmlcodeeditor

此代碼編輯器只適用于編輯 HTML，完全免費(fèi)使用。值得注意的功能包括:

自動(dòng)完成
標(biāo)題中的基本標(biāo)記
標(biāo)簽向?qū)?/span>
查找和替換標(biāo)簽的特性
具有多種清潔功能
這個(gè)工具的缺點(diǎn)是有大量的廣告

Repl.it

Repl.it 是最強(qiáng)大的在線開(kāi)發(fā)工具之一。該產(chǎn)品支持多種語(yǔ)言和框架，包括現(xiàn)代流行的 Haskell、Kotlin 和著名的 Javascript、C ++、Ruby 等。

主頁(yè)開(kāi)始于語(yǔ)言搜索，然后提供選擇以下類別之一：Web 開(kāi)發(fā)，游戲開(kāi)發(fā)等。然后，您需要選擇語(yǔ)言并創(chuàng)建代表。

即使在免費(fèi)版本中，您也可以創(chuàng)建文件結(jié)構(gòu)、控制版本和安裝包。在設(shè)置中，您可以編輯布局、主題、字體大小和縮進(jìn)大小。共享選項(xiàng)包括嵌入鏈接、普通鏈接、與 dev.to 社區(qū)集成。還有一個(gè)叫做“對(duì)話”的社交媒體功能，開(kāi)發(fā)者可以在這里分享收到的反饋和代碼。還有一個(gè)很大的功能叫做教室，在這里你可以創(chuàng)建教室，邀請(qǐng)學(xué)生并追蹤進(jìn)度。

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

價(jià)格從免費(fèi)到每月 7 美元不等，包括私人代表，無(wú)限存儲(chǔ)空間和更快的速度。

Jsoneditoronline

Jsoneditoronline 是一個(gè)基于 web 的工具，用于查看、編輯和格式化 JSON。它在一個(gè)清晰的、可編輯的樹(shù)形視圖或代碼編輯器中并排顯示數(shù)據(jù)。您可以在本地或云中存儲(chǔ)文檔。

您還可以使用鏈接共享文檔，將 JSON 文件視為普通代碼或樹(shù)，進(jìn)行查詢，當(dāng)然，還可以在本地保存文件。這是在任何設(shè)備上都不使用設(shè)置和文本編輯器編輯 JSON 文件的一個(gè)很好的選擇。

Codeply

Codeply: 市場(chǎng)上又一個(gè)快速編輯 Javascript 及其框架的工具。該產(chǎn)品最初于2014年發(fā)布，2019年發(fā)布了第二版。

可以讓你編輯 angular、react、Vue、HTML 引導(dǎo)程序和純 Javascript。該公司背后的團(tuán)隊(duì)表示，該產(chǎn)品適用于快速原型設(shè)計(jì)，創(chuàng)建模型，學(xué)習(xí)和探索新的流行庫(kù)、API、插件和框架。

標(biāo)準(zhǔn)功能集包括布局設(shè)置、結(jié)果預(yù)覽、現(xiàn)成模板和社交網(wǎng)絡(luò)元素。與其他工具相比，速度相當(dāng)獨(dú)特。

Gitpod

Gitpod 旨在保持代碼始終處于測(cè)試狀態(tài)并保持最新?tīng)顟B(tài)。它與 Github 緊密集成：每次更新代碼時(shí)，它都會(huì)運(yùn)行測(cè)試。

該產(chǎn)品具有VScode接口，并支持所有主要的后端/前端語(yǔ)言和框架（如 Django、Rails、Revel 等）。

Plnkr

Plunker 是一個(gè)在線社區(qū)，用于創(chuàng)建，協(xié)作和共享 Web 開(kāi)發(fā)想法。

Plunker 的核心功能是速度。盡管復(fù)雜，但 Plunker 編輯器的設(shè)計(jì)目的是在 2 秒內(nèi)加載。