運行 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-…