5 个好用且免费的在线代码编辑器

àì夳堔傛蜴生んèń 2022-09-06 14:28 315阅读 0赞

![0610268290ad83045bc3465fdef5c180.png][]

英文 | https://javascript.plainenglish.io/5-best-free-ides-on-the-internet-b5602d41bf68

翻译 | 杨小二

免费的在线 IDE 对我们开发人员来说只是一种福利。

在我们购买 IDE 或安装市场上的免费 IDE 之前，让我告诉你，我们根据要使用的技术安装和配置编辑器。

我们对具有不同配置和技术的其他应用程序重复此步骤。我们花时间配置东西而不是实际编写应用程序。你不会立即看到差异。你需要保存并刷新浏览器——这是多么浪费时间。

现在情况仍然如此，但在执行任务或客户项目数月时这是正常的。现代在线编程方式对好奇的人来说是一个真正的推动力，他们渴望知识和发现新技术，而无需将精力和时间花在配置和安装等副业上。

我希望你会喜欢并巧妙地使用这 5 个好用且免费在线 IDE。

准备好，出发吧！

**1、Codepen.io**

地址：https://codepen.io/

![8a81cf8bbefe6d515f6672538b78e8e1.png][]

CodePen 是一个面向前端设计人员和开发人员的社交开发环境。 构建和部署网站、展示你的工作、构建测试用例以进行学习并与他人分享。

用于：

*  创建名为“Pens”的代码片段
 *  专注于 HTML、CSS 和 JavaScript 的代码和展示

**2、Jsfiddle.net**

地址：https://jsfiddle.net/

![32608c5251ca6d2063f1c544c0ba7022.png][]

JsFiddle 非常受欢迎。 它也是在 StackOverflow 上展示解决方案最常用的 IDE。

用于：

*  快速展示和测试 HTML、CSS 和 JavaScript 代码。
 *  获取 HTML、CSS 和 JS 代码片段。

**3、Codesandbox.io**

地址：https://codesandbox.io/

![f55c9f8d9bf1d5d5a1bfd3a950ba9d5f.png][]

Codesandbox 是一个免费的在线编辑器，用于快速 Web 开发。 这个IDE太强大了。 你可以快速制作原型，尝试一些解决方案，并与客户分享你的建议。

使用它在桌面或任何其他设备上创建以下内容：

*  静态网站
 *  全栈网络应用
 *  Angular 组件、React 组件、Vue 组件……等等。

**4、 Stackblitz.com**

地址：https://stackblitz.com/

![4cc98b753c1027c77294999cafda43f2.png][]

Stackblitz 是一个免费的在线 IDE。 帮助你创建、编辑和部署全栈应用程序。 启动新应用程序和新工作区。

用它来：

*  创建静态网站（HTML、CSS）
 *  使用当今的技术（Angular、React、Vue 等）创建动态的全栈应用程序
 *  与他人快速分享您的应用。
 *  使用特定技术（例如 Typescript、Angular、React 工作区和其他技术）创建自定义工作区。

**5、Playcode.io**

地址：https://playcode.io/

![4140f115f81fb73e5427d4b091a140ea.png][]

这个免费的 IDE 更适合像我这样的前端爱好者。 你可以在线运行 JavaScript 或 TypeScript 代码，并在键入时查看结果。 很容易做一些前端实验并与他人分享。

用于：

*  React、Angular、Vue 等技术。
 *  构建一个完整的 Web 应用程序并将其发布到 PlayCode 的域里。

**结论**

每个人都有自己的喜好，发现并选择一个让你成为更好的开发者的工具非常重要。 我希望这些对你有用。

如果你觉得我今天的内容非常棒的话，请记得给我点个赞，以及与你身边的朋友一起分享它。

感谢你的阅读。

#  #

**学习更多技能**

**请点击下方公众号**

![44b60b91949595fdf71977062e9910a2.gif][]

![b4dd40a8a78b5ee5611584d4d0fe6031.png][]

![85905e4a3e784bdb0faaa4cc2dd3c1ad.png][]

[0610268290ad83045bc3465fdef5c180.png]: /images/20220829/44b874876d6847b498e4d661e60ccf4f.png
[8a81cf8bbefe6d515f6672538b78e8e1.png]: /images/20220829/51afadef18134d5f8bfe0f0d8117fccc.png
[32608c5251ca6d2063f1c544c0ba7022.png]: /images/20220829/1d5dbdcc6d0e4479af2fa8139654caa0.png
[f55c9f8d9bf1d5d5a1bfd3a950ba9d5f.png]: /images/20220829/ba38227ede0944f29f980e673ff6398d.png
[4cc98b753c1027c77294999cafda43f2.png]: /images/20220829/d083a07a797742c39bf5b6b1d4d9bf18.png
[4140f115f81fb73e5427d4b091a140ea.png]: /images/20220829/6b2938d0a3134f93826d4ee6803cfdf0.png
[44b60b91949595fdf71977062e9910a2.gif]: /images/20220829/4c3b1508fb264061aea2feee57f54749.png
[b4dd40a8a78b5ee5611584d4d0fe6031.png]: /images/20220829/6cb1402b8fd442f4bf7943c61d938298.png
[85905e4a3e784bdb0faaa4cc2dd3c1ad.png]: /images/20220829/0cf31b276f574565831b2153b44c756e.png