实现js程序在vscode控制台输出的方法（看完方便多了）

最新推荐文章于 2025-05-03 23:09:44 发布
最新推荐文章于 2025-05-03 23:09:44 发布
阅读量6.2k 收藏 9
点赞数 2
CC 4.0 BY-SA版权
分类专栏： ❤️❤️--Javascript ✿✿--海纳百川 文章标签： javascript vscode 前端 js在vscode控制台输出
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41579104/article/details/130006957
通过安装VSCode的Coderunner插件，可以直接在编辑器内运行JS代码，无需借助HTML和浏览器。只需配置默认语言为JavaScript，即可通过命令行或右上角运行按钮便捷执行JS文件，显著提高开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当我们想要写一段js代码时，我们可能会在vscode中新建一个html文件，然后再script标签下去编写js代码，完了之后我们想要看看js打印输出的效果，还会通过浏览器的 F12 去查看输出结果。好麻烦呀~

如何解决呢？

我们可以在vscode中安装一个插件 code runner

 然后在设置中找到 setting.json，在里面添加一段代码

 "code-runner.defaultLanguage": "javascript",

 然后重启vscode之后，假如我们想运行下面的test.js文件

 有两种方式可以运行：

方式一：通过命令运行，node  +文件全路径地址 ，回车就好了

 方式二：通过右上角运行按钮直接运行

 可以看到，方式二明显方便多了。这样再也不用去浏览器运行js代码了，提升开发效率

【VScode】使用VScode内置的调试控制台来调试JS
前端博客典中典
03-02 5001
使用VScode内置的调试控制台来调试JS
VSCODE 使用调制控制台输出
weixin_43323607的博客
07-05 1万+
1、vscode之前一直是使用调制控制台输出，突然变成终端输出，想改回原来设置 2、经过各种百度，确定的更改位置应该是在这个文件launch.json中，但是能够百度到的打开方式我都找不到（因为太菜了），所以自己在vs安装文件夹中先搜索到该文件，路径如下 3、在vs里打开路径，忽略提示什么都没有的信息，你会看到出现了launch.json 4、修改文件，尝试之前很多的修改项，都提示错误，就瞎试了个关键字console，然后用混乱的英语选中了一个，对了！第二个图是成功后按原操作打开的，竟然出现了
在vscode中调试js怎么默认输出到 “调试控制台”？
听海边涛声
04-30 402
在vscode中调试js怎么默认输出到 “调试控制台”？
VSCode配置js教程及VS Code常用教程
不务正业的树
05-03 1852
下载 LTS 版本安装包，安装时勾选自动配置环境变量选项，自定义安装位置，一直到最后安装，其它不要勾选。Visual Studio Code 编辑器支持调试在。语言、布局、键盘快捷键、设置、扩展、主题、命令行界面等。配置好后，以后可以直接按 F5键来直接调试。中运行的 JavaScript。附几个常用的VSCode教程。
VScode默认输出到调试控制台如何调整到终端以及两者中的乱码问题
森明帮大于黑虎帮的博客
07-24 1万+
`vscode`配置中默认每次调试默认的配置是从终端输出，但这种方式输出的结果中，有很多我们并不需要的系统信息，而在调试控制台里只有简洁的我们想要的那部分信息。 要想默认输出到调试控制台，只需将`launch.json中console`一项的配置改为`internalConsole`即可。 `console`有效的三种配置： - `internalConsole`：内部控制台。 - `integratedTerminal`:内部终端。 - `externalTerminal`:外部终端。......
vscode 将输出到调试控制台
Python领域优质萌新学习笔记
07-07 2182
适用python、java环境。
如何在vscode中运行JavaScript并输出
Chelsea_Yang的博客
09-28 2887
然后点击右上角的三角形就可以得到输出啦。
前端新手，记一次VScode中输出javascript的方式
weixin_48743512的博客
11-27 2736
简单记录一下： 在html文件中引入了js文件，所以javascript在js文件中写： 想要看输出结果，一般只能在浏览器端查看： 但是每次都这样看，确实是有点麻烦，所以想能不能console.log输出的东西在vscode中也能看到，按照其他回答尝试下载code runner插件，并在js文件中写好代码，右键运行run code，结果。。。。： ‘node’ 乱码~ 解决方法： ①在vscode中下载code runner插件，并在settings.json文件中修改如下： ②上node.js官网下
【配置vscode编写python代码并输出到外部控制台】
相关项目可以查看https://gitee.com/fan-pl或https://github.com/fpl1116
10-09 2423
配置vscode编写python代码并输出到外部控制台
如何在 vscode 中快速直接打印输出 JavaScript node.js coderunner
YanRian的博客
11-04 674
vscode 插件 code runner。安装 node.js。
【配置vscode编写Java代码和输出在外部控制台】
相关项目可以查看https://gitee.com/fan-pl或https://github.com/fpl1116
10-09 2366
【代码】【配置vscode编写Java代码和输出在外部控制台】
在vscode运行js 输出会合并_前端系列——JS的运行与输出
weixin_39661129的博客
11-03 472
问题：JS如何被运行？JS运行后如何输出结果？回答：1——解答：JS的运行有两种方式，第一种是把代码放到浏览器中，让浏览器内核来渲染解析；第二种是基于NODE，NODE也是一种基于V8引擎的渲染和解析JS的工具。2——解答：JS运行输出结果的方式一共有6中，我们逐一来看：a. alert();在浏览器中通过弹框的方式输出，但注意通过alert输出的结果都会转换成字符串形式的，把值(如果是表达式会先...
js程序如何在vscode控制台输出
weixin_45082961的博客
05-18 1万+
js程序如何在vscode控制台输出 今天在看视频的时候，看到老师把console.log()打印到了输出栏，心里有点小疑惑，怎么使用的呢，以前都不知道怎么使用的，没有一点反应，其实很简单只是使用一个插件而已。 下面给出使用方法 在VS Code中有一个插件——code runner，可以安装后直接运行在node 环境中，然后在vscode中输出文件的结果 点击安装完成后，我们就可以使用了，创建一个js文件来试一试把，点击右上角的三角形，或者点击鼠标右键都可以输出内容，或者使用快捷键ctrl+alt+N
vscode默认输出到调试控制台
热门推荐
weixin_43721146的博客
07-09 2万+
vscode配置中默认每次调试默认的配置是从终端输出，但这种方式输出的结果中，有很多我们并不需要的系统信息，而在调试控制台里只有简洁的我们想要的那部分信息。 要想默认输出到调试控制台，只需将launch.json中console一项的配置改为internalConsole即可。 console有效的三种配置： internalConsole：内部控制台 integratedTerminal:内部终...
vscode中的编辑器、终端、输出、调试控制台（转载）
qq_61918649的博客
02-06 1180
试代码,安装依赖包等。VSCode内置了一个终端窗口,你可以在其中使用shell(如Bash、powerShell等)或者直接运行命令。4.调试控制台(debug Console):调试控制台提供了一个交互式界面,用于在调试过程中查看和修改变量的值、执行表达式和命令。你可以在编辑器中打开、创建和保存代码文件,并进行代码的编写、当你在调试模式下运行代码时,调试控制台将显示程序的:状态和变量的值。你可以在调试控制台中输入和执行代码,以你更在调。你可以在输出窗口中查看和筛选输出结果,并进行必要的调试和排错。
VScode 中直接运行js文件 查看结果
alokka的博客
10-29 9551
1. 在VScode插件中搜索 Code Runner 安装 2. 右键 点击 run code 3. 查看输出结果
【配置vscode编写c或c++程序，并在外部控制台输出程序和解决中文乱码问题！！！】
相关项目可以查看https://gitee.com/fan-pl或https://github.com/fpl1116
10-09 1万+
配置vscode编写c或c++程序，并在外部控制台输出程序和解决中文乱码问题！！！
C语言：谈谈在vscode上用windows()中控制台输入输出函数时会出现的问题
2303_79118993的博客
01-14 650
问题就出在输入输出设备上，windows（）所指定的输出设备是terminal（终端）但是vscode默认的输出是其自身的OUTPUT控制台，因此导致获取句柄是失败的。笔者遇到问题的输入输出函数是SetConsoleCursorPosition等函数。起因是在写flybird的小练习，但是发现控制台的输出完全不对，表现出来就是。那么解决办法如下：将输出从OUTPUT转换到terminal。‘=’是游戏的边界，‘#’是游戏的障碍物。显然输出并没有位置之分导致一片乱。
vscode 控制台设置
qq_40518259的博客
04-22 785
这样设置后，打印内容将在输出窗口显示，中文也没问题（中文问题主要是cmd默认编码gbk和vscode默认编码utf-8不一致），这样设置相当于输出不用终端显示而是用vscode显示。但是调试时还是会默认跳转到终端打印内容，中文会打印乱码，原因也是因为utf-8和gbk的原因，暂时还没找到解决办法。这是因为装了插件Coder Runner, 默认在终端输出, 这时可以在。ctrl+， 进入设置，搜索enco 默认编码选择utf-8。
vscode控制台输出乱码utf-8
最新发布
05-05
### VSCode 控制台输出乱码 UTF-8 的解决方案 在使用 Visual Studio Code (VSCode) 编辑器时，如果遇到控制台输出中文乱码的问题，通常是因为编码不一致引起的。以下是基于 UTF-8 编码的解决方法： #### 方法一：调整 VSCode 文件编码为 UTF-8 确保 VSCode 中保存的文件是以 UTF-8 编码存储的。可以通过以下步骤实现： 1. 打开任意文件，在状态栏右下角会显示当前文件的编码格式（通常是 `UTF-8` 或其他编码）。 2. 如果不是 `UTF-8`，可以单击编码名称，选择 **Reopen with Encoding** -> **UTF-8** 来重新加载文件[^1]。 #### 方法二：配置终端编码为 UTF-8 由于 VSCode 终端默认调用的是 Windows 系统自带的 CMD 工具，CMD 默认使用的编码是 GBK。因此需要手动更改 CMD 的编码为 UTF-8： 1. 在 VSCode 的集成终端中输入以下命令并回车： ```bash chcp 65001 ``` 此命令将 CMD 的活动代码页更改为 UTF-8 编码[^1]。 2. 若要使此更改永久生效，可以在系统的环境变量中添加启动参数。具体操作如下： - 右键点击“我的电脑”，选择“属性”->“高级系统设置”->“环境变量”。 - 新建或编辑用户变量/系统变量中的 ` Autorun ` 值，加入以下内容： ```batch @chcp 65001 >nul ``` #### 方法三：修改 VSCode 设置以支持 UTF-8 通过自定义 VSCode 的 JSON 配置文件来强制指定编码为 UTF-8： 1. 打开 VSCode 的设置界面（快捷键 `Ctrl+,` 或者菜单栏依次选择 File -> Preferences -> Settings）。 2. 搜索框中输入 `terminal.integrated.shellArgs.windows` 并启用它。 3. 将其值设为以下数组形式的内容之一： ```json { "terminal.integrated.shellArgs.windows": ["chcp", "65001"] } ``` 这样每次打开新终端都会自动执行 `chcp 65001` 命令[^2]。 #### 方法四：安装扩展插件辅助处理 有时即使设置了以上各项仍可能出现异常情况，则可考虑借助社区开发的一些专门用于改善国际化体验的扩展程序，比如 “Chinese (Simplified) Language Pack for Visual Studio Code”。 ```javascript // 示例 JavaScript 脚本验证是否正常打印汉字 console.log('你好世界'); ``` 完成上述任一步骤之后重启软件即可测试效果如何。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值