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 ： 一款很精美的文件圖標主題