有没有办法使用 Visual Studio Code 执行 JavaScript 并显示结果?
例如,一个脚本文件包含:
console.log('hello world');
我认为需要 Node.js 但不知道该怎么做?
我所说的 Visual Studio Code 是指来自 Microsoft 的新代码编辑器——不是使用 Visual Studio 编写的代码。
有一种更简单的方式来运行 JavaScript,无需配置:
安装 Code Runner Extension 在文本编辑器中打开 JavaScript 代码文件,然后使用快捷键 Control+Alt+N(或 macOS 上的 ⌃ Control+⌥ Option+N),或按 F1 然后选择/键入 Run Code,代码将运行并输出将显示在输出窗口中。
此外,您可以选择部分 JavaScript 代码并运行代码片段。该扩展还适用于未保存的文件,因此您只需创建一个文件,将其更改为 Javascript 并快速编写代码(当您只需要快速尝试时)。很方便!
为此需要NodeJS,否则它将无法正常工作。
我很惊讶这还没有被提及:
只需在 VS Code 中打开有问题的 .js
文件,切换到“调试控制台”选项卡,点击左侧导航栏中的调试按钮,然后单击运行图标(播放按钮)!
需要安装nodejs!
该解决方案旨在在节点中运行当前打开的文件并在 VSCode 中显示输出。
我有同样的问题,发现新引入的 tasks
对这个特定用例很有用。这有点麻烦,但这是我所做的:
在项目的根目录中创建一个 .vscode
目录并在其中创建一个 tasks.json
文件。将此任务定义添加到文件中:
{
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": [
"--harmony"
],
"tasks": [
{
"taskName": "runFile",
"suppressTaskName": true,
"showOutput": "always",
"problemMatcher": "$jshint",
"args": ["${file}"]
}
]
}
然后您可以: press F1 > type `run task` > enter > select `runFile` > enter
运行您的任务,但我发现添加自定义键绑定以打开任务列表更容易。
要添加键绑定,请在 VSCode UI 菜单中,转到“代码”>“首选项”>“键盘快捷键”。将此添加到您的键盘快捷键:
{
"key": "cmd+r",
"command": "workbench.action.tasks.runTask"
}
当然,您可以选择任何您想要的组合键。
更新:
假设您正在运行 JavaScript 代码对其进行 test,您可以通过将任务的 isTestCommand
property 设置为 true
来将您的任务标记为 test 任务,然后您可以绑定一个workbench.action.tasks.test
command 的键,用于单次操作调用。
换言之,您的 tasks.json
文件现在将包含:
{
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": [
"--harmony"
],
"tasks": [
{
"taskName": "runFile",
"isTestCommand": true,
"suppressTaskName": true,
"showOutput": "always",
"problemMatcher": "$jshint",
"args": ["${file}"]
}
]
}
...您的 keybindings.json
文件现在将包含:
{
"key": "cmd+r",
"command": "workbench.action.tasks.test"
}
在我看来,这是你最快的方法;
在 Visual Studio 代码上打开集成终端(查看 > 集成终端)
输入“节点文件名.js”
按回车
注意:需要设置节点。 (如果您有自制软件,只需在终端上输入“brew install node”)
注意 2:如果您还没有,强烈推荐自制软件和节点。
祝你今天过得愉快。
js
文件包含像 sessionStorage
这样的客户端脚本,则会在终端中引发错误。
集成终端的快捷方式是 ctrl + `,然后键入 node <filename>
。
或者,您可以创建一个任务。这是我的 tasks.json 中唯一的代码:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}
从这里创建一个快捷方式。这是我的 keybindings.json:
// Place your key bindings in this file to overwrite the defaults
[
{ "key": "cmd+r",
"command": "workbench.action.tasks.runTask"
},
{ "key": "cmd+e",
"command": "workbench.action.output.toggleOutput"
}
]
这将在命令面板中打开“运行”,但您仍然必须使用鼠标键入或选择要运行的任务,在本例中为节点。第二个快捷方式切换输出面板,已经有一个快捷方式,但这些键彼此相邻并且更易于使用。
在 VS 代码中按照这些步骤操作。[在 windows os 中执行]
创建新文件 在其中写入 javascript 代码 将文件另存为 filename.js 转到调试菜单 单击开始调试或直接按 F5
screenshot of starting debugging
screenshot of output of js code in terminal
编辑:阅读此文档以了解有关 JS for VSCode 的最新配置和功能:https://code.visualstudio.com/docs/languages/javascript
好吧,要简单地运行代码并在控制台上显示输出,您可以创建一个任务并执行它,就像@canerbalci 提到的那样。
这样做的缺点是你只会得到输出,仅此而已。
我真正喜欢做的是能够调试代码,比如说我尝试解决一个小算法或尝试一个新的 ES6 功能,然后我运行它并且它有一些可疑之处,我可以在 VSC 中调试它。
因此,我没有为它创建任务,而是修改了此目录中的 .vscode/launch.json 文件,如下所示:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${file}",
"stopOnEntry": true,
"args": [],
"cwd": "${fileDirname}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
}
]
}
它的作用是在 VSC 的调试器中启动您当前所在的任何文件。它设置为在启动时停止。
要启动它,请在要调试的文件中按 F5 键。
当我第一次开始使用带有扩展名 Code Runner
的 VS Code 时,我遇到了这个确切的问题
您需要做的是在用户设置中设置 node.js 路径
您需要在 Windows 机器中安装路径时设置路径。
对我来说是 \"C:\\Program Files\\nodejs\\node.exe\"
因为我的文件目录名称中有一个空格
https://i.stack.imgur.com/mDTrL.png
希望这会帮助你。
当然,你的问题帮助了我,因为我也来到这里寻求帮助,以便在我的 VS CODE 中运行 JS
\\
,在 Windows 中,简单的 /
也可以。
从 v1.32 开始,这现在可能是最简单的:
{
"key": "ctrl+shift+t",
"command": "workbench.action.terminal.sendSequence",
"args": { "text": "node '${file}'\u000D" }
}
使用您自己的键绑定。
请参阅发行说明:sendSequence and variables。
使用 vscode v1.32,您可以使用 ${file}
之类的变量(即当前文件)sendSequence
到终端。如果您想要其他路径,请在上面的键绑定中将 ${file} 替换为您的路径名。
\u000D
是一个返回,因此它将立即运行。
我在 ${file}
变量周围添加了 '
,以防您的文件路径中有空格,例如 c:Users\Some Directory\fileToRun
File > Preferences > keyboard shortcuts
我建议您使用一个名为 Quokka 的简单易用的插件,它现在非常流行,可以帮助您随时随地调试代码。 Quokka.js。使用此插件的一个最大优势是您可以节省大量时间来浏览 Web 浏览器并评估您的代码,借助它您可以看到 VS 代码中发生的一切,从而节省大量时间。
我使用了 Node Exec,不需要配置,构建您当前正在结束的文件或曾经选择的文件,并在 VSCode 中输出。
https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node
通过一些配置,您也可以添加 Babel 来进行一些即时编译。
只需安装 nodemon 并运行
nodemon your_file.js
在 vs 代码终端上。
如果您的机器上安装了节点
只需在 VSCODE
中打开终端并输入 node yourfile.js
即可
无需在 Visual Studio 代码中设置在 javascript、python 等上运行代码的环境,您只需安装 Code Runner Extension,然后只需选择要运行的代码部分并点击右上角的运行按钮。
这很简单,当您在 VS Code 中创建一个新文件并运行它时,如果您还没有配置文件,它会为您创建一个,您唯一需要设置的就是“程序”值,然后设置它到你的主 JS 文件的路径,如下所示:
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
// ABSOLUTE paths are required for no folder workspaces.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// ABSOLUTE path to the program.
"program": "C:\\test.js", //HERE YOU PLACE THE MAIN JS FILE
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
"cwd": "",
// ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
另一种选择是在 Visual Studio Code 中使用开发人员工具控制台。只需从帮助菜单中选择“切换开发人员工具”,然后在弹出的开发人员工具中选择“控制台”选项卡。从那里你有你在 Chrome 中获得的相同的开发工具 REPL。
对于 Windows:只需将 .js
文件的文件关联更改为 node.exe
1) Take VSCode
2) Right click on the file in left pane
3) Click "Reveal in explorer" from context menu
4) Right click on the file -> Select "Open with" -> Select "Choose another program"
5) Check box "Always use this app to open .js file"
6) Click "More apps" -> "Look for another app in PC"
7) Navigate to node.js installation directory.(Default C:\Program Files\nodejs\node.exe"
8) Click "Open" and you can just see cmd flashing
9) Restart vscode and open the file -> Terminal Menu -> "Run active file".
在 Visual Studio Code 中运行 javascript 的方法有很多种。
如果你使用 Node,那么我推荐使用 VSC 中的标准调试器。
我通常会创建一个虚拟文件,比如我在其中进行外部测试的 test.js。
在您拥有代码的文件夹中,创建一个名为“.vscode”的文件夹并创建一个名为“launch.json”的文件
在此文件中粘贴以下内容并保存。现在您有两个选项来测试您的代码。
当您选择“Nodemon 测试文件”时,您需要将代码放入 test.js 中进行测试。
要安装 nodemon 以及有关如何在 VSC 中使用 nodemon 进行调试的更多信息,我建议阅读此article,其中更详细地解释了 launch.json 文件的第二部分以及如何在 ExpressJS 中进行调试。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Nodemon Test File",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/test.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector",
},
]
}
您必须设置 Node.js 环境变量才能在 VS 代码中运行 JavaScript 代码。按照这些设置并创建路径。
--打开控制面板->系统->高级系统设置->环境变量--查找变量PATH并添加node.js文件夹路径作为值。通常是 C:\Program Files Nodejs;。如果变量不存在,则创建它。 --重启你的IDE或电脑。
如果您想知道节点可执行文件应该在您的 C:\Program Files\nodejs 文件夹中。
如果您需要检查 PATH,您可以通过右键单击文件资源管理器中的计算机或控制面板中的安全设置来查看它。在那里选择高级系统设置。将打开一个对话框,其中选择了“高级”选项卡。底部是一个按钮,环境变量。
使用 npm 安装 nodemon: npm install nodemon -g init nodemon: npm init 打开 package.json 并将其更改为: { "name": "JavaScript", "version": "1.0.0", "description": "", "main": "{filename}.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon {filename}.js" } , "keywords": [], "author": "", "license": "ISC" } 转到终端并编写以下命令:npm start
使用这个文件名 tempCodeRunnerFile 运行 java 文件而不被保存
public class tempCodeRunnerFile{
public static void main(String[] args) {
System.out.println("aaaaaa");
}
}
另一种方法是打开终端 ctrl+` 执行 node
。现在您有一个节点 REPL 处于活动状态。您现在可以将文件或选定的文本发送到终端。为了做到这一点,打开 VSCode command Pallete(F1 或 ctrl+shift+p)并执行 >run selected text in active terminal
或 >run active file in active terminal
。
如果在执行代码之前需要一个干净的 REPL,则必须重新启动节点 REPL。这是在终端中使用节点 REPL ctrl+c ctrl+c
退出它并键入 node
开始新的时完成的。
您可能可以将命令调色板命令键绑定到您想要的任何键。
PS:node
应该已安装并在您的路径中