VS Code 折腾记 - (16) 推荐一波实用的插件集

前言

VS Code越来越完善了，这半年期间我又搜罗了一波个人认为比较实用的插件。

插件集

前端领域

• Dependency Analytics ：分析项目中npm模块依赖，给出了很直观的数据反馈（包是否有安全问题等）
• Gitmoji Commit ：预设emoji的模板输入,快速commit
• Xml Complete ：XML智能补全,遵循类似协议的也可以
• BEM Helper ：css BEM方式创建类名(辅助工具）
• JavaScript Code Snippet ：装了这个，可以不装另外通用 js snippet 了，支持语言很全面
• Umi Pro ：提供 umi js 框架的智能提示，包括补全，跳转，引用查看
• React Hooks Snippets ：React 内置 Hooks 几个 snippet
• perfect-css-modules ： css module 的体验加成，悬浮提示，智能提示，引用跳转
• CSS Navigation ：获取CSS的定义(跳转或者悬浮），支持 HTML/JSX/TSX ,及类名这些的智能提示，非常棒
• VSCode React Refactor ：可以很方便对React组件代码进行重构
• fabulous ：可视化编辑 css, scss, js, jsx ,tsx 文件的样式，很方便！
• Angular Inject Service ：服务注入智能提示补全
• Browser Preview ：真正强大的网页预览(走内置非外部浏览器),支持断点调试
• Copilot for VS Code ：非常直观的展示梳理状态容器数据树，前端小伙伴必装
• ReactION ：实时预览react组件
• Highlight Matching Tag ：标签匹配高亮，支持 jsx，html 及主流的 vue,ng
• changelog ：悬浮可以查看安装包在github发布changelog的相关信息
• Better package.json : 可以直观看到当前安装版本和期望看到的版本隔了多少版本
• Color Manager :一个很酷炫的颜色管理插件，很强大
• Intelli Refactor : 提供类似 JetBrain 的快速代码重构功能
• NestJs Snippets : NG 即视感的 NodeJS 框架，常用的都说好！！

编辑

• Dotfiles Syntax HighlightingPreview ：常见隐藏文件语法高亮，挺实用的。
  
• File Brace Expansion ：可以根据后缀名快速创建多个文件，很实用
• auto-header ：一个小巧可配置的文件头部注入，用着感觉挺好
• License Header Manager ：快速生成自定义格式的协议内容，特别适合用于开源项目的
• Syntax Highlighter ：加强语法高亮，用过才知道！
• Code Time ：记录你的编程时间,摸鱼！！！
• Task Explorer ：全局任务管理器，支持多种任务脚本的识别
• TabNine ：基于深度学习训练模型打造的智能提示，很实用，准确率挺高
• Pomodoro : 没有花里胡哨，最实用的番茄倒计时，在编辑内配合 zen 模式，完美

Git

• Git Graph ：图形化 git log ，还支持代码对比这些
• Git File History ：动态的查看文件git的历史记录，比如代码区域的变动！很炫！

正则

• RegExp Preview and Editor ：正则可视化解析匹配过程
• any-rule :快速查看且引用常用的正则,很实用
  

主题

• Dainty :很不错的一款主题,提供亮色和暗色调
• 2077 Theme ：对比度比较高的暗调主题，用着感觉挺好
• Universe ：一款比较柔和的暗色调主题，很喜欢。
• Umi ：很柔和的一款主题
• Min Theme ：很不错的双色调主题风格
• Snazzy Plus ：很不错的一款暗色调主题，内置几个风格
• Hypersubatomic ：高对比的主题风格，很漂亮
• VSCode Great Icons ： 一款很精美的文件图标主题