用Visual Studio Code运行JavaScript程序失败的解决办法

用Visual Studio Code运行JavaScript程序失败的解决办法

A Solution for Running JavaScript Applications on Visual Studio Code

前面文章内容曾经介绍过如何在Visual Studio Code开发环境中运行JavaScript程序。但是，在学生和网友安装过程中，出现无法运行JavaScript的失败提示，该如何解决呢？

笔者排查了各个环节，经过实验推出本文，将简要介绍在Visual Studio Code运行JavaScript应用程序失败的解决办法，希望对大家有所帮助。

1. 安装node.js

若要在Visual Studio Code中运行 JavaScript 代码，首先，需要在计算机上安装 node.js。node.js 是基于 Chrome V8 JavaScript 引擎构建的 JavaScript Run Time(运行时)。您可以从 node.js 官方网站下载最新的 Node.js 版本。

1) 获取Node.js

访问Node.js官网下载页面：https://nodejs.org/en/download

选择LTS(建议用于大多数用户)，选择Windows Installer(.msi)的64位安装程序，点击下载。
在Chrome浏览器中，很快下载完毕；于是，找到Windows的下载文件夹里，找到这个安装可执行文件node-v20.9.0-x64.msi, 双击开始安装。

2) 安装Node.js

启动安装向导，点击Next继续下一步。

选中I accept the terms in the License Agreement（我同意许可证协议条款），点击Next继续下一步。

为了节省C:盘空间，可以安装到其它分区，例如，将安装文件夹指定为D:\nodejs, 点击Next继续下一步。

进入Custom Setup(定制安装)对话框，选择默认设置，点击Next继续下一步。

注意 ：对话框提到的Chocolatey工具，可根据需要选择安装。

点击Next继续下一步。进入Ready to Install安装对话框，点击Install开始安装。

安装完毕，点击Finish退出安装向导。

注意：确保下载 node.js的LTS（长期支持）版本，因为它们提供稳定性和长期支持，使其成为开发环境的理想选择。

安装 Node.js 后，可以通过打开终端或命令提示符并运行以下命令来验证 Node.js 和 npm（节点包管理器）的正确版本：

node -v
npm -v

验证完毕！node版本是最新的v20.9.0, 而npm包管理器为9.8.0版本。

2. 检查是否安装了必要的Extension - Code Runner

这是代码运行的先决条件。

例如，在Visual Studio Code打开以后，点击左侧导航栏的Extension按钮，然后在Marketplace搜索栏，搜索Code Runner，是否已经安装；如果安装，如下图所示：

如果没有安装，则代码无法正常运行。需要点击Install安装code runner之后方可运行。

3. 其它可选的Extension

接下来，为了代码补全，语法高亮提示和一些常用AI便捷功能，可根据需要安装以下Extension:

1） IntelliCode

微软官网为Visual Studio Code运行JavaScript 推荐的首款Extension名叫IntelliSense, 由于Intellisense能够显示代码补全、悬停信息及签名信息，以便帮助程序员更快捷、正确地完成编写代码。

但是，当通过Extension搜索Marketplace时，发现IntelliSense已经找不到Microsoft的扩展；取而代之的是IntelliCode，它的功能就是AI-assitant Development(即AI开发助理)。

同时，该扩展的功能简介表明，在2018年10月之后的更新版本，都可以使用该扩展，这就意味着，IntelliSense被全面取代，而微软官网未及时更新。

安装完毕后，显示IntelliCode最新版本为v1.2.30.

2） TabNine

TabNine用来为JavaScript, Python等语言进行AI自动代码补全和AI聊天等。也是业界公认的智能扩展，其功能非常强大。

3） JavaScript Snippets

这是个短代码工具扩展。此扩展包含 VS Code代码编辑器的 ES6 语法中的 JavaScript 代码片段（支持 JavaScript 和 TypeScript）。这对提示补全代码，完成高质量的编程有一定帮助。

4） Babel JavaScript

另一个功能类似的可选Extension, 是Babel JavaScript, 提供语法高亮显示，可以用来区分不同语法段功能，以彩色来显示区分，有助于形成养眼的编程环境，利于代码检查。

例如下图这样的代码显示效果。

支持ES201x、React JSX、Flow 和 GraphQL 的 JavaScript 语法高亮显示。该作者强烈建议此语法突出显示，与支持它的彩色主题(Color Theme)一起使用。

4. 运行Javascript应用程序

至此，检查和安装过程全部结束，让我们回到Visual Studio Code来运行一下JavaScript应用程序吧。

编写一个类似于”Hello, world!”的控制台应用程序，代码如下：

let s = "Hello, world!";
let g = "Welcome to China!";
console.log(s, "\n", g);

点击运行，代码运行成功！如下图。

喜欢就点赞哈！😊

更多技术好文陆续推出，欢迎关注。

All rights reserved, @2023, 版权所有，侵权必究。

相关文章：

1. 用Visual Studio Code搭建JavaScript开发环境
2. 在Jupyter Lab(Notebook)上安装运行JavaScript应用程序
3. 用CodePen实现JavaScript程序动态在线开发