简单的 JavaScript IDE答案

【问题标题】：Simple JavaScript IDE简单的 JavaScript IDE
【发布时间】：2013-06-12 12:37:12
【问题描述】：

我是 JavaScript 的新手，我想使用基于 Windows 的简单 IDE 练习我的技能。在学习时我不想使用任何 CSS 或 HTML。如果可能的话，我希望有颜色单步、突出显示和语法检查。

例如，您可以输入您的函数，调用它并接收结果

function squareNumber(x) {
  return x*x;
}

squareNumber(5)

25

我想要比 Internet Explorer 控制台更好的东西。

【问题讨论】：

您是在寻找 IDE 还是尝试构建一个？
Visual Studio 是对 JavaScript 具有可接受支持的 IDE 之一……但我不会过多关注 IDE。如果您只想学习 JavaScript 而不是 HTML/DOM，请使用一个好的编辑器并使用 node.js。
您想学习 JavaScript 的哪个方面？你的目标是什么？毕竟 JS 是作为 HTML 的伴侣而开发的……这就是历史。您的方法有点像通过编写桌面应用程序来学习 PHP。
iOS 开发让我感到沮丧的部分原因是，javascript 根本没有传统的 IDE，因为您点击“运行”来执行文件并输出输出（或错误）。它通常是文本编辑器 + linter + Chrome 开发者工具的混搭，UX 方面并不好。

标签： javascript ide

【解决方案1】：

目前有很多优秀的在线 IDE。我最喜欢的一个是JSFiddle，但你说你不想使用 CSS 和 HTML，所以在这种情况下它是多余的。您可以使用JSBin，仅打开 Javascript 和控制台面板。在我看来，另一个非常好的是Ideone，它有很多语言（对于JS，你必须选择Javascript Spidermonkey）。我建议你的最后一个是JSConsole，来自 JSBin 的创建者，它基本上是一个增强的 Javascript 控制台（如名称所述）。

【讨论】：

【解决方案2】：

看看，

WebStorm：真正的 JavaScript IDE（可能是最好的。）
Sublime Text 2：带有语法高亮的文本编辑器，并且可以安装插件。

您可以使用任一软件以及node.js 来获得您想要的。

执行文件，

function squareNumber(x) {
    return x * x;
}

console.log(squareNumber(5));

用 node.js 会输出，

【讨论】：

【解决方案3】：

最终使用了这个 IDE，因为我可以在低功耗笔记本电脑上运行它。免费版

http://brackets.io/

Microsoft 还提供免费的 Visual Studio 2015 产品，称为“Visual Studio Code”，也可以在 Mac 和 linux 上运行。只用了一天，但在我的低功耗平板电脑上效果很好。

https://code.visualstudio.com/

【讨论】：

【解决方案4】：

除了上述答案中列出的选项；这些是我需要在没有 HTML/CSS 的情况下编写/测试 JS 时使用的附加选项：

1) Firefox 开发者版 - ScratchPad

Firefox 开发者版浏览器提供了一个很好的控制台，其中包含编写 JavaScript 所需的所有功能。

引用一个特定的功能 - ScratchPad 为您提供了编写 JS 代码的好选择，您可以使用运行按钮在控制台上查看它。

正如您在下面看到的，它具有语法着色，甚至可以直接从您的计算机保存和打开文件。

您可以使用快捷键 - SHIFT+F4

将 Firefox ScratchPad 作为独立窗口打开

它具有代码完成、内联文档等功能，您可以从此处的官方文档中了解更多关于使用它的信息 - https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

键盘快捷键

CTRL + L - 显示选定的代码

CTRL + SPACE - 代码提示

CTRL + R - 运行命令

CTRL + I - 检查命令

2) 节点 CMD 或 CMD + 节点

我也喜欢使用 node + CMD，因为它们可以无缝工作。对于此选项，您需要安装 node.js 并使用 CMD 编写和测试您的 JS 代码。

您也可以考虑使用与 windows CMD 类似的 node.js CMD。

您可以通过单击顶部栏并选择属性来更改Node CMD的背景颜色和文本颜色

在使用 node 时，对于 Node 上的语法着色，您可以添加语法着色 npm 包之一，如下所示：

我通过这四个步骤安装了 cli-color npm 包：

1) 检查是否使用nmp -v 安装了npm

2) 使用npm install <name of package>安装您喜欢的软件包

3) 包含包

4)测试包并查看结果

注意：请务必查看每个包的文档，尤其是有关用法的文档，因为可能存在差异。

这是我最喜欢的两个 Node.js 语法高亮包：

https://www.npmjs.com/package/cli-color 和 https://www.npmjs.com/package/cli-highlight

【讨论】：

【解决方案5】：

我在Vim 中编程，并希望为 JavaScript IDE 提供一些轻量级的东西。我创建了一个简单的HTML 页面，其中包含指向.js 文件的链接，我在Vim 中编辑该文件并在Firefox Developer Tools 中呈现（F12，从HTML 页面打开；Shift-Ctrl-R 重新加载）。

js_ide.html

<!DOCTYPE html>
<!-- vim: set filetype=html : -->
<!-- /mnt/Vancouver/programming/javascript/js_ide.html -->

<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.1">

<title>JavaScript IDE</title>

<script src="/mnt/Vancouver/programming/javascript/js_ide.js" type="text/javascript" charset="utf-8" /></script>
</head>

<body>
<h1>JavaScript IDE</h1>

<p>Open this file, <a href="/mnt/Vancouver/programming/javascript/js_ide.html">/mnt/Vancouver/programming/javascript/js_ide.html</a>, in Firefox and open the Firefox Developer Tools ("console", F12).</p>

<p>Edit JavaScript code in associated file <a href="/mnt/Vancouver/programming/javascript/js_ide.js">/mnt/Vancouver/programming/javascript/js_ide.js</a></p>

<hr>
</body>
</html>

js_ide.js

// vim: set ft=javascript:
// /mnt/Vancouver/programming/javascript/js_ide.js
/* ========================================================================= */

let q = 'apple banana "nova scotia" "british columbia"';

// https://stackoverflow.com/questions/12367126/how-can-i-get-a-substring-located-between-2-quotes
const r = q.match(/"([^']+)"/g);
console.log('r:', r)
// etc.

截图

【讨论】：