在线代码编辑器通常包含以下性能:
- 蕴含代码高这的 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 或电子邮件帐户登录以保留我的项目。