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

一,环境

  • 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.rhkb.cn/news/13583.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

结构体排序 C++ 蓝桥杯

成绩排序 #include<iostream> #include<algorithm> using namespace std; struct stu {string name;//名字int grade;//成绩 }; stu a[30]; bool cmp(stu l, stu r) {if (l.grade ! r.grade) return l.grade > r.grade;return l.name < r.name; } int main()…

低代码提升交付效率的公式计算

低&#xff08;无&#xff09;代码平台&#xff08;后统称“低代码”&#xff09;能够提升数字化应用建设、交付效率&#xff0c;已经成为IT从业人员的共识。目前&#xff0c;大部分CIO/CDO都能清晰定位和认知低代码的特点和作用。但仍然有人认为&#xff0c;使用了低代码工具软…

【漫画机器学习】083.安斯库姆四重奏(Anscombe‘s Quartet)

安斯库姆四重奏&#xff08;Anscombes Quartet&#xff09; 1. 什么是安斯库姆四重奏&#xff1f; 安斯库姆四重奏&#xff08;Anscombes Quartet&#xff09;是一组由统计学家弗朗西斯安斯库姆&#xff08;Francis Anscombe&#xff09; 在 1973 年 提出的 四组数据集。它们…

【PDF多区域识别】如何批量PDF指定多个区域识别改名,基于Windows自带的UWP的文字识别实现方案

海关在对进口货物进行查验时,需要核对报关单上的各项信息。对报关单 PDF 批量指定区域识别改名后,海关工作人员可以更高效地从文件名中获取关键信息,如货物来源地、申报价值等。例如文件名 “[原产国]_[申报价值].pdf”,有助于海关快速筛选重点查验对象,提高查验效率和监管…

C基础寒假练习(6)

一、终端输入行数&#xff0c;打印倒金字塔 #include <stdio.h> int main() {int rows;printf("请输入倒金字塔的行数: ");scanf("%d", &rows);for (int i rows; i > 0; i--) {// 打印空格for (int j 0; j < rows - i; j) {printf(&qu…

使用 CSS 实现透明效果

在 CSS 中&#xff0c;实现透明效果有几种方法&#xff0c;具体使用哪种方法取决于具体需求。以下是一些常见的方法&#xff1a; 使用 opacity 属性&#xff1a; opacity 属性可以设置整个元素的透明度&#xff0c;包括其所有的子元素。 .transparent { opacity: 0.5; /* 0 表…

解锁反序列化漏洞:从原理到防护的安全指南

目录 前言 一、什么是反序列化 二、反序列化漏洞原理 三、反序列化漏洞的危害 &#xff08;一&#xff09;任意代码执行 &#xff08;二&#xff09;权限提升 &#xff08;三&#xff09;数据泄露与篡改 四、常见的反序列化漏洞场景 &#xff08;一&#xff09;PHP 反…

UE虚幻引擎No Google Play Store Key:No OBB found报错如何处理

UE虚幻引擎No Google Play Store Key&#xff1a;No OBB found报错如何处理&#xff1f; 问题描述&#xff1a; UE成功打包APK并安装过后&#xff0c;启动应用时提示&#xff1a; No Google Play Store KeyNo OBB found and no store key to try to download. Please setone …

Text2Sql:开启自然语言与数据库交互新时代(3030)

一、Text2Sql 简介 在当今数字化时代&#xff0c;数据处理和分析的需求日益增长。对于众多非技术专业人员而言&#xff0c;数据库操作的复杂性常常成为他们获取所需信息的障碍。而 Text2Sql 技术的出现&#xff0c;为这一问题提供了有效的解决方案。 Text2Sql&#xff0c;即文…

八大排序算法细讲

目录 排序 概念 运用 常见排序算法 插入排序 直接插入排序 思想&#xff1a; 步骤&#xff08;排升序&#xff09;: 代码部分&#xff1a; 时间复杂度&#xff1a; 希尔排序 思路 步骤 gap的取法 代码部分&#xff1a; 时间复杂度&#xff1a; 选择排序 直接选…

基于MODIS/Landsat/Sentinel/国产卫星遥感数据与DSSAT作物模型同化的作物产量估算

基于过程的作物生长模拟模型DSSAT是现代农业系统研究的有力工具&#xff0c;可以定量描述作物生长发育和产量形成过程及其与气候因子、土壤环境、品种类型和技术措施之间的关系&#xff0c;为不同条件下作物生长发育及产量预测、栽培管理、环境评价以及未来气候变化评估等提供了…

【容器技术01】使用 busybox 构建 Mini Linux FS

使用 busybox 构建 Mini Linux FS 构建目标 在 Linux 文件系统下构建一个 Mini 的文件系统&#xff0c;构建目标如下&#xff1a; minilinux ├── bin │ ├── ls │ ├── top │ ├── ps │ ├── sh │ └── … ├── dev ├── etc │ ├── g…

排序算法与查找算法

1.十大经典排序算法 我们希望数据以一种有序的形式组织起来&#xff0c;无序的数据我们要尽量将其变得有序 一般说来有10种比较经典的排序算法 简单记忆为Miss D----D小姐 时间复杂度 &#xff1a;红色<绿色<蓝色 空间复杂度&#xff1a;圆越大越占空间 稳定性&…

使用多模态大语言模型进行深度学习的图像、文本和语音数据增强

在过去的五年里&#xff0c;研究方向已从传统的机器学习&#xff08;ML&#xff09;和深度学习&#xff08;DL&#xff09;方法转向利用大语言模型&#xff08;LLMs&#xff09;&#xff0c;包括多模态方法&#xff0c;用于数据增强&#xff0c;以提高泛化能力&#xff0c;并在…

PCA9685舵机控制板使用

1. 概述 PCA9685 是一款由 NXP 半导体公司生产的 16 通道 PWM 驱动器&#xff0c;广泛应用于多个舵机、LED 灯带控制等场景。它通过 I2C 总线与主控芯片&#xff08;如 STM32&#xff09;通信&#xff0c;可以高效地控制多个舵机的运动和多通道 PWM 输出。该模块适用于多舵机控…

2025.2.6(c++杂项补充及qt基础介绍)

作业 1> 完善C的思维导图 2> 重新创建一个新的项目&#xff0c;将默认提供的代码进行注释 3> QT的思维导图 4> 刷2个 98 C 牛客网上的题 笔记&#xff08;后期复习补上&#xff09;

Postgresql的三种备份方式_postgresql备份

这种方式可以在数据库正在使用的时候进行完整一致的备份&#xff0c;并不阻塞其它用户对数据库的访问。它会产生一个脚本文件&#xff0c;里面包含备份开始时&#xff0c;已创建的各种数据库对象的SQL语句和每个表中的数据。可以使用数据库提供的工具pg_dumpall和pg_dump来进行…

京准:NTP卫星时钟服务器对于DeepSeek安全的重要性

京准&#xff1a;NTP卫星时钟服务器对于DeepSeek安全的重要性 京准&#xff1a;NTP卫星时钟服务器对于DeepSeek安全的重要性 在网络安全领域&#xff0c;分布式拒绝服务&#xff08;DDoS&#xff09;攻击一直是企业和网络服务商面临的重大威胁之一。随着攻击技术的不断演化…

S4 HANA (递延所得税传输)Deferred Tax Transfer - S_AC0_52000644

本文主要介绍在S4 HANA OP中S4 HANA (递延所得税传输)Deferred Tax Transfer - S_AC0_52000644的后台配置及前台操作。具体请参照如下内容&#xff1a; 目录 Deferred Tax Transfer - S_AC0_52000644 1. 后台配置 1.1 Business Transaction Events激活- FIBF 2. 前台操作 …

Redis --- 使用GEO实现经纬度距离计算

什么是GEO&#xff1f; Spring Boot 项目中可以通过 Spring Data Redis 来使用 Redis GEO 功能&#xff0c;主要通过 RedisTemplate 和 GeoOperations 接口来操作地理位置数据。 Service public class GeoService {Autowiredprivate RedisTemplate<String, Object> red…