网络日志

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文件,包括<head>

除了通常的选项,库和预处理器外,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或电子邮件帐户登录以保存项目。