知识碎片收集箱之VSCode插件（适合前端开发）

原创已于 2025-09-30 12:02:10 修改 · 1k 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vscode #ide #编辑器 #学习方法 #html

于 2025-09-29 11:41:58 首次发布

2.Auto Rename Tag（标签同步）

3.Auto Close Tag（自动补全标签）

4.Fitten Code（AI编程助手）

5.Live Sever（实时刷新）

总结

前言

每日一学，我们今天安装VSCode插件（适合前端开发）。

一、如何安装VSCode插件？

首先，我们打开VSCode，点击左侧活动栏的扩展图标（或按Ctrl+Shift+X）。在搜索框中输入插件名称，找到目标插件后点击"Install"按钮。安装完成后可能需要重启VSCode生效。

二、推荐VSCode插件

1.Chinese(界面汉化)

将 VSCode 的菜单、命令、按钮、提示信息等界面元素翻译为中文，对新手或英文不好的朋友比较友好，中文界面能更直观地理解功能选项，能提高操作效率。。

2.Auto Rename Tag（标签同步）

Auto Rename Tag 是 Visual Studio Code（VSCode）中一款流行的扩展插件，主要用于自动修改 HTML 或 XML 标签的名称。当用户修改一个开始标签或结束标签时，插件会自动同步更新对应的结束标签或开始标签，确保标签名称一致。

自动同步标签名称：修改<div>的开始标签为<section>时，结束标签</div> 会自动变为 </section>，无需手动修改。
支持多种语言：除 HTML 外，还支持 XML、JSX、Vue、Angular 等包含标签结构的语言。
实时响应：标签名称的修改会立即生效，无需保存文件或触发其他操作。

3.Auto Close Tag（自动补全标签）

Auto Close Tag插件是Visual Studio Code（VSCode）中一款用于简化HTML/XML标签编写的工具。其主要功能是自动补全闭合标签，提高编码效率并减少手动输入错误。

自动闭合标签：输入开标签（如<div>）后，插件会自动生成对应的闭标签（</div>），光标位于两者之间。
动态响应修改：若修改开标签名称（如将<div>改为<span>），闭标签会同步更新（</span>）。
语言支持：支持HTML、XML、JSX、Vue、PHP等包含标签结构的语言。

4.Fitten Code（AI编程助手）

Fitten Code是VSCode中的一款AI编程助手插件，旨在通过智能代码补全、生成和优化提升开发效率。其核心功能包括：

代码补全：基于上下文实时预测并补全代码片段，支持多种编程语言。
代码生成：根据自然语言描述自动生成函数、类或模块代码。
代码优化：分析现有代码并提供性能或可读性改进建议。
错误检测：识别潜在语法或逻辑错误并给出修复方案。
文档生成：自动为代码添加注释或生成API文档。

5.Live Sever（实时刷新）

Live Server是一个Visual Studio Code（VSCode）的扩展插件，主要用于提供本地开发服务器，并支持实时刷新功能。它能够显著提升前端开发效率，尤其在HTML、CSS和JavaScript文件的开发过程中。

自动刷新浏览器

当保存代码文件时，Live Server会自动刷新连接的浏览器页面，无需手动刷新。这一功能特别适合频繁修改代码的场景。
本地服务器支持

通过启动一个本地服务器（默认端口为5500），可以直接通过http://localhost:5500访问项目文件。这避免了直接打开HTML文件时因路径问题导致的资源加载错误。
热更新

仅更新修改的部分，而非完全刷新页面，有助于调试动态内容（如表单输入状态或DOM操作）。
多浏览器同步

支持在多个浏览器或设备中同步操作和实时预览，方便跨设备测试响应式设计。
自定义配置

支持通过设置修改默认端口、根目录、是否自动打开浏览器等选项，满足个性化需求。

<html>
	<head>
        <title>这是一个网页</title>
    </head>
    <body>
        <h1>
            这是一个网页
        </h1>
        <img>
        <ul>
            <li>
                <div>
                    <span></span>
                </div>
            </li>
        </ul>
    </body>
</html>