2024年你必须知道的20个VSCode神级插件

HTML CSS Class Completion：写 class="" 时，自动提示项目中已有的 CSS 类名（需配合已加载的样式文件），对 Tailwind 或传统 CSS 都友好。

TypeScript & JS 开发增强

ES7+ React/Redux/GraphQL/React-Native Snippets：输入 rfc 回车生成函数组件模板，useEffect、useState 等也都有快捷前缀，支持 .ts/.tsx/.jsx 文件开箱即用。

IntelliCode：不是简单补全，而是根据上下文把最可能的方法排在顶部（带 ⭐️ 标识）。比如写 arr. 后，map/filter/find 会优先出现，而不是按字母排序的 allKeys。

To TS Type：粘贴一段 JSON（比如后端 Swagger 返回体），按 Ctrl+Alt+T（Mac 是 Cmd+Alt+T），直接生成 TypeScript interface 或 type，字段类型推断准确，嵌套数组、对象全支持。

TypeScript Importer：敲 const x: MyType =，光标停在 MyType 上按 Ctrl+Space，自动列出项目中所有可导入的类型，并一键插入 import 语句。

代码质量与规范落地

Prettier：保存时自动格式化 JS/TS/JSON/HTML/CSS/MD，支持单引号、分号、括号风格等全量配置。搭配 ESLint 使用更佳，VSCode 设置里开启 “Format On Save” 即可。

ESLint：实时标出语法错误、潜在 bug 和风格问题（如未使用的变量、箭头函数返回值隐式 return）。推荐配合 eslint-config-prettier 关闭与 Prettier 冲突的规则。

Onu

将脚本转换为内部工具，不需要前端代码。

下载

TODO Highlight：把 // TODO、// FIXME、// HACK 这类注释高亮显示（默认黄色背景+黑字），还能自定义颜色和关键词，避免遗漏待办事项。

Error Lens：把 ESLint、TypeScript 报错直接“挂”在对应行末尾，不用 hover 或看底部面板，一眼定位问题位置。

工程效率与日常提频

GitLens：点击任意一行代码，立刻看到是谁、什么时候、为什么改了这一行（blame 信息）。还能图形化查看分支差异、提交历史、未推送变更，比原生 Git 面板强太多。

Path Intellisense：import './utils/Tab' 时，自动提示当前目录及子目录下的文件，支持相对路径和别名路径（如 @/components/）。

Image Preview：鼠标悬停在图片路径上（如 src="./logo.png"），右侧弹出缩略图；也可以按 Ctrl+Click 直接预览大图，不用切 Finder 或资源管理器。

Fileheader：新建 .js/.ts/.vue 文件时，自动插入作者、创建时间、描述等头部注释；保存时还能自动更新最后修改时间，团队规范刚需。

Code Spell Checker：检查变量名、注释、字符串里的拼写错误（比如 consloe.log），支持中文、英文词典切换，误报率低，禁用特定单词也很方便。

基本上就这些。不复杂但容易忽略——比如 Bracket Pair Colorizer 其实已内置（只需开启 editor.bracketPairColorization.enabled），而 Quokka.js 虽强大，但对多数业务项目属于“锦上添花”。选插件的核心原则是：解决你每天重复三次以上的问题，其余的，先放着。