【配置环境】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.hqwc.cn/news/154911.html

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

相关文章

概念解析 | 雷达动态范围

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:雷达动态范围。 揭开雷达动态范围的神秘面纱 雷达动态范围是描述雷达系统性能的一个重要指标,它直接影响着雷达的检测能力。但是这个指标又比较抽象,对于非专业人员来说不太容易…

Apache ActiveMQ (版本 < 5.18.3) (CNVD-2023-69477)RCE修复方案/缓解方案

一、漏洞描述 Apache ActiveMQ 是美国阿帕奇&#xff08;Apache&#xff09;基金会的一套开源的消息中间件&#xff0c;它支持 Java 消息服务、集群、Spring Framework 等。 二、漏洞成因 ActiveMQ 默认开放了 61616 端口用于接收 OpenWire 协议消息&#xff0c;由于针对异常…

图纸管理制度《七》

1、目的&#xff1a; 明确技术图样与文件的签署、更改及标准化等内容&#xff0c;对技术图样与文件进行有效的控制。技术文化是公司的核心秘密&#xff0c;是公司能够持续发展并在市场上保持强势竞争力的有力保障&#xff0c;公司的技术文件属于公司所有&#xff0c;公司的每一…

当在本地,向服务器发送信息时,服务器接受信息返回给客户端,此时采用多行读取时,客户端接收不到Server的信息

public class SocketTCP04Server {public static void main(String[] args) throws IOException {ServerSocket serverSocket new ServerSocket(9999);System.out.println("Server&#xff1a;"serverSocket.getClass());System.out.println("正在等待用户连接.…

1.8 网络安全模型

思维导图&#xff1a; 1.8 网络安全模型笔记&#xff1a; 网络安全模型核心概念: 消息在Internet上从发送方传送至接收方&#xff0c;涉及到源地址、目的地址、通信协议&#xff08;如TCP/IP&#xff09;的使用。信息交换的双方需要合作保证交换的可靠性。 安全技术核心组成…

大模型问答助手前端实现打字机效果 | 京东云技术团队

1. 背景 随着现代技术的快速发展&#xff0c;即时交互变得越来越重要。用户不仅希望获取信息&#xff0c;而且希望以更直观和实时的方式体验它。这在聊天应用程序和其他实时通信工具中尤为明显&#xff0c;用户习惯看到对方正在输入的提示。 ChatGPT&#xff0c;作为 OpenAI …

如何将word格式的文档转换成markdown格式的文档

如何将word格式的文档转换成markdown格式的文档 前言 A. 介绍Markdown和Word格式文档 什么是Markdown&#xff1f; Markdown是一种轻量级标记语言&#xff0c;旨在简化文本格式化和排版的过程。它以纯文本形式编写&#xff0c;通过使用简单的标记语法&#xff0c;使文档更具…

redis-集群切片

切片集群 我曾遇到过这么一个需求&#xff1a;要用 Redis 保存 5000 万个键值对&#xff0c;每个键值对大约是 512B&#xff0c;为了能快速部署并对外提供服务&#xff0c;我们采用云主机来运行 Redis 实例&#xff0c;那么&#xff0c;该如何选择云主机的内存容量呢&#xff…

原生算力解码数字经济 ,HPE Compute Scale-up Server 3200 全程护航!

2023年 10月27日— 慧与&#xff08;HPE&#xff09;、紫光股份旗下新华三集团以及30多家媒体就算力推动数字经济&#xff0c;以及HPE Compute Scale-up Server 3200服务器在企业关键业务中发挥的核心作用等话题展开了广泛交流。 数字化的浪潮中&#xff0c;算力无处不在。专为…

如何处理不稳定的自动化测试?

abluecolor 在解决这个问题之前&#xff0c;请停止编写更多测试&#xff0c;因为这将花费你较高的测试维护成本。你需要尽快行动起来对不稳定的原因进行深入研究&#xff0c;找到不稳定的根因&#xff0c;并且尝试在流程、环境和代码方面做一些优化工作解决它。 MasterKindew…

ro.board.first_api_level

初始 API 级别版本属性 某些 CTS 要求取决于设备最初搭载的版本。例如&#xff0c;如果设备最初搭载的是较低的版本&#xff0c;则不一定需要遵循适用于搭载较高版本的设备的系统要求。 为了保证 CTS 可读取到这些信息&#xff0c;设备制造商可以定义编译时属性&#xff1a;r…

开发语言工具编程系统化教程入门和初级专辑课程上线

开发语言工具编程系统化教程入门和初级专辑课程上线 学习编程捷径&#xff1a;&#xff08;不论是正在学习编程的大学生&#xff0c;还是IT人士或者是编程爱好者&#xff0c;在学习编程的过程中用正确的学习方法 可以达到事半功倍的效果。对于初学者&#xff0c;可以通过下面…