【配置环境】VS Code中JavaScript环境搭建

server/2025/2/9 1:00:10/

一,环境

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

二,为什么搭建JavaScript环境

  1. 因为在看《重构改善既有代码的设计第2版》的时候,书中的代码展示范例都是基于JavaScript的,我也从未涉及过JavaScript这门编程语言。为了让理论与实践并进,必须从零开始学一下JavaScript基本语法,因为书中范例要求极少使用JavaScript任何复杂的特性,所以我只要对该编程语言有粗浅的了解就行,毕竟我是学C++的。
  2. 首当其冲便是先配置好JavaScript的运行环境,为学习JavaScript的基本语法创造前提条件,然后循序渐进学习《重构改善既有代码的设计第2版》,因为这本书对IT从业者来说很重要!!!

二,配置步骤

  • 在 Visual Studio Code (VS Code) 中配置 JavaScript 运行环境通常涉及安装 Node.js,以便在编辑器中运行 JavaScript 代码。

以下是详细的步骤:

  1. 打开浏览器,前往 Node.js 官方网站:https://nodejs.org/
  2. 这会看到两个版本:LTS(Long Term Support)版本和当前版本。LTS 版本通常是最稳定和推荐的版本。选择LTS版本并点击下载
  3. 然后根据操作系统选择下载相应的安装程序:
    1. 对于 Windows,可以选择 ".msi" 安装程序
    2. 对于 macOS,可以选择 ".pkg" 安装程序。
    3. 对于 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语言了!!!


http://www.ppmy.cn/server/166074.html

相关文章

ES6 Set 数据结构用法总结

1. Set 基本概念 Set 是 ES6 提供的新的数据结构&#xff0c;类似于数组&#xff0c;但成员的值都是唯一的&#xff0c;没有重复的值。Set 本身是一个构造函数&#xff0c;用来生成 Set 数据结构。 1.1 基本用法 // 创建一个空Set const set new Set();// 创建一个带有初始…

预防和应对DDoS的方法

DDoS发起者通过大量的网络流量来中断服务器、服务或网络的正常运行&#xff0c;通常由多个受感染的计算机或联网设备&#xff08;包括物联网设备&#xff09;发起。 换种通俗的说法&#xff0c;可以将其想象成高速公路上的一次突然的大规模交通堵塞&#xff0c;阻止了正常的通勤…

java中equals和hashCode为什么要一起重写

文章目录 equals&#xff08;&#xff09;方法常见的重写规则&#xff1a; hashCode&#xff08;&#xff09;方法为什么通常需要一起重写 equals() 和 hashCode()&#xff1f;一致性要求哈希表的工作原理避免错误的行为例子说明总结 equals&#xff08;&#xff09;方法 equa…

2025 IT职业发展方向及推荐

一、云计算与DevOps&#xff08;推荐指数&#xff1a;★★★★★&#xff09; 推荐理由&#xff1a; 市场需求&#xff1a; 据Gartner报告&#xff0c;2025年全球公有云市场规模将突破8300亿美元&#xff0c;但混合云管理人才缺口达400万&#xff08;IDC数据&#xff09;。 企…

golang命令大全12--命令速查表

至此&#xff0c;本系列博文已将golang的各种应用场景的命令都介绍了一遍&#xff0c;通过熟练使用这些命令&#xff0c;开发者可以更高效地开发、测试和维护Go项目&#xff0c;同时也能够更好地理解和学习Go语言的特性和最佳实践。因此&#xff0c;掌握Go命令行工具是成为一名…

还搞不透stm32单片机启动过程?一篇文章几百字让你彻底看懂!

1.stm32启动 1.1 msp和pc的初始值&#xff0c;第一步&#xff1a; 2.boot的值就被锁定了 可以根据实际绑定的值变动&#xff0c; 这里补充一点boot1和0的原理&#xff1a; 1.2来点刺激的&#xff1a; 这里我插入一个链接&#xff1a; 【明解STM32】一文搞明白STM32芯片存储…

Android Studio 2024.2.2.13版本安装配置详细教程

Android Studio 是由 Google 官方开发和维护的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专为 Android 应用开发设计。它是基于 JetBrains 的 IntelliJ IDEA 平台构建的&#xff0c;集成了丰富的工具和功能&#xff0c;帮助开发者高效构建、调试、测试和发布 Androi…

uniapp mqttjs 小程序开发

在UniApp中集成MQTT.js开发微信小程序时&#xff0c;需注意平台差异、协议兼容性及消息处理等问题。以下是关键步骤与注意事项的综合指南&#xff1a; 一、环境配置与依赖安装 安装MQTT.js 推荐使用兼容性较好的版本&#xff1a;mqtt4.1.0&#xff08;H5和小程序兼容性最佳&…