运行 JavaScript 代码片断的 20 种工具

前端平常开发中，咱们使用喜好的 IDE 调试 JavaScript 代码，好比我喜欢的代码编辑器有两个，Sublime Text 3 和 VS Code，前几年还使用过 Atom，偶尔咱们会遇到临时须要快速分享给同事或者朋友一段代码的场景，那么在线的 JavaScript 运行环境的重要性就体现出来了。

为了解决这样的问题，业界涌现出了不少很优秀的在线编辑器。好比 JS Bin、JS Fiddle、Code Pen、Code Sandbox 等，接触前端这些年也陆陆续续发现了一些不错的其余选择，再看下浏览器收藏夹，已经有20余种。

下面咱们使用20种工具执行一段通过尾递归优化过的阶乘函数

一、使用 iTerm2

在终端工具中安装 node 环境，使用 node 运行环境来执行 JS 代码是咱们学习 node 时候必知必会的一件事

二、使用 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"]
    }
}
复制代码

效果图

三、使用 VSCode

在 VSCode 中，咱们能够创建一个 task 来运行 JS，其实是借助内置终端来执行 node 命令运行JS

快捷键：CMD + Shift + B

配置文件

/.vscode/tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // 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
      }
    }
  ]
}
复制代码

效果图

四、使用浏览器控制台

咱们常用浏览器的 Console 功能来调试 JS 代码，好比 Chrome 的 DevTools，火狐的 Web 控制台，这些咱们已经不陌生了

五、使用 Firefox 代码草稿纸

在 Firefox 浏览器中，有一个特别好用的功能叫 代码草稿纸，你能够在这里面输入一些 JS 代码执行查看结果

快捷键：在火狐浏览器下 Shift + F4

六、使用 Chrome Sources 面板

Chrome 提供了强大的 DevTools，其中 Sources 面板容许你创建一些 Snippets 方便执行 JS 代码

快捷键：CMD + Enter 执行代码

七、使用 JS Bin

JS Bin 是一个开源的用于 debug web 应用的工具，工具面板具备 Console，能够用于执行 JS 代码

八、使用 JS Fiddle

JS Fiddle 是一个前端同窗常常写 demo 例子的好地方，这里能够以 CDN 的方式使用一些第三方类库，很方便搭建页面demo。

由于 JS Fiddle 工具自己并无提供 console 面板，因此能够配合浏览器开发者工具来打印输出 JS 代码结果

九、使用 CodePen

CodePen 是一个很是棒的在线代码编辑器，几乎能够编写全部的前端Web应用。在这里使用它来执行一段 JS 代码真的是大才小用了。

十、使用 MDN 的 “JavaScript Demo”

常常查阅 MDN 的小伙伴必定能记得，在一些 JavaScript 文档中会有一个 JavaScript Demo小工具，好比说 JavaScript 标准内置对象 Function，在这里能够执行一些 JS 代码

十一、使用 PLAYCODE

PLAYCODE 提供了在线快速运行 Web 程序的环境

十二、使用 Flems

Flems 提供了一个 Web 开发环境，能够分享一些前端小demo

1三、使用 JSitor

JSitor 是一个不错的在线执行 JS 代码工具，我比较喜欢它的代码截图功能，能生存很漂亮的代码截图图片，不过目前功能还不是特别完善，好比代码的高亮暂时是个问题。

1四、使用 Code Sandbox

Code Sandbox 是一个在线的能够建立Web应用，特色是可使用一些类库模版，好比 React/Vue/Angular 是创做原型的好地方，我常用它来编写一些 Vue 小 Demo

1五、使用 Web Maker

Web Maker 是一个能够快速在浏览器建立离线Web应用，Web Maker 还提供了 Chrome 插件，能够离线使用

1六、使用 LeetCode Playground

LeetCode 提供了优秀的 Playground 工具，支持各类语言版本切换，其中也支持 JavaScript，还能没事儿刷刷题不是

1七、使用 Repl.it

Repl.it 是一个一站式可在线构建、协做的IDE，同时也提供了 Node 运行环境，还能够链接 github 使用 gist 同步代码片断

1八、使用 RunKit + npm

RunKit + npm 在 npm 上咱们能发现不少优秀的库，npm 提供了一个功能，可使用 RunKit取运行测试你的 package，固然也能测试一段代码

1九、使用 StackBlitz

StackBlitz 有在线 VSCode 之称，编辑器使用的是微软开源的 Monaco Editor，和 Code Sandbox 相似，提供了一些类库模版，可是目前尚未 Vue 的

20、使用 Plunker Next

Plunker Next 新版的 Plunker 提供了在线建立小 demo 的能力，同时也便于分享

其余

好用的工具层出不穷，其实还有一些其余的工具或者解决方案能够做为选择，好比下面四个不一样的类型，我每一个挑选了一个表明工具

在线编程

• scrimba - The interactive screencasting platform

本地应用

• RunJS - A scratchpad for your thoughts, a playground for your creativity...

编辑器插件

• Quokka.js - Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

云开发环境

• Visual Studio Online - Cloud-powered dev environments accessible from anywhere

👀 工具对比

运行工具	推荐星级	Console 面板	离线可用
JS Bin	⭐️⭐️⭐️⭐️	有	否
JS Fiddle	⭐️⭐️⭐️⭐️⭐️	无	否
CodePen	⭐️⭐️⭐️⭐️⭐️	有	否
PLAYCODE	⭐️⭐️⭐️	有	否
Flems	⭐️⭐️⭐️	有	否
JSitor	⭐️⭐️	有	否
Code Sandbox	⭐️⭐️⭐️⭐️⭐️️️️️	有	否
Web Marker	⭐️⭐️⭐️⭐️	有	是
LeetCode	⭐️⭐️⭐️⭐️⭐️	有	否
Repl.it	⭐️⭐️⭐️	有	否
RunKit + npm	⭐️⭐️⭐️⭐️	有	否
StackBlitz	⭐️⭐️⭐️	有	否
Plunker Next	⭐️⭐️⭐️⭐️ ️️	有	否

总结

其实对于我而言

• 若是想运行一段代码获得测试结果，最快的方式会选用浏览器控制台，由于浏览器就是最棒的工具
• 若是想要写一个 demo 放在博客上，我会选择 jsfiddle、codepen、codesandbox，这里提供了写demo须要的一切
• 若是想分享漂亮的代码片断，我会使用 Carbonize 生成一张图片，就像博文开头的那张图片

使用在线编辑器的意义我以为在于快捷、便于分享与协做，而最爱的其实仍是VSCode。

没准儿你正在编写你的 playground，或者你有更好的工具，但愿留言和你们一块儿分享

原文：xlbd.me/20-kind-of-…