前端日常开发中，我们使用喜爱的 IDE 调试 JavaScript 代码，比如我喜欢的代码编辑器有两个，Sublime Text 3 和 VS Code，前几年还使用过 Atom，偶尔我们会遇到临时需要快速分享给同事或者朋友一段代码的场景，那么在线的 JavaScript 运行环境的重要性就体现出来了。
为了解决这样的问题，业界涌现出了很多很优秀的在线编辑器。比如 JS Bin、JS Fiddle、Code Pen、Code Sandbox 等，接触前端这些年也陆陆续续发现了一些不错的其他选择，再看下浏览器收藏夹，已经有20余种。
下面我们使用20种工具执行一段经过尾递归优化过的阶乘函数
1、使用 iTerm2
在终端工具中安装 node 环境，使用 node 运行环境来执行 JS 代码是我们学习 node 时候必知必会的一件事！
2、使用 Sublime Text 3
在 Sublime Text 3 中，我们可以使用 build system 来创建构建命令，使用构建命令来快速执行 JS 代码
- 快捷键：CMD + B
配置文件
首先安装依赖 babel-cli
npm i -g babel-cli
新建 build system
{
"path": "/usr/local/bin", "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, "windows": {
"cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"] }, "osx": {
"cmd": ["killall node >/dev/null 2>&1; node $file"] }, "linux": {
"cmd": ["killall node >/dev/null 2>&1; node $file"] } } 
3、使用 VSCode
在 VSCode 中，我们可以建立一个 task 来运行 JS，实际上是借助内置终端来执行 node 命令运行JS！
快捷键：CMD + Shift + B
配置文件
/.vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId= // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ {
"label": "Run ES6", "type": "shell", "command": "node ${file}", "group": {
"kind": "build", "isDefault": true } } ] } 
4、使用浏览器控制台
5、使用 Firefox 代码草稿纸
在 Firefox 浏览器中，有一个特别好用的功能叫 代码草稿纸，你可以在这里面输入一些 JS 代码执行查看结果。
6、使用 Chrome Sources 面板
Chrome 提供了强大的 DevTools，其中 Sources 面板允许你建立一些 Snippets 方便执行 JS 代码
7、使用 JS Bin
8、使用 CodePen
9、使用 MDN 的 “JavaScript Demo”
10、使用 PLAYCODE
11、使用 Flems
Flems 提供了一个 Web 开发环境，可以分享一些前端小demo
https://flems.io/
12、使用 JSitor
13、使用 Code Sandbox
14、使用 Web Maker
15、使用 LeetCode Playground
16、使用 Repl.it
17、使用 RunKit + npm
18、使用 StackBlitz
https://stackblitz.com/
19、使用 Plunker Next
总结
其实对于我而言，如果想运行一段代码得到测试结果，最快的方式会选用浏览器控制台，因为浏览器就是最棒的工具。
如果想要写一个 demo 放在博客上，我会选择 jsfiddle、codepen、codesandbox，这里提供了写demo需要的一切。
如果想分享漂亮的代码片段，我会使用 Carbonize 生成一张图片，就像博文开头的那张图片。
使用在线编辑器的意义我觉得在于快捷、便于分享与协作，而最爱的其实还是VSCode。
没准儿你正在编写你的 playground，或者你有更好的工具，希望留言和大家一起分享!
感谢您的阅读，如果对您有帮助，欢迎关注”CRMEB”头条号。GitHub上有我们开源的商城项目，知识付费项目，均是基于PHP+vue开发，欢迎 Start、Fork,使用，关注我们保持联系！
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229625.html原文链接：https://javaforall.net
