以下的这些插件都有使用过,可取对自己编码有用的选择安装。
🧠 智能补全 / 提示类插件
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
语句中非常有用)。
6. Node.js Modules IntelliSense
为 Node.js 原生模块(如
fs
,path
)或第三方模块提供自动提示。
7. Alias(别名路径跳转)
结合 webpack/vite 配置,为
@/components/...
这类路径提供跳转和提示功能。
40. Code Spell Checker
检查代码单词是否拼写错误。
44. Tailwind CSS IntelliSense
tailwindcss 提示插件。
🧹 代码质量 / 格式化 / 清理
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
报错信息直接展示在代码后面。
🎨 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 上的文件图标插件。
💡 代码功能增强
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
,在侧边栏统一显示,便于管理待办事项。
27. Live Preview / Live Server
提供一个本地服务器预览 HTML 页面,支持自动刷新(适合纯 HTML/CSS 项目)。
28. Debugger for Chrome
在 VSCode 中调试前端页面(HTML/JS/Vue/React)时与 Chrome 浏览器联调。
56. Hungry Delete
智能删除插件,自动删除无用空格。
🔧 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。
🌐 语言支持 / 本地化
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
在本地快速开启一个网络请求服务。