简单的 JavaScript IDE
[英]Simple JavaScript IDE
问题描述
I am brand new to JavaScript and I would like practice my skills using a simple windows based IDE.
我是 JavaScript 的新手，我想使用基于 Windows 的简单 IDE 来练习我的技能。 While learning I do not want to use any CSS or HTML.在学习时，我不想使用任何 CSS 或 HTML。 I would like if possible to have colour single stepping, highlighting and syntax checking.如果可能的话，我希望有颜色单步、突出显示和语法检查。
So for example you could type in your function(s), call it and receive the result例如，您可以输入您的函数，调用它并接收结果
function squareNumber(x) {
return x*x;
}
squareNumber(5)
25
I would like something better than the Internet Explorer console.我想要比 Internet Explorer 控制台更好的东西。
5 个解决方案
解决方案1
10 2013-06-16 11:55:02
There are a lot of good online IDEs at the moment.目前有很多不错的在线IDE。 One of my favorites is JSFiddle , but you said you don't want to use CSS and HTML so it's superfluous in this case.我最喜欢的一个是JSFiddle ，但你说你不想使用 CSS 和 HTML，所以在这种情况下它是多余的。 You can use JSBin , opening only the Javascript and Console panels.您可以使用JSBin ，只打开 Javascript 和 Console 面板。 Another very good one is, in my opinion, Ideone , which has a lot of languages(for JS you have to select Javascript Spidermonkey).在我看来，另一个非常好的是Ideone ，它有很多语言（对于 JS 你必须选择 Javascript Spidermonkey）。 The last one I suggest you is JSConsole , from the creator of JSBin, which is basically an enhanced Javascript console(as the name states).我建议您使用的最后一个是JSConsole ，它来自 JSBin 的创建者，它基本上是一个增强的 Javascript 控制台（顾名思义）。
解决方案2
8 2013-06-16 12:38:39
Have a look at either,看一看，
- WebStorm : real JavaScript IDE (possibly the best.) WebStorm ：真正的 JavaScript IDE（可能是最好的。）
- Sublime Text 2 : text editor with syntax highlighting, and possibility to install plugins. Sublime Text 2 ：具有语法高亮和安装插件的可能性的文本编辑器。
You can use either software, together with node.js , to get what you want.您可以将任一软件与node.js一起使用，以获得您想要的。
Executing the file,执行文件，
function squareNumber(x) {
return x * x;
}
console.log(squareNumber(5));
with node.js will output,与 node.js 将输出，
25
解决方案3
1 已采纳 2015-07-17 05:54:25
Ended up using this IDE as I could run it on a low powered Laptop.最终使用此 IDE，因为我可以在低功率笔记本电脑上运行它。 Free Version免费版
http://brackets.io/ http://brackets.io/
There is also a free offering from Microsoft with Visual Studio 2015 called "Visual Studio Code" runs on Macs and linux too. Microsoft 还提供了一个免费产品，其中包含 Visual Studio 2015，称为“Visual Studio Code”，也可在 Mac 和 linux 上运行。 Only used it for a day but it work great on my low powered tablet.只使用了一天，但它在我的低功率平板电脑上运行良好。
https://code.visualstudio.com/ https://code.visualstudio.com/
解决方案4
0 2018-07-24 14:04:19
Besides the options listed in the answers above;除了上面答案中列出的选项； these are additional options I use when I need to write/test JS without HTML/CSS :这些是我需要在没有 HTML/CSS 的情况下编写/测试 JS 时使用的附加选项：
1) Firefox Developer Edition - ScratchPad 1) Firefox 开发者版 - ScratchPad
The Firefox Developer Edition browser offers a good console with all the necessary features to write JavaScript. Firefox Developer Edition 浏览器提供了一个很好的控制台，其中包含编写 JavaScript 所需的所有功能。
To cite a specific feature - ScratchPad provides you with a good option to write JS code and you can use the run button to view it on the console.引用特定功能 - ScratchPad 为您提供了编写 JS 代码的好选择，您可以使用运行按钮在控制台上查看它。
As you can see below it has the syntax coloring and even the options to save and open files directly from your computer.正如您在下面看到的，它具有语法着色，甚至可以直接从您的计算机保存和打开文件的选项。
You can open the Firefox ScratchPad as an independent window using the shortcut - SHIFT+F4您可以使用快捷键SHIFT+F4作为独立窗口打开 Firefox ScratchPad
It features code completion, inline documentation and much more, you can learn more about using it from the official documentation here - https://developer.mozilla.org/en-US/docs/Tools/Scratchpad它具有代码完成、内联文档等功能，您可以从此处的官方文档中了解有关使用它的更多信息 - https://developer.mozilla.org/en-US/docs/Tools/Scratchpad
Keyboard Shortcuts键盘快捷键
CTRL + L - To display selected code CTRL + L - 显示选定的代码
CTRL + SPACE - Code Hinting CTRL + 空格 - 代码提示
CTRL + R - Run Command CTRL + R - 运行命令
CTRL + I - Inspect Command CTRL + I - 检查命令
2) Node CMD or CMD + Node 2）节点CMD或CMD+节点
I also like using node + CMD since they work seamlessly.我也喜欢使用 node + CMD，因为它们可以无缝工作。 For this option, you need to install node.js and use the CMD to write and test your JS code.对于此选项，您需要安装 node.js 并使用 CMD 编写和测试您的 JS 代码。
You can also consider using the node.js CMD that works like the windows CMD.您还可以考虑使用与 windows CMD 类似的 node.js CMD。
You can change the background color and the text color of the Node CMD by clicking on the top bar and choosing properties您可以通过单击顶部栏并选择属性来更改节点 CMD 的背景颜色和文本颜色
For syntax coloring on Node when using node, you can add one of the syntax coloring npm packages as illustrated below :对于使用 node 时 Node 上的语法着色，您可以添加语法着色 npm 包之一，如下所示：
I installed the cli-color npm package in these four steps :我在这四个步骤中安装了cli-color npm 包：
1) Check if npm is installed using the nmp -v 1）使用nmp -v检查是否安装了npm
2) Install your preferred package using npm install <name of package> 2)使用npm install <name of package>安装你喜欢npm install <name of package>
3) Include the package 3)包含包
4) Test the package and view the results 4)测试包并查看结果
NOTE : It important to check out the documentation of each package esp on the usage since there may be differences.注意：检查每个包的文档尤其是关于用法的文档很重要，因为可能存在差异。
These are two of my favorite Node.js syntax highlighting packages :这是我最喜欢的两个 Node.js 语法高亮包：
https://www.npmjs.com/package/cli-color and https://www.npmjs.com/package/cli-highlight https://www.npmjs.com/package/cli-color和https://www.npmjs.com/package/cli-highlight
解决方案5
0 2021-02-25 21:52:38
I program in Vim and wanted something lightweight for a JavaScript IDE.我在Vim编程并希望为 JavaScript IDE 提供一些轻量级的东西。 I created a simple HTML page that contains a link to a .js file that I edit in Vim and render in Firefox Developer Tools ( F12 , from the HTML page to open; Shift-Ctrl-R to reload).我创建了一个简单的HTML页面，其中包含指向我在 Vim 中编辑并在Firefox 开发人员工具中呈现的.js文件的链接（ F12 ，从HTML页面打开； Shift-Ctrl-R重新加载）。
js_ide.html 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 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.
Screenshot截屏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.