6个常用的前端代码编辑器

在线代码编辑器通常包括以下功能：

• 包含代码高这的HTML、CSS 和 JavaScript编辑器
• 代码命令自动完成
• 一个预览窗口，（通常）无手动刷新的重新加载
• HTML预处理器，例如HAML，Pug
• Less、Sass、Stylus 和类似的 CSS 预处理器
• 包括流行的JavaScript库，例如React，preact，Angular和Vue.js
• 开发人员控制台和代码验证工具
• 编码协作
• 通过短URL共享
• 在其他页面中嵌入演示
• 代码克隆和引用
• 复制到代码仓库，例如github
• 基本服务免费
• 每月少量费用的增值服务
• 一种向世界展示您的编码技巧的方法！

不需要打开一个本地的编辑器，也不需要启动一个服务，它们就允许您在浏览器端测试并保留代码段。

以下就是一些最为常用的前端代码编辑器。

1. codepen

Codepen并不是第一个，但它是最受欢迎，外观最佳的代码编辑器之一。该服务由 CSS-Tricks 的 Chris Coyier 共同创立，主要是特性是Pens（客户端演示）和 Projects（可用于构建 Web 项目的在线集成开发环境）。它提供了干净且功能强大的用户编辑界面，例如共享，嵌入式，错误控制台，外部JavaScript库，受欢迎的CSS预处理程序等。

Codepen Pro提供私有Pen，静态资源托管，协作模式以及自定义iframes主题的功能，每月8美元起。

2. JSFIDDLE

JSFiddle是最早的在线代码编辑器之一，并影响了后续其他的产品。它可用于 HTML、CSS 和 JavaScript的组合测试，并提供一系列库和框架。不同的是，它还可以模拟异步 Ajax 请求。

JSFiddle 专注于代码，因此您不会找到一系列社交功能，例如突出显示的演示和共享设施。该界面比其他界面更简单，并且通常您必须点击"运行"才能重新加载结果窗格。然而，它总是让人感觉很活泼，而且它的简单性可能比某些人更喜欢。

3. RunJS

RunJS是专注于国内用户的在线编辑器。除了稳定提供基本的Html/Css/JS编辑功能外，RunJS提供了特色的浏览器插件，能够在查看任意站点技术文章时，不切换屏幕就可以做【代码笔记】或者【文章笔记】（markdown功能）。

RunJS Pro帐户提供高级功能，比如文件管理、创建私有项目、自定义封面等等。

4. JS Bin

JS Bin由 JavaScript 大师Remy Sharp创建，至今仍由他管理。它专注于编码基础知识并很好地处理它们。与其他一些编辑器不同，您可以编辑整个HTML文件，包括。

除了通常的选项，库和预处理器外，JS bin是最早提供调试控制台的产品之一，这对于JavaScript开发至关重要。商业 Pro 帐户提供高级功能，例如资源上传、Private Bin、虚拟URL ，以及和 Dropbox 同步。如果您担心隐私或不希望其他人看到您的代码状态，您甚至可以在本地下载和安装JS bin ！

5. codesandbox

大多数代码编辑器只提供一个HTML文件，一个CSS文件和一个JavaScript文件（尽管可能还imports可以）。Codesandbox却更像一个在线版的开发环境。

像标准Web项目一样，您可以添加任意数量的文件，并使用多标签，类似于代码的集成开发环境（又称IDE）进行编辑。它可以免费使用GitHub或Google帐户注册，但是您可以实时与其他人合作，将项目导出到GIT存储库，并部署到NetLify和Vercel等静态站点主机。

如果您远程工作或使用非典型开发设备（例如Chromebook），则Codesandbox可能是一个实用的选择。

6.Playcode

PlayCode是另一个在线开发环境，可让您添加多个HTML，CSS，JavaScript和资源文件。该界面比CODESANDBOX更简单，但是它快速，看起来很棒，易于使用，对于初学者来说可能会降低使用门槛。

PlayCode具有日志控制台，并且与众不同，它使您可以控制预览窗口的大小和更新频率。编辑器是免费的，但是您必须与Google，Microsoft，Github或电子邮件帐户登录以保存项目。