跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端

VS Code 运行前端代码教程

如何使用 Visual Studio Code 编写和运行前端代码。主要步骤包括安装 VS Code 及 Open In Browser 插件、创建项目文件夹、新建 HTML 文件并使用 Emmet 语法快速生成模板。此外还简要提及了 Vue 项目的运行方式,需配合 Vue CLI 脚手架使用。

LinuxPan发布于 2026/4/6更新于 2026/9/1293 浏览
VS Code 运行前端代码教程

VS Code 运行 HTML 文件

一、安装 VS Code 配置插件

推荐使用 Open In Browser 插件。

[图片:VS Code 插件安装界面]

二、在电脑上新建文件夹

VS Code 需要在本地打开一个文件夹。先在电脑上新建一个文件夹,然后在 VS Code 中选择【文件】→【打开文件夹】。

[图片:打开文件夹操作]

右键选择【新建文件夹】以做好文件分类。

[图片:新建文件夹操作]

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

右键新建文件,命名如 index.html。html 文件图标会显示为 <>。

[图片:新建 html 文件]

四、运行.html 文件

在编辑器中输入 html:5 并回车,大部分代码写在 body 标签下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <!-- 内容 -->
</body>
</html>

VS Code 支持自动保存功能。

[图片:自动保存设置]

VS Code 运行 VUE 代码

运行 Vue 项目通常需要使用 Vue CLI 脚手架工具进行初始化。可查阅相关 Vue CLI 官方文档获取详细步骤。

目录

  1. VS Code 运行 HTML 文件
  2. 一、安装 VS Code 配置插件
  3. 二、在电脑上新建文件夹
  4. 三、新建文件【名字.html】
  5. 四、运行.html 文件
  6. VS Code 运行 VUE 代码

更多推荐文章

查看全部
  • SpringBoot 开启 Gzip 压缩的两种方式:GeoJSON 数据优化
  • 基于 Vue 的仿肯德基外卖 App 实战项目
  • Antigravity 配置指南:打造类 VS Code 的 AI IDE
  • DeepSeek-R1 与 Kimi-1.5 技术报告解读:大道至简的推理优化
  • 前端缓存策略详解:从 localStorage 到 Service Worker
  • Web 转移动端:网页打包成 APP 与 Uni-App 小程序低成本部署方案
  • 语音识别中的语言模型:N-gram 与平滑算法详解
  • 网络安全入门核心知识体系与学习路径指南
  • 火山引擎 API 与 GLM-4.6V-Flash-WEB 本地部署成本对比
  • VSCode 禁用 GitHub Copilot 功能设置指南
  • PHP 低代码流程建模的 5 个致命误区与优化实践
  • Llama-2-7b在昇腾NPU上的六大核心场景性能基准
  • 无人机 RemoteID 合规方案:ArduRemoteID 开源实现指南
  • 灵感画廊实战:用梦境描述替代 Prompt 提升 AI 绘画质感
  • LLM Agent 之互联网冲浪智能体:主流数据集与评估方案综述
  • VS Code 中 GitHub Copilot 核心功能与实战入门
  • AI-Goofish-Monitor:闲鱼商品智能监控与自动化分析工具
  • Java 大数据在智能家居设备联动与场景化节能中的应用
  • 利用腾讯云 HAI 与 DeepSeek 快速构建个人网页
  • 网络安全面试常见问题与解答指南

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online