如何在Visual Studio Code中运行JS并查看console.log输出

前置要求 #

• 提前在本地安装完成 Node.js 运行环境，可在任意终端执行 node -v，能正常输出版本号即代表环境配置正常。

可选择的3种常用运行方式 #

• 内置终端直接运行（无需额外插件）
  • 将存放该 JS 文件的文件夹作为 VS Code 工作区打开，按下快捷键 Ctrl + ~（Mac 系统为 Cmd + ~）调出 VS Code 内置终端
  • 在终端中输入运行命令 node 你的JS文件名.js（比如文件名为 demo.js 就输入 node demo.js），回车后即可在终端直接看到 console.log 打印的结果 0
• Code Runner 插件一键运行
  • 在 VS Code 扩展市场搜索安装 Code Runner 插件
  • 打开目标 JS 文件后，点击编辑器右上角的三角形运行按钮，或是右键编辑区选择 Run Code 选项，运行结果会直接输出在 VS Code 下方的面板中
  • 如果输出内容显示不完整，可进入插件设置，勾选 Run In Terminal 选项，让所有输出直接在终端面板展示，避免被截断
• 浏览器环境运行（适配前端场景）
  • 安装 Live Server 插件，在同目录新建一个 HTML 文件，通过 <script> 标签引入你的 JS 文件
  • 右键 HTML 文件选择 Open with Live Server 启动本地服务，按下 F12 调出浏览器开发者工具，切换到 Console 标签页即可看到对应输出

常见问题排查 #

• 如果运行时提示 node 不是内部或外部命令，说明 Node.js 未正确安装或是系统环境变量未配置，重新安装 Node.js 并按指引配置环境变量即可解决
• 找不到输出面板时，可点击 VS Code 下方面板的标签切换，确认当前停留在终端/输出对应通道即可

内容的提问来源于stack exchange，提问作者Van Vo