logo标签列表

简单的JavaScript集成开发环境

javascriptide
14

我刚开始学习JavaScript，希望使用一个基于Windows的简单IDE来练习我的技能。在学习期间，我不想使用任何CSS或HTML。如果可能的话，我希望能够进行单步颜色突出显示、高亮和语法检查。

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

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

squareNumber(5)

25

我希望有比Internet Explorer控制台更好的东西。

你是在寻找一个IDE还是试图构建一个？ - Joseph
Visual Studio是支持JavaScript的集成开发环境之一...但我不会过多关注IDE。如果你只想学习JavaScript而不是HTML/DOM，则使用一个好的编辑器并尝试使用node.js。 - bert
你想学习 JavaScript 的哪个方面？你的目标是什么？毕竟，JS 是作为 HTML 的伴侣而开发的...这就是历史。你的方法有点像通过编写桌面应用程序来学习 PHP。 - FloydThreepwood
我对iOS开发的一部分挫败感来自于JavaScript没有传统的集成开发环境，也就是说你不能像运行文件一样点击“运行”按钮并输出结果（或错误）。通常情况下，它是由文本编辑器、代码检查工具和Chrome开发者工具混合使用，从用户体验角度来看并不理想。 - daspianist
5个回答
10

当前有许多优秀的在线IDE。 我最喜欢的之一是JSFiddle，但你说你不想使用CSS和HTML，所以在这种情况下它是多余的。你可以使用JSBin，只打开Javascript和Console面板。另一个非常好的选择是Ideone，它支持很多语言（对于JS，你需要选择Javascript Spidermonkey）。我建议你使用的最后一个是JSConsole，由JSBin的创建者开发，基本上是增强版的Javascript控制台(正如名称所示)。

8
请看以下两种选择：
  • WebStorm：真正的JavaScript IDE（可能是最好的）。
  • Sublime Text 2：带有语法高亮和插件安装功能的文本编辑器。
您可以使用其中任意一种软件，再加上node.js，即可得到您想要的结果。
执行文件，
function squareNumber(x) {
    return x * x;
}

console.log(squareNumber(5));

使用node.js将会输出：

25
1

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

http://brackets.io/

微软还提供了一款名为“Visual Studio Code”的免费软件，可在Mac和Linux上运行。我只用了一天，但它在我的低功率平板电脑上表现得非常好。

https://code.visualstudio.com/

0

除了上面答案中列出的选项之外，以下是我在需要编写/测试JS而没有HTML/CSS时使用的其他选项：

1）Firefox开发者版-ScratchPad

Firefox开发者版浏览器提供了一个良好的控制台，具备编写JavaScript所需的所有必要功能。

举个例子，ScratchPad为您提供了一个很好的选项来编写JS代码，并且您可以使用运行按钮在控制台上查看它。

如下图所示，它具有语法着色甚至可以直接从计算机保存和打开文件的选项。 enter image description here

您可以使用快捷键SHIFT+F4将Firefox ScratchPad作为独立窗口打开。

enter image description here

它具有代码自动完成、内联文档等功能，您可以从官方文档https://developer.mozilla.org/en-US/docs/Tools/Scratchpad了解更多使用方法。

键盘快捷键

CTRL + L - 显示选定的代码

CTRL + SPACE - 代码提示

CTRL + R - 运行命令

CTRL + I - 检查命令

2) Node CMD 或 CMD + Node

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

enter image description here

你也可以考虑使用类似于 Windows CMD 的 node.js 命令提示符。
点击顶部栏并选择 "属性" ，您可以更改 Node CMD 的 背景颜色 和 文本颜色。

enter image description here

如果你在使用Node时需要语法高亮，可以按照下面的步骤之一添加一个语法高亮的npm包：

enter image description here

我按照以下四个步骤安装了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

0

我使用 Vim 进行编程，想要一个轻量级的 JavaScript IDE。我创建了一个简单的 HTML 页面，其中包含一个链接到我在 Vim 中编辑并在 Firefox Developer Tools（从 HTML 页面打开；Shift-Ctrl-R 重新加载）中呈现的 .js 文件。

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://dev59.com/iGct5IYBdhLWcg3wFpi1
const r = q.match(/"([^']+)"/g);
console.log('r:', r)
// etc.

截图

simple_javascript_ide

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接