目录
CodeSandbox
Codepen
JSFiddle
JS Bin
Stackblitz
码上掘金
Playcode
写在最后
免费的在线 IDE 对我们开发人员来说只是一种福利。
在我们购买 IDE 或安装市场上的免费 IDE 之前，让我告诉你，我们根据要使用的技术安装和配置编辑器。
我们对具有不同配置和技术的其他应用程序重复此步骤。我们花时间配置东西而不是实际编写应用程序。你不会立即看到差异。你需要保存并刷新浏览器——这是多么浪费时间。
现在情况仍然如此，但在执行任务或客户项目数月时这是正常的。现代在线编程方式对好奇的人来说是一个真正的推动力，他们渴望知识和发现新技术，而无需将精力和时间花在配置和安装等副业上。
我希望你会喜欢并巧妙地使用我给大家推荐的这六个好用又免费的在线代码编辑器！
准备好，出发吧！
CodeSandbox
CodeSandbox 是一个在线代码编辑器，主要用于创建 Web 应用项目，其提供了多种模块：
CodeSandbox 为前端开发提供了完整的代码编辑器体验和沙盒环境。其包含了很多实用功能：
Npm 支持：可以添加几乎任何 npm 上可用的包；支持 TypeScript、热更新、GitHub 导出、静态文件托管等；使用 Monaco 编辑器构建，Monaco 是为 VSCode 的提供支持的代码编辑器，有很多相似的体验；集成的 DevTools、linting、错误覆盖、测试框架 (Jest)等；强大的 CLI 可以直接将本地项目导入 CodeSandbox。
Codesandbox 是一个免费的在线编辑器，用于快速 Web 开发。 这个IDE太强大了。 你可以快速制作原型，尝试一些解决方案，并与客户分享你的建议。使用它在桌面或任何其他设备上创建以下内容：
静态网站 全栈网络应用 Angular 组件、React 组件、Vue 组件……等等。
总结：CodeSandbox 一个即时可用的，功能齐全的在线 IDE，可在具有浏览器的任何设备上进行Web 开发。使您能够快速启动新项目并快速创建原型。使用 CodeSandbox，您可以轻松创建 Web 应用程序，尝试代码，测试想法并共享创建的内容。
Codepen
CodePen 是一个在线的HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，可以利用它来构建和分享代码。CodePen 支持使用 Less、Sass、PostCSS 等来编写CSS。 CodePen 不仅是一个在线编辑器，还是一个庞大的前端社区，上面有来自全球开发者分享的各种各样炫酷的效果，并且这些代码都是开源和共享的。
CodePen 是一个面向前端设计人员和开发人员的社交开发环境。 构建和部署网站、展示你的工作、构建测试用例以进行学习并与他人分享。
用于：
创建名为“Pens”的代码片段 专注于 HTML、CSS 和 JavaScript 的代码和展示
总结：Codepen 是一个在线的前端开发环境。它的核心是允许您在浏览器中编写代码，并在构建时查看结果。对于任何技能的开发人员来说，这是一个有用的、解放性的在线代码编辑器，特别是对学习编码的人来说。CodePen 主要关注 HTML、CSS、JavaScript 等前端语言，以及转换成这些东西的预处理语法。
JSFiddle
JSFiddle 是一个在线代码编辑器，允许用户在单个页面上编辑和运行 HTML、JavaScript 和 CSS 代码。JSFiddle 使用 CodeMirror 构建，其提供了多游标、语法高亮、语法验证（linter）、大括号匹配、自动缩进、自动完成、代码/文本折叠、搜索和替换以协助开发人员的操作。JSFiddle 被广泛用于共享简单的测试和演示。
JsFiddle 非常受欢迎。 它也是在 StackOverflow 上展示解决方案最常用的 IDE。
用于：
快速展示和测试 HTML、CSS 和 JavaScript 代码。 获取 HTML、CSS 和 JS 代码片段。
总结：JSFiddle 是一个在线的 shell 编辑器，可在线编辑和测试 HTML、CSS、JavaScript 代码片段。在 JSFiddle 编辑的代码，可以保存，也可分享给其他人，还可嵌入到网站中。
JS Bin
JS Bin 是一个开源的协同 web 开发调试工具。主要用于帮助测试 JavaScript 和 CSS 的代码片段，功能与 jsFiddle 类似。可以实时分享在 JS Bin 中输入的内容，在任何平台上的任何设备上查看 JS Bin 的输出，都是实时更新的。
总结：JS Bin 是一个开放源代码的协作 Web 开发调试工具。你可以使用它来编写代码并使其既实时保存，又实时呈现完整预览，通过共享和编辑 URL 来帮助调试其他人的 JavaScript，HTML 或 CSS。
Stackblitz
Stackblitz 和 VSCode 非常像，使用简单可以一键创建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等项目：
Stackblitz 具有以下特性：
在浏览器中集成了一个 Dev Server，在离线的情况下仍然可以进行开发；除了支持前端项目外，还支持在浏览器中运行 Node.js 环境；支持连接 GIthub 仓库，可以直接将代码 push 到 Github 上，也可以拉取 Github 项目进行查看和编辑；所有应用程序都会自动部署在其服务器上。
Stackblitz 是一个免费的在线 IDE。 帮助你创建、编辑和部署全栈应用程序。 启动新应用程序和新工作区，用它来：
创建静态网站（HTML、CSS） 使用当今的技术（Angular、React、Vue 等）创建动态的全栈应用程序 与他人快速分享您的应用。 使用特定技术（例如 Typescript、Angular、React 工作区和其他技术）创建自定义工作区。
Stackblitz 与完整的 IDE 非常相似，该工具是基于 VS 代码构建的。该产品具有广泛的特性，可以启动并继续开发完整的全堆栈应用程序。该工具由许多开发人员所熟悉的 Visual Studio 提供支持。 它会自动处理安装依赖项、编译、捆绑和热重载。 导入库对于 web 开发至关重要，所以 StackBlitz 包含了一个内置浏览器 npm 客户端，它支持一次安装多个软件包和特定的版本。 该项目的杀手级功能是离线编辑。Stackblitz 开发了一个浏览器内的网络服务器来实现这一点。通过 Stackblitz，您可以在单独的窗口中预览和编辑，这与其他项目中的 iframe 或小窗口相比是非常棒的。 其他值得注意的特性包括与 Github 连接以导入/导出项目，与 Google Firebase 集成以创建全堆栈项目，以及像 ZIP 文件那样下载项目。
总结：StackBlitz 优秀的地方主要有以下几点：
1. 除支持前端项目开发外，还支持Node开发环境
借助 webAssembly 技术，StackBlitz支持在浏览器中运行node环境。意味着你可以启动node项目调试，可以安装NPM依赖包。这些在之前的在线编辑器中都是不能实现的。
2.自动连接GitHub
StackBlitz 支持连接GitHub仓库。你可以在新建项目之后，直接 push 提交到GitHub。也可以导入GitHub项目编辑开发。
3.项目自动初始化
一般我们本地新建项目之后，还需要安装NPM依赖包。StackBlitz 会在创建项目的时候自动安装相关依赖，节省开发时间。
4.支持离线开发
StackBlitz 按照PWA标准在本地浏览器中集成了一个Dev Server，在离线情况下依旧可以顺畅开发。
码上掘金
码上掘金是一个为广大开发者提供代码在线 Playground 的平台，具备轻量简单、易使用、现代标准、模块化、实时编辑，所见即所得等特性。内置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。
Playcode
这个免费的 IDE 更适合像我这样的前端爱好者。 你可以在线运行 JavaScript 或 TypeScript 代码，并在键入时查看结果。 很容易做一些前端实验并与他人分享。主要用于：
React、Angular、Vue 等技术。 构建一个完整的 Web 应用程序并将其发布到 PlayCode 的域里。
总结：Playcode 只是一个简单的工具，用于快速构建原型和查看编码结果。该工具具有典型的三窗口布局: 代码编辑器、控制台和结果视图。该产品有一个基本的文件结构，但没有版本控制和其他 IDE 特性。它只支持 Javascript，HTML 和 CSS。还有一个选项可以选择编辑器样式、字体大小和其他文本编辑功能。
写在最后
每个人都有自己的喜好，发现并选择一个让你成为更好的开发者的工具非常重要。
如果你觉得这些工具非常好用的话，请记得关注、收藏，以及与你身边的朋友一起分享它。
参考资料：
程序员主流代码编辑器，你用过多少款？面向 Web 开发人员的在线代码编辑器
参考链接
您阅读本篇文章共花了：
发表评论