VS Code中JavaScript环境搭建配置全过程
一，环境
- Windows 11 家庭中文版，64 位操作系统, 基于 x64 的处理器
- VS Code 版本: 1.83.1 (user setup)
- Node.js 版本：20.9.0
二，为什么搭建JavaScript环境
因为在看《重构改善既有代码的设计第2版》的时候，书中的代码展示范例都是基于JavaScript的，我也从未涉及过JavaScript这门编程语言。为了让理论与实践并进，必须从零开始学一下JavaScript基本语法，因为书中范例要求极少使用JavaScript任何复杂的特性，所以我只要对该编程语言有粗浅的了解就行，毕竟我是学C++的。
首当其冲便是先配置好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、然后根据操作系统选择下载相应的安装程序：
- 对于 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环境配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript拖拽效果延伸的学习，关于拖拽延伸出来的一些效果，感兴趣的朋友可以参考一下2016-04-04
javascript去除字符串中所有标点符号和提取纯文本的正则
这篇文章主要介绍了javascript去除字符串中所有标点符号和提取纯文本的正则,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了Nuxt.js 实战集锦,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
firefox事件处理之自动查找event的函数（用于onclick=foo()）
在ie中，事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发的，还是其他事件， 都会更新window.event 对象。2010-08-08
在本篇文章里小编给大家整理了一篇关于js数组forEach实例用法详解内容，有需要的朋友们可以跟着学习参考下。2021-10-10
这篇文章主要介绍了JavaScript实现汉字转换为拼音及缩写的方法,结合实例形式分析了javascript数组遍历、转换实现汉字转拼音相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了Openlayers3实现车辆轨迹回放功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
在离开页面时判断是否有未保存的输入值,然后进行提醒，接下来介绍实现步骤，感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了JavaScript函数节流概念与用法,结合实例形式详细分析了JavaScript函数节流的概念、功能,并分析了函数节流的用法与使用技巧,需要的朋友可以参考下2016-06-06![JavaScript中document.forms[0]与getElementByName区别](//img.jbzj.com/images/xgimg/bcimg9.png)
JavaScript中document.forms[0]与getElementByName区别
在很多情况下JavaScript中document.forms[0]与getElementByName这两种用法没有区别，这片文章详细的解释了两者的区别和用法，有兴趣的朋友可以参考一下。2015-01-01
![JavaScript中document.forms[0]与getElementByName区别](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论