目录

 

一. 下载扩展包(15个）

二. 创建案例

 1.新建一个文件夹

2.在VSCode中打开文件夹

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扩展提供了以下核心功能：

1. 语法高亮：为.vue单文件组件提供语法高亮显示，区分模板、脚本和样式部分1

2. 智能代码补全：在模板部分提供Vue指令、组件和属性的智能补全

3. 错误检查：实时检测Vue模板中的语法错误和潜在问题

4. 格式化支持：支持对Vue单文件组件进行格式化

5. 代码片段：提供常用Vue代码结构的快捷片段

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

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

主要功能

1. 复制文件/文件夹：你可以通过命令面板（Ctrl + Shift + P）输入 “File Utils: Copy File” 或 “File Utils: Copy Folder” 来复制文件或文件夹。

2. 移动文件/文件夹：使用命令面板找到 “File Utils: Move File” 或 “File Utils: Move Folder” 来快速移动指定的文件或文件夹。

3. 重命名文件/文件夹：调用 “File Utils: Rename File” 或 “File Utils: Rename Folder” 命令可以快速重命名。

4. 删除文件/文件夹：你可以使用 “File Utils: Delete File” 或 “File Utils: Delete Folder” 来删除选定的文件或文件夹。

5. 创建新文件/文件夹：在命令面板中，输入 “File Utils: Create File” 或 “File Utils: Create Folder”，并按照提示输入名称和路径来创建新文件或文件夹。

13.IntelliJ IDEA Keybindings 

IntelliJ IDEA Keybindings 扩展是为了帮助习惯于 IntelliJ IDEA 的开发者更快地适应 VSCode。它通过将 IntelliJ IDEA 的快捷键映射到 VSCode 中，为用户提供类似的使用体验。 

14. MarsCode AI: Coding Assistant

MarsCode AI: Coding Assistant 扩展是一个基于人工智能的编码助手，可以帮助开发者提高编码效率，提供代码建议、自动补全、调试支持等功能。 

15.TONGYI Lingma

TONGYI Lingma是阿里云的人工智能的编码助手 

二. 创建案例

 1.新建一个文件夹

在自己的电脑上创建一个文件夹，文件夹随便放哪都可以。

2.在VSCode中打开文件夹

打开之后选择信任（这是无可置疑的）

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

4.运行方式

写一段代码，然后点击鼠标右键，选择Open with Live Server

结果为：