随着前端开发技术的不断发展，HTML和JavaScript成为了最基础而重要的组成部分。为了高效进行开发，许多开发者选择使用Visual Studio Code（简称VSCode）作为他们的集成开发环境（IDE）。本文将详细介绍如何在VSCode中运行HTML和JavaScript代码。
环境准备
在开始之前，首先需要确保你的计算机上已经安装了VSCode。如果尚未安装，可以前往VSCode的官方网站下载安装包并按照提示完成安装。此外，还需要确保你的计算机上安装了最新版本的浏览器，例如Google Chrome或Firefox，因为这些浏览器提供了良好的开发者工具。
安装VSCode
访问VSCode官网，下载适合你操作系统的版本，并根据说明进行安装。安装完成后，启动VSCode，你就可以开始你的项目了。
创建项目文件夹
打开VSCode后，可以选择“文件”->“打开文件夹”，新建一个文件夹，可以命名为你的项目名称。例如，命名为“my-web-project”。然后在这个文件夹中创建HTML和JavaScript文件。
编写HTML和JavaScript代码
接下来，我们需要在项目文件夹中创建一个HTML文件和一个JavaScript文件。可以分别命名为“index.html”和“script.js”。在index.html文件中，我们需要引入script.js文件。
创建index.html
在“my-web-project”文件夹中，右键点击并选择“新建文件”，输入“index.html”。然后在文件中输入以下内容：
我的网页
欢迎来到我的网页！
创建script.js
同样地，在“my-web-project”文件夹中，右键点击并选择“新建文件”，输入“script.js”。在这个文件中添加以下JavaScript代码：
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了！');
});
在VSCode中运行HTML和JavaScript
现在我们已经创建了基本的HTML和JavaScript文件，接下来就可以运行这些文件以便查看效果了。
使用Live Server扩展
一个方便的方式是在VSCode中使用Live Server扩展。Live Server可以在本地启动一个服务器，并在你编辑代码时自动刷新浏览器。
首先，安装Live Server扩展。在VSCode左侧的扩展视图中，搜索“Live Server”，然后点击“安装”。安装完成后，重新启动VSCode。
启动Live Server
打开index.html文件后，右键点击文件内容，选择“Open with Live Server”。这将会打开你的默认浏览器，并加载这个HTML文件。此时你会看到一个网页，其中有一个按钮。
当你点击这个按钮时，会弹出一个提示框，显示“按钮被点击了！”。这就是我们JavaScript代码的效果。
总结
在VSCode中运行HTML和JavaScript是一个简单而高效的过程。通过创建项目文件夹、编写HTML和JavaScript代码，以及使用Live Server扩展，你可以快速预览和调试你的网页应用。这个流程不仅适合初学者，也对熟练的开发者有很大的帮助。在实际开发中，掌握好这些基本技能能够显著提升开发效率。
希望本文能帮助你更好地理解如何在VSCode中运行HTML和JavaScript代码，并激励你在前端开发的道路上不断前行！