外贸 推广网站营销网站建设教学

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 - 代码快速运行

• 功能：支持运行多种编程语言的代码片段，支持外部终端。
• 进阶技巧：
  • 可以配置特定语言的运行命令，支持代码片段独立运行。