推荐 10 个在线编辑器,你用过几个?

509 阅读2分钟

christopher-gower-m_HRfLhgABo-unsplash.jpg

代码编辑

CodeSandbox

CodeSandbox 是一个开源的在线代码编辑器,它为 Web 应用程序开发提供了一个完整的开发环境。它的目标是简化本地开发环境的设置过程,让开发者能够快速开始编写、测试和演示代码。

特点:实时预览、支持多种语言模版、快速添加外部资源、模板创建、优秀的外嵌体验、支持 oEmbed 功能。

image.png image.png

StackBlitz

StackBlitz 是一个面向 Web 开发者的一个即时、全栈的 Web IDE,极大地提高了开发效率和体验,它具有快速启动VS Code 编辑体验实时预览与热更新自动依赖管理分享与协作支持多种框架文件导入 等功能,极大地提高了开发效率和体验。

image.png

image.png

CodePen

CodePen 是一个流行的在线代码编辑器、社区和前端开发工具,它允许开发者编写 HTML、CSS 和 JavaScript 代码,并实时预览结果。

image.png

image.png

JSFiddle

JSFiddle 是一个流行的在线代码编辑器,用于快速编写和测试前端代码, 界面分为资源链接区代码编辑区结果展示区提供分享和代码格式化功能, 简单易用、方便分享、有助于快速原型开发和问题调试。

image.png

Plunker

Plunker 是一个在线社区和代码编辑器,用于创建、分享和探索代码片段,社区驱动、支持代码片段的创建和分享, 便于学习和交流、方便代码协作和重用。

image.png image.png

样式编辑器

SassMeister

简介:SassMeister 是一个在线 Sass/SCSS 编译器,提供实时预览功能,简化 Sass/SCSS 开发流程、即时反馈便于调试和学习。

image.png

CSS Grid Generator

简介:CSS Grid Generator 是一个在线工具,帮助快速生成 CSS Grid 布局,可视化布局配置、实时代码预览。

image.png

Flexbox Generator

Flexbox Generator 是一个在线工具,用于生成 Flexbox 布局的 CSS 代码,可视化 Flexbox 配置、生成相应 CSS 代码。

image.png

image.png

其他工具

Regex101

  • 简介:Regex101 是一个在线正则表达式测试工具,提供实时匹配结果和解释,支持多种语言,帮助学习和测试正则表达式、提高开发效率。
  • Regex101 入口

image.png

JSONLint

JSONLint 是一个在线 JSON 验证器,用于检查 JSON 数据格式的正确性,确保 JSON 数据有效性、简化调试过程。

image.png