VS Code 运行前端代码教程

VS Code 运行 HTML 文件

一、安装 VS Code 及配置插件

VS Code 是一款优秀的代码编辑器，配合 Open in Browser 插件即可方便地预览网页。

二、在电脑上新建文件夹

VS Code 基于文件夹工作。先在电脑上新建一个文件夹，然后在 VS Code 中选择【文件】→【打开文件夹】，定位到该文件夹。

建议在该文件夹内再次右键新建子文件夹，用于分类管理文件。

三、新建文件【名字.html】

在文件夹内右键新建文件，命名为 index.html 或其他名称。HTML 文件图标通常会显示为 < >。

四、运行.html 文件

在编辑器中输入 html:5 并回车，可快速生成 HTML5 基础结构，大部分业务代码写在 body 标签下。

启用自动保存功能，使用插件运行文件即可在浏览器中预览效果。

VS Code 运行 Vue 代码

对于 Vue 项目，建议使用 Vue-cli 脚手架进行初始化，具体配置可参考相关文档。