在线代码编辑器

众归云 工具63阅读模式

为什么需要在线代码编辑器?

首先思考一下在什么情况下需要使用在线代码编辑器。

远程协作

使用桌面 IDE 设置协作过程可能存在不便,使用在线代码编辑器,可以让其任务变得简单,就像在 Google Docs 中创建文档一样。

代码分享

可以使用在线代码编辑器与同事、朋友或全世界分享代码,可以在博客文章、操作指南、文档中使用沙箱嵌入或链接。

快速部署

有一些在线代码编辑器集成了主流的主机功能,可以开发一个简单的应用程序,并在几分钟内部署它以进行测试。个人认为这是低代码平台集成在线代码编辑器的主要原因之一。

在线面试

使用在线代码编辑器,可以在招聘的过程中快速考察候选人的编码能力。大厂面试基本都使用这种方式考察候选者的编码能力。

原型制作

可以快速验证测试一些想法,并从用户那里获得即时反馈。

学习

现代 Web 开发中,值得关注最新消息,甚至更好的是,在真实条件下尝试它们。最好的在线代码编辑器可快速完成此操作,而无需进行不必要的设置。

如何选择在线代码编辑器?

大多数主流的在线代码编辑器功能都很丰富,包括自动完成编译、git 集成、插件支持、CI/CD 管道等,正是这些功能可以使特定编辑器比其他编辑器更适合。

下面是在选择在线 IDE 或者代码编辑器考虑的条件,但不局限一下条件:

  • 运行速度;
  • 是否免费
  • 与代码仓库的集成;
  • 易于设置;
  • 语言支持;
  • NPM 支持;
  • 终端支持;
  • 文本和布局设置

在线代码编辑器的核心功能

在线编辑器必须具备的基本功能:

  • 分享;
  • 布局设置;
  • 协作;
  • 制表设置;
  • 评论;
  • 结果视图;
  • 基本文件结构

在线代码编辑器的优缺点

优点

零设置:无需下载、安装和配置 IDE;共享和协作:开始编码,然后将 URL 转发给队友以继续项目开发的工作或协助调试;零或很少的成本:绝大多数在线代码编辑器都有免费版本,足以应付大部分日常任务;

缺点

功能有限:一些代码编辑器甚至缺少被称为代码编辑器的基本功能;性能问题:许多基于 Web 的 IDE 和代码编辑器都存在性能问题;没有版本控制:绝大多数在线代码编辑器没有与 git 工具集成;

推荐代码编辑器

1. Codepen

项目地址:https://codepen.io/

在线代码编辑器

Codepen 算是在线代码编辑器市场上最受欢迎的工具之一。该平台在某种程度上开始演变为社交网络,类似于 Pinterest。开发者可以在整个平台上分享他们的最佳实践和 Pin 图,并获得社区的批准。

该工具内部有一个完善的搜索,可以发现感兴趣的模板、项目、代码片段和主题,也是一个不错的代码学习平台。

Codepen 的最大的优势是学习和发现新技术及代码最佳实践,浏览、工作和使用 Pens 是了解它们如何构建以及代码如何工作的好方法。

另一个产品细节是代码的呈现模式,在会议、聚会和代码分享讨论中非常有用。

2. Stackblitz

项目地址:https://stackblitz.com/

在线代码编辑器

Stackblitz 与完整的 IDE 非常相似,特别是 VsCode,该工具是基于 VsCode 代码构建的,具有丰富的功能,可以开始和继续开发完整的全栈应用程序。该工具由 Visual Studio 提供支持。

它会在键入时自动安装依赖项、编译、捆绑和热重载。

导入库对于 Web 开发至关重要,因此 StackBlitz 包含一个浏览器内 npm 客户端,支持一次安装多个包和特定版本,是一个非常不错的功能。

Stackblitz 的杀手锏是离线编辑,Stackblitz 开发了一个浏览器内的网络服务器来实现这一目标。

使用 Stackblitz,可以在单独的窗口中进行预览和编辑,这与 iframe 或其他项目上的小窗口相比非常棒。还支持连接到 Github 并能方便的 导入/导出项目、与 Google Firebase 集成以创建全栈项目。

3. Playcode

项目地址:https://playcode.io/

在线代码编辑器

Playcode 只是一个用于快速原型设计和查看编码结果的简单工具。该工具具有经典的三窗口布局:代码编辑器、控制台和结果视图。该产品具有基本的文件结构,但没有版本控制和其他 IDE 功能。

它仅支持 JavaScriptHTMLCSS,还有一个选项可以选择编辑器样式、字体大小和其他文本编辑功能。

4. JSfiddle

项目地址:https://jsfiddle.net/

在线代码编辑器

JSfiddle 是一个简单但非常流行、快速、高效的在线代码编辑器,个人觉得和 Codepen 类似。该工具允许快速共享代码并将结果可视化预览。这个工具非常流行和简单,并集成了 StackOverflow。

从视觉上看,像大多数平台一样,如 Codepen,界面被分为 4 个区域:用于编写代码的区域、用于编辑 CSS、SCSS 或 sass 的区域,用于 HTML 布局的区域以及用于预览结果的区域。

JSfiddle 有非常好的和完整的文档,以及一个可以进行投票的开发社区。包含 Vue、Jquery、React + JSX 和其他语言的代码模板,可以让开发者快速上手。

和类似 IDE 的在线编辑器相比,JSfiddle 不支持文件和文件夹的概念,并且无法构建 CI/CD 管道,因此主要用于前端展示。

5. Jsoneditoronline

项目地址:https://jsoneditoronline.org/

在线代码编辑器

Jsoneditoronline 是一种基于 Web 的工具,用于查看、编辑和格式化 JSON 数据。能够清晰、可编辑的树视图或代码编辑器中格式化的显示 JSON 数据。可以将文档存储在本地或云端。

可以通过链接共享文档、以纯代码或树的形式查看 JSON 文件、进行查询,还可以将文件保存在本地。

6. Codesandbox

项目地址:https://codesandbox.io/

在线代码编辑器

包括主流前端框架的模板,如 ReactVueAngularNodeJsNext 等。

Codesandbox 定位为一个开发平台,社区制作了很多代码模板。此外,可以使用文件结构和依赖项为特定用例创建自己的模板,就像在使用 IDE 中一样。

该工具与 Github 集成,可以轻松创建提交和审查 PR。开箱即用,可以将应用程序部署到 ZEIT 或 Netlify。

Codesandbox 在线代码编辑器中提供了 NPM 支持,此外,还有一个热模块重新加载。当然,每个 sandbox 都有一个安全 URL,支持 HTTPS 共享和反馈。

在协作方面,可以与同事实时协作,就像远程控制一样控制谁可以编辑或观看代码。

此外还有其他的功能,例如:

  • 控制台;
  • 测试视图;
  • 内置终端;
  • Jest 测试的自动运行;
  • 热模块重载;
  • 项目组织;
  • 将代码导出为 zip;
  • 内置 linter (ESlint)

7. TinyMCE

项目地址:https://www.tiny.cloud/

在线代码编辑器

TinyMCE 是一款易用、且功能强大的所见即所得的富文本编辑器,同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala 等等。目前个人博客后台的编辑器就是集成了 TinyMCE。

8. StackEdit

项目地址:https://stackedit.io/

在线代码编辑器

StackEdit 是一个在线 Markdown 编辑器,可以同步文件与谷歌驱动器、Dropbox 和 GitHub,也可以将其作为博客发布到 Blogger、WordPress 和 Zendesk。

9. Editor.md

项目地址:https://pandao.github.io/editor.md/index.html

在线代码编辑器

Editor.md 是一个开源在线 Markdown 编辑器,支持 Markdown 转 HTML 的显示处理,打算将其集成到博客后台中。

总结

上面是个人觉得不错的在线编辑器,有些在项目中也使用了,欢迎推荐好用的 Markdown 编辑器。

本文来自网络,不代表王道测评立场,如有争议请发邮件:enofun@foxmail.com

AD:【本站QQ交流群】114135944

众归云
  • 本文来自网络,不代表王道测评立场,转载请注明出处
  • 转载请务必保留本文链接:http://www.20115.net/645.html