VSCode配置html运行环境

怎么又下雨了.

已于 2025-03-24 18:21:00 修改

阅读量2.3k

点赞数 32

文章标签： vscode 编辑器 html

于 2025-03-24 18:14:01 首次发布

本文链接：https://blog.csdn.net/qq_38683187/article/details/146477169

版权

3. 创建一个文件，将文件名的后面加上后缀 .html 就可以了

4.运行方式

一. 下载扩展包(15个）

这里有15个有助于写html的插件，最后两个插件是AI模型，不论是html还是其他高级语言，都能用到。

1. Chinese (Simplified) (简体中文) Language

适用于VS Code的中文（简体）语言包。安装完毕之后，点击右下角的“Change Language and Restart”按钮，重新启动服务。

2. Auto Rename Tag

自动重命名标签

示例：

假如你有如下的html代码：


<div>
    <p>Hello World</p>
</div>

当你修改 <div> 标签为 <section> 时，</div> 标签会自动变为 </section>。
同样，如果你修改 </section> 为 </article>，<section> 也会自动变为 <article>

3. HTML CSS Support

它为HTML文件中的CSS类名和 id 提供智能提示和自动补全功能。

4. JavaScript (ES6) code snippets

它是一个内置的代码片段扩展，它提供了一系列常用的ES6语法片段，帮助你快速生成代码。在JavaScript文件中，输入特定的前缀，然后按 Tab 键，VSCode会自动生成对应的代码片段。

5. Mithril Emmet

在Mithril.js文件中，你可以使用Emmet的缩写语法来快速生成Mithril组件。

示例：

假设你正在编写一个Mithril组件，你可以使用Emmet的缩写语法来快速生成HTML结构。

打开一个JavaScript文件（例如 app.js）。
输入以下Emmet缩写：

m("div.container>ul.list>li.item*3", "Item")

按下 Tab 键，Emmet会自动将其扩展为：

m("div.container", [
    m("ul.list", [
        m("li.item", "Item"),
        m("li.item", "Item"),
        m("li.item", "Item")
    ])
])

6.Path Intellisense

自动补全文件路径：

当你在代码中开始输入文件路径时，比如在 JSX 或 CSS 文件中，Path Intellisense 会自动推荐匹配的文件和目录。
例如，输入 import Something from './ 后，它会显示当前目录下的所有文件和文件夹

7. Vue 3 Snippets

Vue 3 Snippets 是一个专门为 Vue 3 开发者设计的代码片段扩展，可以快速生成 Vue 3 的常见代码结构（如组件模板、Composition API 等）。

8. Auto Close Tag

用于在编写 HTML/XML 代码时自动闭合标签，提高开发效率。

<div> → 输入后自动生成 → <div></div>

9. open in browser

使用 Open in Browser 扩展可以快速在默认浏览器中打开 HTML 文件

10. Live Server

快速启动一个本地开发服务器，并具有实时重载功能，非常适合前端开发工作

11.Vue - Official

Vue - Official扩展是VSCode中为Vue.js开发者提供的官方支持工具，它极大地提升了Vue项目的开发体验。

Vue - Official扩展提供了以下核心功能：

语法高亮：为.vue单文件组件提供语法高亮显示，区分模板、脚本和样式部分1
智能代码补全：在模板部分提供Vue指令、组件和属性的智能补全
错误检查：实时检测Vue模板中的语法错误和潜在问题
格式化支持：支持对Vue单文件组件进行格式化
代码片段：提供常用Vue代码结构的快捷片段

12. File Utils（可以选择是否下载）

File Utils 是一个非常实用的扩展，可以帮助你更方便地管理文件和文件夹。

主要功能

复制文件/文件夹：你可以通过命令面板（Ctrl + Shift + P）输入 “File Utils: Copy File” 或 “File Utils: Copy Folder” 来复制文件或文件夹。
移动文件/文件夹：使用命令面板找到 “File Utils: Move File” 或 “File Utils: Move Folder” 来快速移动指定的文件或文件夹。
重命名文件/文件夹：调用 “File Utils: Rename File” 或 “File Utils: Rename Folder” 命令可以快速重命名。
删除文件/文件夹：你可以使用 “File Utils: Delete File” 或 “File Utils: Delete Folder” 来删除选定的文件或文件夹。
创建新文件/文件夹：在命令面板中，输入 “File Utils: Create File” 或 “File Utils: Create Folder”，并按照提示输入名称和路径来创建新文件或文件夹。