小蘿蔔丁
November 12, 2019

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

#JavaScript

前端日常开发中，我们使用喜爱的 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
1

新建 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"]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 效果图

# 3、使用 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
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 效果图

# 4、使用浏览器控制台

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

# 5、使用 Firefox 代码草稿纸

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

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

# 6、使用 Chrome Sources 面板

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

快捷键：CMD + Enter 执行代码

# 7、使用 JS Bin

JS Bin 是一个开源的用于 debug web 应用的工具，工具面板具有 Console，可以用于执行 JS 代码

# 8、使用 JS Fiddle

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

因为 JS Fiddle 工具本身并没有提供 console 面板，所以可以配合浏览器开发者工具来打印输出 JS 代码结果

# 9、使用 CodePen

CodePen 是一个非常棒的在线代码编辑器，几乎可以编写所有的前端Web应用。在这里使用它来执行一段 JS 代码真的是大才小用了。

# 10、使用 MDN 的 “JavaScript Demo”

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

# 11、使用 PLAYCODE

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

# 12、使用 Flems

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

# 13、使用 JSitor

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

# 14、使用 Code Sandbox

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

# 15、使用 Web Maker

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

# 16、使用 LeetCode Playground

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

# 17、使用 Repl.it

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

# 18、使用 RunKit + npm

RunKit + npm 在 npm 上我们能发现很多优秀的库，npm 提供了一个功能，可以使用 RunKit取运行测试你的 package，当然也能测试一段代码

# 19、使用 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.

# 云开发环境

# 👀 工具对比

运行工具 推荐星级 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，或者你有更好的工具，希望留言和大家一起分享。