VSCode 插件
1. GitHub Copilot - AI 代码助手
- 功能:根据上下文提供实时代码补全,支持自然语言转代码,提供符合现代编程规范的建议。
- 进阶技巧:
- 使用快捷键
Alt + ]
切换多个建议。 - 写注释时,描述业务逻辑而不是具体实现。
- 使用快捷键
2. ESLint - 代码质量守护者
- 功能:自动检查代码质量,提供自定义规则、插件生态、性能优化等功能。
- 进阶技巧:
- 配置
editor.codeActionsOnSave
实现保存时自动修复代码。
- 配置
3. Prettier - 代码格式化专家
- 功能:确保代码风格一致,支持多种文件格式,Git 集成,和 ESLint 协作。
- 最佳实践:
- 在项目根目录放置 Prettier 配置文件,并在 VSCode 设置中设为默认格式化工具。
4. CSS Peek - CSS 开发利器
- 功能:快速导航到 CSS 定义,支持 SCSS、Less 等预处理器,内联预览样式。
- 进阶技巧:
- 按住
Ctrl
点击类名跳转到样式定义。
- 按住
5. Error Lens - 错误即时反馈
- 功能:将错误、警告和信息直接显示在代码行内。
- 进阶技巧:
- 支持自定义样式和配置信息显示位置。
6. Import Cost - 依赖体积可视化
- 功能:显示导入模块的大小,帮助控制打包体积。
- 进阶技巧:
- 自定义体积阈值,支持 Tree Shaking 感知。
7. REST Client - API 调试工具
- 功能:直接在 VSCode 中测试 API 请求,支持多种认证方式、环境变量和响应格式化。
- 进阶技巧:
- 通过
.http
文件发送请求。
- 通过
8. GitLens - Git 增强工具
- 功能:增强 VSCode Git 功能,支持行历史追踪、分支对比、责任追踪等。
- 进阶技巧:
- 可视化 Git 命令集成和代码块修改历史。
9. Path Intellisense - 路径自动补全
- 功能:智能路径补全,支持 Webpack、TypeScript 等路径别名,自动导入功能。
- 进阶技巧:
- 根据目录结构提供补全建议。
10. Live Server - 本地开发服务器
- 功能:提供热重载的本地开发服务器,支持自定义端口、HTTPS 和代理配置。
- 进阶技巧:
- 使用保存文件时自动刷新浏览器。
11. Quokka.js - 实时执行环境
- 功能:实时执行 JavaScript/TypeScript 代码,显示变量的实时值,支持历史回溯。
- 进阶技巧:
- 跟踪代码覆盖率,实时查看执行结果。
12. Tabnine - AI 代码补全
- 功能:提供 AI 编码建议,支持所有主流语言,能从团队代码库学习。
- 进阶技巧:
- 支持离线模式,减少资源占用。
13. Project Manager - 项目管理器
- 功能:帮助管理多个项目,支持按组织、标签分类,快速切换项目。
- 进阶技巧:
- 自动检测 Git 仓库和远程项目支持。
14. Code Runner - 代码快速运行
- 功能:支持运行多种编程语言的代码片段,支持外部终端。
- 进阶技巧:
- 可以配置特定语言的运行命令,支持代码片段独立运行。