用Visual Studio Code创建JavaScript运行环境【2024版】

用Visual Studio Code创建JavaScript运行环境

JavaScript 的历史

JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
在这里插入图片描述

下载软件

1.可以从官网直接下载vscode,软件很小,我现在使用的是最新的1.80.1版本
2.咱们调试js需要用到浏览器,配置的插件是用Chrome浏览器,所以没有的话装一个。
3.从官网下完之后一直下一步就安装完成了

安装必要的扩展插件

1.VSCode界面很简洁安装完之后所有的功能都一目了然,我们需要安装插件可以点击如图的工具和语言:

在这里插入图片描述

2.安装以下两个插件如图:

在这里插入图片描述

### 如何在 Visual Studio Code 中运行 JavaScript 代码 #### 安装 Node.js 为了能够在本地环境中执行 JavaScript 文件,安装 Node.js 是必要的。Node.js 提供了一个服务器端的 JavaScript 运行环境,允许开发者通过命令行来运行 JS 脚本文件[^1]。 #### 创建并打开项目文件夹 启动 Visual Studio Code 后,创建一个新的文件夹用于保存所有的项目文件,并将其设置为工作区。这有助于管理不同项目的源码文件和资源[^2]。 #### 编写 JavaScript 文件 在一个新的 `.js` 文件里编写想要测试或使用的 JavaScript 代码。例如: ```javascript console.log('Hello, world!'); ``` #### 配置 Live Server 扩展(可选) 对于 HTML 和嵌入式 JavaScript 的实时预览,可以安装名为 "Live Server" 的扩展。激活此插件后,在右下角会出现一个按钮,点击它即可开启本地 HTTP 服务,自动刷新浏览器页面显示最新的更改效果[^3]。 #### 使用内置终端运行 JavaScript 文件 利用 VS Code 自带的集成终端(Integrated Terminal),可以通过输入 `node filename.js` 来快速编译并查看控制台输出的结果。这里的 `filename.js` 应替换为你实际创建的那个 JavaScript 文件名。 #### 设置调试断点 如果希望更深入地分析代码逻辑,则可以在感兴趣的语句前手动添加红色圆圈标记作为断点;随后选择左侧边栏中的 “Run and Debug”,再按下绿色播放图标开始逐步跟踪程序流程,观察变量值的变化情况以及函数调用栈的信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值