① 主流的脚手架都支持,比如在线create-react-app,vue-cli等(在线 fork 修改),支持 github 登录(项目导入),也支持 cli 上传例子,例子可以在线访问和下载,当然也支持内嵌到其他博客等网页中。
② 地址:https://codesandbox.io/
③ 图示
2. CodePen(前端代码编辑运行的网站)
① CodePen 是一个完全免费的前端代码托管服务,主要功能有:
② 地址:https://codepen.io/
③ 图示
3. JSRUN(支持手机端的在线JS编辑器)
① jsrun是一款支持手机端的在线JS编辑器, HTML/CSS/Javascript在线代码运行工具,js代码在线测试调试,是runjs的升级版支持vue.js/angular.js的在线编辑器
② 地址:http://jsrun.net/
③ 图示
4. jsFiddle(前端代码编辑运行的网站)
① jsFiddle 是一个Web开发人员的练习场,可在线编辑和测试 HTML、CSS、JavaScript代码片段。在 jsFiddle 编辑的代码,可以保存,也可分享给其他人,还可嵌入到其他网页
② 地址:https://jsfiddle.net/
③ 图示
5. Ideone(C和C++的在线编译和调试工具,支持其他的60种语言) 我常用
① Ideone是C和C++的在线编译和调试工具,支持其他的60种语言。这个工具提供许多强大的功能,允许程序员快速高效的编译源代码
② 地址:https://www.ideone.com/
③ 图示
6. Codechef(C,C ++和Java的在线编译工具)
① 它支持C,C ++和Java,非常接近真正的桌面IDE。这是超快速和易于使用。适合于课堂和作业的学生,练习面试问题。
② 地址:https://www.codechef.com/ide
③ 图示
7. JDoodle (C,C ++和Java的在线IDE)
① 支持协作代码。它只是从一个简单的文本区域开始,您可以粘贴代码,然后单击运行。您可以更改命令行参数并在运行该程序之前设置stdin。最适合新的在线编辑器不支持的许多旧语言。
② 地址:https://www.codechef.com/ide
③ 图示
8. OnlineGDB (在线C,C ++,Java,PHP编译器) 我常用
① 它支持C,C ++,PHP和Java编译器。OnlineGDB的独特功能是,您可以逐步调试您的代码。一旦代码被写入,它可以很容易地格式化,使其看起来不错。
② 地址:https://www.onlinegdb.com/
③ 图示
9. GCC资源管理器
① GCC编译器资源管理器是一个交互式在线编译器,它显示编译后的C++、RISE、GO(以及更多)代码的汇编输出。
② 地址:https://gcc.godbolt.org/
③ 图示
10. plnkr edit在线编辑器
① js的在线编辑器。
② 地址:http://plnkr.co/edit/
③ 图示
Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编颤兆清写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块,你可以将Monaco Editor用到自己的项目中,作为云端编辑器的支持,支持IE 11,Edge,Chrome,Firefox,Safari和Opera!
Github:
文档和示例等:
安装没什么好说的,你可以到上面地址中下载,也可以直接使用npm安装
TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML
XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C……
内联代码差异比较
非内联代码差异比较
上面都是原生Visual Studio亮色主题
Visual Studio Dark主题:
高对比度暗色主题:
想要直接开发可能不是一件非常简单的事情,所茄前以给出官网提供的所有示例,建议感兴趣的同学可以直接下载下来查看相关示例代码
1、在终端执行以下四条命令,前提是你已存在git和node的环境,如果不存在则先安装git或者node
2、然后访问http://localhost:8888即可体验
选择你想体验的示例,有一些可能还需要其他的 *** 作,按照提示来即可
3、项目示例Demo介绍
其他示例和用法
想要深入学习的小伙伴可以直接到官网上手学习,左边是配置,右边即可看到效果,这样的话学习起来会比较的快
以下版本可能无法跟进最新的版本
React版本:
Vue版本:
Angular版本:
Monaco Editor不得的不说是一个非常强大的在线代码编辑器,可以为自己的项目提供云端代码编辑器的基础技术支持,可以在其基础上扩展很多强大的功能,当然上手不一定简单,需要根据自己的需求确猜培定开发方案,有需求的小伙伴可以去研究一下!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)