在此进行总结归类工作中用到的比较实用的、有助于提升开发效率的VSCode插件。大家有其他的好插件推荐的也欢迎留言评论区哦😄

基础增强

1. Chinese (Simplified) Language Pack: 提供中文界面。
   

2. Code Spell Checker: 检查代码中的拼写错误。
   

3. ESLint: 集成 ESLint，用于 JavaScript 代码检查。
   

4. Prettier - Code Formatter: 代码格式化工具。
   

5. Auto Rename Tag: 自动重命名 HTML/XML 标签。
   

6. JavaScript (ES6) code snippets: 提供 ES6 代码片段。
   

7. Tencent Cloud AI Code Assistant: 腾讯云 AI 代码助手是由腾讯云自研的一款开发编程提效辅助工具，基于混元代码大模型，提供技术对话、代码补全、代码诊断和优化等能力。
   

8. Vue-Official: Vue官方插件，支持.vue文件，提供代码提示、自动补全、智能感知等功能，提升Vue开发效率。。
   

9. ES7+ React/Redux/React-Native snippets: 提供ES7+语法、React组件、Redux操作和React Native代码片段，加速JS/TS开发。。
   

版本控制

1. Git Graph: Git 提交历史的图形化展示。
   

2. GitLens - Git supercharged: 增强 Git 功能，如查看文件历史等。
   

代码编辑与导航

1. Path Intellisense: 自动补全文件路径。
   

2. CSS Peek
   

3. Better Comments:增强注释显示效果，支持自定义注释颜色和样式，让代码注释更加直观易懂。
   

4. Color Highlight:高亮显示代码中的颜色值，便于识别和修改，增强代码可读性。
   

5. IntelliSense for CSS class names in HTML: 在 HTML 中智能感知 CSS 类名。
   

6. Image preview: 预览代码中引用的图片，直观显示图片效果，优化前端设计调试。
   

7. Remove Unused Imports: 自动检测并移除未使用的导入语句，保持代码整洁，提升JavaScript和TypeScript项目性能。
   

代码调试

1. JavaScript Debugger: JavaScript调试器，提供强大的调试功能，助力开发者高效定位和解决问题。。
2. Vue.js Extension Pack: 一套Vue.js开发必备扩展，集成代码提示、格式化、调试等工具，全面提升Vue开发体验。
   

性能与测试

1. Jest: 集成Jest测试框架的 VSCode 扩展，简化测试代码编写与执行，保障代码质量与稳定性。
   

项目管理与体验

1. project-tree: 自动在README.md文件中生成项目目录结构。
   
   生成的目录效果如下示例：
   

2. Code Runner: 一键运行代码片段或完整文件，支持多种编程语言，快速验证代码效果。
   

实时协作

1. Live Share: 允许团队成员实时协作编辑和调试代码。
   

其他

1. Settings Sync: 同步 VSCode 设置、插件和快捷键配置。

总结

这些插件涵盖了前端开发的多个方面，包括代码编辑、版本控制、代码质量检查、调试、测试等，可以帮助开发者提高工作效率和代码质量。大家可根据自己的具体需求和技术栈，选择最适合的插件组合。记得定期更新插件以获得最新的功能和安全修复。
小伙伴们有其他的好插件推荐也欢迎评论区留言哦😄