VS Code 配置 JavaScript 开发环境完整指南

一，环境

• Windows 11 家庭中文版，64 位操作系统, 基于 x64 的处理器
• VS Code 版本: 1.83.1 (user setup)
• Node.js 版本：20.9.0

二，为什么搭建JavaScript环境

阅读《重构改善既有代码的设计第2版》时，书中代码范例均基于 JavaScript，而作者此前未接触过该语言。为实现理论与实践同步，需从零学习 JavaScript 基本语法。鉴于书中范例极少使用复杂特性，且作者具备 C++ 背景，仅需掌握该语言的基础知识即可。

首要任务是配置好 JavaScript 运行环境，为学习基本语法创造条件，随后循序渐进地研读《重构改善既有代码的设计第2版》。该书对 IT 从业者具有重要价值。

二，配置步骤

• 在 Visual Studio Code (VS Code) 中配置 JavaScript 运行环境，核心在于安装 Node.js，从而允许在编辑器内执行 JavaScript 代码。

以下是详细的步骤：

1、打开浏览器，前往 Node.js 官方网站：https://nodejs.org/

2、页面将显示两个版本：LTS（长期支持版）和当前版本。通常推荐选择最稳定的 LTS 版本进行下载。

或者直接点击这里下载

3、根据操作系统选择对应的安装程序：

• 对于 Windows，请选择 ".msi" 安装程序。
• 对于 macOS，请选择 ".pkg" 安装程序。
• 对于 Linux，可选择合适的包管理器或二进制文件进行安装。

4、下载完成后，运行安装程序并遵循向导完成安装。安装过程会自动配置 Node.js 的环境变量，操作十分简便。

5、打开命令行工具，输入：node --version 或者 node -v 命令，验证 Node.js 是否成功安装（输出 Node.js 的版本号）。

6、打开 VS Code，安装以下两个插件以提升学习效率（Live Server 是一个轻量级的 Web 服务器，Code Runner 用于一键运行 JavaScript 代码）。

7、创建一个用于保存 JavaScript 工程的文件夹或打开一个已存在的文件夹（D:\Files\IT_Data\VsCode_Project\JavaScript_Project）。

8、然后新建一个 index.html 文件，打开该文件输入感叹号（!）并按回车键，会自动生成如下内容。

9、上图中的这些HTML代码内容并不是学习的主题，所以不用在乎这些细节，但是要使用这些HTML代码作为JavaScript代码的容器，以帮助我去学习JavaScript这门编程语言，进而理解《重构改善既有代码的设计第2版》书中的代码展示范例。

10、在 <body></body> 标签里输入 <h1>Hello JavaScript</h1> 内容，然后右键index.html文件点击 Open with Live Server 选项，这会在默认浏览器中加载当前文件，显示如下页面。

11、这也就说明环境配置基本成功了，然后在当前文件夹下新建一个 index.js 文件，并输入console.log('Hello JavaScript'); 内容，开始入坑JavaScript。

12、回到 index.html 文件，在 <body></body> 标签里输入 <script src="index.js"></script> 内容，这会让浏览器加载 index.js 文件中的JavaScript代码。然后回到浏览器中，按 F12 键选择控制台，会输出 Hello JavaScript 内容。

13、又或者右键index.js文件点击 Run Code 选项，然后会在VS Code中打开终端窗口并同样输出 Hello JavaScript 内容。

14、至此，VS Code搭建JavaScript环境大功告成，接下来开始入坑JavaScript语言了！！

总结

到此这篇关于VS Code中JavaScript环境搭建配置的文章就介绍到这了,更多相关VS Code中JS环境配置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！