① 主流的脚手架都支持,比如在线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/
③ 图示
vue压缩后的js可以反编译出来，反编译方法为：
1、在桌面找到自己下载的浏览器软件，点击浏览器图标。
2、在浏览器中随便找个网址登入。
3、在网页上右键鼠标，弹出右键菜单中选择“审查元素”选项（或按F12），弹出开发工具弹框，在弹框中选择“Sources”选项。如下图所示。
4、在左侧网络文件列表中随便找个js文件（如：mt_show_1.8.js文件），点击该文件并查看文件内容。发现文件一行展示证明被压缩过了。
5、找到该文件内容左下角的“{}”标签，找到后并点击该标签。
6、随后左侧会生成一个格式化后的文件（如：mt_show_1.8.js:formatted文件），查看js文件内容，内容展示成正常的格式了。现在就可以读懂里面的代码了。
安装的时候，把“Contact all update sites during install to find required software”这个勾去掉。
开发过程中的常用Eclipse插件，按字母排序：
(1) AmaterasUML
介绍：Eclipse的UML插件，支持UML活动图，class图，sequence图，usecase图等；支持与Java class/interface之间的相互导入导出。
官方网站：http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=AmaterasUML
插件下载URL：http://sourceforge.jp/projects/amateras/downloads/56447/AmaterasUML_1.3.4.zip/ （目前最新版本）
注：安装时需要GEF插件的支持。
(2) Bravo JSP
介绍：Bravo JSP编辑器是一款WYSIWYG（所见即所得的）JSP/html页面编辑器。Code Editor(代码编辑器)与Eclipse Web Tools的JSP编辑器相同，所以支持代码建议，代码模板和其它相同的功能。可视化部分：支持CSS样式、图片、JSP表达式/标签库/标签文件、外部included的文件。改变HTML/CSS/JSP代码可以立即看到效果。提供DOM查找/替换对话框。JSTL的变量查看功能。
官方网站：http://bravo.comxa.com/index.php
Eclipse在线安装URL：http://bravo.comxa.com/update
(3) Checkstyle
介绍：CheckStyle是Source.orge下的一个项目，提供了一个帮助JAVA开发人员遵守某些编码规范的工具。它能够自动化代码规范检查过程，从而使得开发人员从这项重要，但是枯燥的任务中解脱出来。CheckStyle检验的主要内容有：Javadoc注释、命名约定、标题、import语句、体积大小、空白、修饰符、块、代码问题、类设计以及混合检查（包括一些有用的比如非必须的System.out和printstackTrace）等。
官方网站：http://checkstyle.sourceforge.net/
Eclipse在线安装URL：http://eclipse-cs.sourceforge.net/update/
(4) Easy Explorer
介绍：如果你经常需要在Eclipse里打开相关资源文件所在的文件夹，比较麻烦，要右键，属性，在Location一栏中把所在的文件夹拷贝一下，然后再去资源管理器里输入这个路径，回车，然后打开它，比较麻烦。Easy Explorer是一个Eclipse的小插件，它能直接打开选中文件所在的目录，很方便好用.
官方网站：http://sourceforge.net/projects/easystruts/
(5) EasySQL
介绍：EasySQL:Eclipse SQL插件。包含SQL编辑器和执行器,表格编辑器，数据导出工具。EasySQL设计成易于与其它插件相集成。如果在你的项目中需要数据库
操作功能，可以考虑该插件。
官方网站：http://easysql.sourceforge.net/
插件下载URL：http://sourceforge.net/projects/easysql/files/latest/download?source=files
(6) EclEmma
介绍：提到 EclEmma 首先就要说到著名的 Java 覆盖测试工具 Emma。从某种程度上说，EclEmma 可以看作是 Emma 的一个图形界面。EclEmma的出现弥补了 Emma 用户一个大的遗憾 ---- 缺乏图形界面以及对集成开发环境的支持。将 Eclipse 和 Emma 这两个在各自领域最为优秀的工具结合起来，这就是 EclEmma 为我们提供的。
官方网站：http://www.eclemma.org/
Eclipse在线安装URL：http://update.eclemma.org/
(7) Eclipse SWT Designer Plugin
介绍：Eclipse SWT Designer Plugin是一个用于快速构建J2SE的桌面化GUI开发的Eclipse插件。
官方网站：http://sourceforge.net/projects/eclipsedesigner/
插件下载URL：http://sourceforge.net/projects/eclipsedesigner/files/latest/download
(8) FindBugs
介绍：Findbugs 是一个静态分析工具，它检查类或者 JAR 文件，将字节码与一组缺陷模式进行对比以发现可能的问题。了静态分析工具，就可以在不实际运行程序的情况对软件进行分析。它可以帮助改进代码的质量。它是寻找代码缺陷的，很多我们写的不好的地方，可以优化的地方，它都能检查出来。例如：未关闭的数据库连接，缺少必要的null check，多余的 null check，多余的if后置条件，相同的条件分支，重复的代码块，错误的使用了"=="，不同数据类型的比较，建议使用StringBuffer代替字符串连加等等。
官方网站：http://findbugs.sourceforge.net/
Eclipse在线安装URL：http://findbugs.cs.umd.edu/eclipse
(9) FreeMarker IDE
介绍：FreeMarker IDE是一个FreeMarker(模板引擎)感知编辑器，支持：语法高亮显示(Syntax Hilighting)、内容辅助(Content Assist)、大纲视图(Outline View)。其主页上提供了如何使用该插件进行开发的Flash视频。FreeMarker还有另外一个插件FreeMarker Eclipse Plugin。
官方网站：http://freemarker-ide.sourceforge.net/
插件下载URL：http://sourceforge.net/projects/freemarker-ide/files/
(10) Spket
介绍：Spket IDE是功能强大的JavaScript 和XML开发工具包。这个强大的编辑器可以进行JavaScript、XUL/XBL以及Yahoo! Widget开发。其中JavaScript编辑器具有代码完成（code completion）、语法标记以及内容概览等功能，协助开发人员创建高效的JavaScript代码。
官方网站：http://www.spket.com
Eclipse在线安装URL：http://www.agpad.com/update
(11) JadClipse
介绍：JadClipse是一个Eclipse插件,无缝地集成了Jad(快速Java反编译器)与Eclipse。通常,当打开一个类文件，类文件查看器将显示一个简短的API类的轮廓。如果你安装这个插件,JadClipse类文件查看器将替换类文件查看器并显示了类的反编译源代码。这个任务可以通过在后台使用Jad反编译相应的类文件来完成。可以支持正常的Java语法高亮以及大纲视图。
官方网站：http://sourceforge.net/projects/jadclipse/
Eclipse在线安装URL：http://feeling.sourceforge.net/update
(12) Javascript Debug Toolkit
介绍：JSDT(Javascript Debug Toolkit)是一个用于javascript调试的Eclipse 插件，用于调试javascript。JSDT可以跨浏览器调试，支持在IE,Firefox,Safari,Chrome等主流浏览器中调试javascript。JSDT支持设置断点，单步调试等调试工具的基本特性。
官方网站：http://code.google.com/p/jsdt/
Eclipse在线安装URL：http://jsdt.googlecode.com/svn/trunk/org.ayound.js.debug.update
(13) Mybatis Editor
介绍：MyBatis Editor是一个Eclipse的插件，用来编辑MyBatis的配置文件。
官方网站：http://code.google.com/a/eclipselabs.org/p/mybatiseditor/
Eclipse在线安装URL：http://mybatiseditor.eclipselabs.org.codespot.com/git/org.eclipselabs.mybatiseditor.updatesite
(14) MAT
介绍：Eclipse Memory Analyzer（MAT）是著名的跨平台集成开发环境 Eclipse Galileo 版本的 33 个组成项目中之一，它是一个功能丰富的JAVA 堆转储文件分析工具，可以帮助你发现内存漏洞和减少内存消耗。对于大型 JAVA 应用程序来说，再精细的测试也难以堵住所有的漏洞，即便我们在测试阶段进行了大量卓有成效的工作，很多问题还是会在生产环境下暴露出来，并且很难在测试环境中进行重现。JVM 能够记录下问题发生时系统的部分运行状态，并将其存储在堆转储 (Heap Dump) 文件中，从而为我们分析和诊断问题提供了重要的依据。
官方网站：http://www.eclipse.org/mat/
Eclipse在线安装URL：http://download.eclipse.org/mat/1.2/update-site/
(15) m2eclipse
介绍：这是一个在Eclipse环境中集成的Maven插件。
官方网站：http://www.sonatype.org/m2eclipse/
Eclipse在线安装URL： http://m2eclipse.sonatype.org/sites/m2e
(16) PatternBox
介绍：PatternBox是一个Java设计模式编辑器。它提供一个基于模板的代码生成器。这个基于XML的模板机制使得你能够定义自己的代码模板。PatternBox当前能够为16种GoF设计模式生成代码。
官方网站：http://www.patternbox.com/
参考资料
CSDN：http://bbs.csdn.net/topics/391841460
