企业官网建设流程全解析

以下的这些插件都有使用过，可取对自己编码有用的选择安装。

🧠 智能补全 / 提示类插件

1.Auto Import

在编码时选择有对应导入包的选项，自动为 JS/TS 文件中的使用项补全并添加 import 声明，极大提高开发效率。

2.Iconify IntelliSense

提供 Iconify 图标库（如 Material、Carbon、FontAwesome 等）的图标名称自动补全，适合在 Vue/React 中使用图标。

3.JavaScript (ES7+) code snippets

快速输入常用 ES7/React/Redux 的代码片段，如useEffect、rcc、useState等。

4.Vue 3 Snippets

提供 Vue 3 的 Composition API 代码片段，极大提升开发效率（如setup、ref、watch等快捷键）。

5.Path IntelliSense

自动补全文件路径（import语句中非常有用）。并且实现按住 command 路径跳转到对应文件。

6.Node.js Modules IntelliSense

为 Node.js 原生模块（如fs,path）或第三方模块提供自动提示。

7.Alias（别名路径跳转）

结合 webpack/vite 配置，为@/components/...这类路径提供跳转和提示功能。

40. Code Spell Checker

检查代码单词是否拼写错误。

44. Tailwind CSS IntelliSense

tailwindcss 提示插件。

48. :emojisense:

:emojisense: 的主要作用是——在 VS Code 中智能提示 emoji 表情的输入。在你输入冒号（:）时，提供 emoji 自动补全 功能，比如选择了:smile: 😄，它会自动插入:smile:或直接替换成表情符号 😄（取决于设置）。

49. Backticks

在 VS Code 中写模板字符串（...）时，内部语法也能被正确高亮、提示和识别。

55. Image preview

在 image 图片提供默认小图预览和 hover 大图预览。

🧹 代码质量 / 格式化 / 清理

8.ESLint

检查 JS/TS/React/Vue 等代码质量，配合.eslintrc可实现强制规范、标红错误。

9.Prettier - Code Formatter

格式化代码风格，如自动换行、缩进、引号格式等，配合 ESLint 一起使用最佳。

11.Stylelint

类似 ESLint，但用于 CSS/SCSS/LESS 等样式文件的规范和错误提示。

13.TypeScript Errors

高亮和显示 TS 报错信息，辅助调试。

41. Error Lens

报错信息直接展示在代码后面。

52. Formatting Toggle

一键开启或关闭代码自动格式化功能（Formatting）。
使用场景比如：正在修改别人旧代码，不想破坏原格式；只想局部修改一点，不希望 Prettier/Eslint 自动格式化。

🎨 UI/界面增强

14.Colorize

为 CSS/JS/HTML 中的颜色代码（如#fff、rgba、red）添加背景色直观显示。

15.Material Icon Theme

为侧边栏文件添加美观的 Material 风格图标，提高可读性。

16.One Dark Pro

Atom 风格的 One Dark 主题，深色主题中最受欢迎之一。

17.Dracula Theme

著名 Dracula 暗色主题，配色柔和，适合长时间编程。

18.vscode-icons-mac

为 mac 风格的文件夹提供美化图标。

19.Indent-Rainbow

为不同缩进级别的代码块添加不同颜色，方便阅读嵌套结构。

20.Bracket Pair Colorizer

高亮匹配的括号对（如{},[],()），不同层级不同颜色。

45. vscode-icons-mac

vscode 在 mac 上的文件图标插件。

50. Better Comments

默认情况下，VS Code 中的注释（// ... 或 /* ... */）都是单一颜色的，比如灰色。但在实际开发中，我们会写很多不同语义的注释：TODO（待办事项）、FIXME（需要修复）、WARNING（警告）、 QUESTION（问题）、 !、*、NOTE等等，这些都混在一起时，根本看不出重点。 Better Comments 会根据关键字或符号，自动给注释加上不同的颜色高亮。

51. colorize

为 css 颜色设置加上可视化背景，在编译器中直观看到设置颜色。

59. Symbols

文件图标主题

60. VSCode Great Icons

文件图标。

62. Markdown Preview Enhanced

增强 markdown ，支持实时同步滚动，刷新，目录查看。

💡 代码功能增强

21.Auto Close Tag

自动补全 HTML/Vue/JSX 标签的闭合（输入<div>自动补全</div>）。

22.Auto Rename Tag

修改 HTML/Vue/JSX 的标签名时自动同步闭合标签名。

23.CSS Peek

在 HTML 或 Vue 中，按住Ctrl + 点击 class可跳转到对应 CSS 定义位置。

24.i18n Ally

多语言文件（如zh.json,en.json）管理工具，支持翻译键提示、缺失高亮、自动提取。

25.Image Preview

悬浮在 HTML 或 CSS 中的图片链接上可预览图片，适用于静态资源。

26.Todo Tree

提取所有注释中的// TODO、// FIXME，在侧边栏统一显示，便于管理待办事项。

26. TODO Highlight

TODO 高亮。

27.Live Preview / Live Server

提供一个本地服务器预览 HTML 页面，支持自动刷新（适合纯 HTML/CSS 项目）。

28.Debugger for Chrome

在 VSCode 中调试前端页面（HTML/JS/Vue/React）时与 Chrome 浏览器联调。

46. Hungry Delete

智能删除插件，自动删除无用空格。

47. Turbo Console Log

快捷打印插件。

选中变量 →Ctrl+Alt+L（Win）/ Option+Control+L（Mac）。
立刻出现带文件名、行号、函数名的日志：console.log('🚀 file:api.ts ~ line:42 ~ token', token);
还有其他强大的功能可以自行尝试。

我习惯于把行号和文件名都打印出来，便于调试。

56. TypeScript Toolbox

TypeScript Toolbox 是一组提高 TypeScript 编写效率的小工具合集，
提供类型转换、接口生成、类型预览、复制等便捷操作。

57. Remove Unused Imports

移除未使用的 import 导入。

58. Pretty TypeScript Errors

美化（简化）TypeScript 报错信息。

60. Local History

文件本地历史记录。

🔧 Vue/前端专属插件

29.Vue - Official (官方)

Vue 3 项目中替代 Vetur 的官方推荐插件，支持语法提示、类型推断、错误检查等。

30. **Vue Language Features **

Vue 官方维护的语言工具插件，Vue 2/3 都支持，但推荐配合 Volar 使用。

31.Tailwind CSS IntelliSense

对 Tailwind CSS 类名进行自动补全、语义提示、错误检查，非常适合实用派开发者。

🔌 Git / 云端协作

32.GitLens

强大的 Git 增强工具：查看每行代码的提交者、历史、对比变更、Blame、提交详情等。

34.GitHub Repositories

允许你打开远程 GitHub 仓库代码进行浏览、编辑，不需要 clone 到本地。

35.Remote Repositories

与 GitHub Repositories 类似，支持浏览任意远程仓库，无需本地 clone。

53. Git Graph

在 VS Code 内直接以**图形化界面（Graph）**显示 Git 提交历史、分支、合并关系，
并支持执行各种 Git 操作（提交、切换分支、合并、rebase、查看 diff、push/pull 等）。

54. gitignore

从一些现成的 github库 中拉取 gitignore 文件模板。

57. LeetCode with labuladong

labuladong 的力扣刷题插件。

🌐 语言支持 / 本地化

36.Chinese (Simplified) Language Pack

将 VS Code 界面翻译成简体中文。

🧪 环境辅助工具

37.dotenv

为.env文件提供高亮、语法支持，常用于环境变量管理。

38.npm Intellisense

自动提示node_modules中的包名，适用于导入模块时自动补全。

🧷 工具增强类

39.Local History

每次保存文件自动备份一个版本（在.history中），可快速回退历史版本。

42. Numbered Bookmarks

书签，便于快速找到代码。

43. REST Client

在本地快速开启一个网络请求服务。

55. Code Runner

运行各种语言的代码文件。

56. Database Client

可视化数据库。