總結了下自己的 2022 的常用前端插件以及工具推薦，雖然 vscode 自帶的插件同步功能已經很齊全了，但是還是自己總結了一篇以備不時之需。原飛書文檔鏈接：2022 前端開發 vscode 常用插件及其他工具推薦
vscode 常用插件#
開發類#
GitLens — Git supercharged#
拓展了 vscode 本身集成的 Git 功能，提供了很多好東西
Auto Close Tag#
自動閉合 HTML、JSX 標籤
Auto Rename Tag#
自動 rename 標籤
change-case#
命名轉換 Ctrl+Shift+P 輸入 change case
Code Spell Checker#
代碼中的拼寫檢查
ES7 React/Redux/GraphQL/React-Native snippets#
React 代碼片段，如題如圖
Commit Message Editor#
多人協作必備，git 提交信息的編輯
ESLint#
Prettier#
指定配置文件.prettierrc.js，方便在項目中通過自己項目的 prettier 配置文件進行格式化
Why Prettier？ https://prettier.io/docs/en/why-prettier.html
Tailwind CSS IntelliSense（使用 Tailwind 推薦）#
tailwind 的自動補全，智能提示
Error Lens#
改進對錯誤、警告和其他語言診斷的突出顯示。
CSS Modules#
CSS module 模式必備
px to rem & rpx & vw (cssrem)#
顧名思義，方便的進行單位轉換
Template String Converter#
在字符串中輸入 ${後自動將其變為模板字符串
TabOut#
也是用習慣了就回不去的插件，按 Tab 跳出括號
vscode-styled-components（使用 styled-components 推薦）#
Highlight Matching Tag#
顧名思義，高亮標籤插件
Live Server#
比較經典的插件了：https://juejin.cn/post/7006338919767736357
Dev Containers （docker 開發適用）#
打開 docker 容器內的文件，用 docker 開發的都說好
輔助類#
Code Runner#
這個想必不用多說，右上小三角運行代碼
Image Gallery#
看圖片資源贼好用，推薦一手
Image preview#
圖片鏈接預覽 不必多說的好用
Project Manager#
vscode 的項目管理器，一鍵切換項目
Todo Tree#
顧名思義 展示項目中註釋的 TODO 在哪，只需要 TODO 自動就會高亮
Comment Translate#
註釋翻譯，如圖
Live Share#
多人協同，共同編輯，共享終端：https://juejin.cn/post/6844903603182764039
實用工具類#
Bookmarks#
vscode 的書籤
Typora#
用的是 Vditor 作為 vscode 的 markdown 編輯器相當好用，但有時候會與 git 衝突需要禁用。
:emojisense:#
方便的輸入 emoj 表情
CodeTour#
閱讀源碼時適用
vscode-pdf#
vscode 中看 pdf 文件
Office Viewer(Markdown Editor)#
pdf 都能看了看 office 文件當然也有插件，這個跟 typora 插件一樣集成 Vditor 可以寫 md 文件
CodeSnap#
選中代碼並生成漂亮的截圖（適合秀代碼）
Draw.io Integration#
後綴名為.drawio 的文件可以繪製流程圖等，適合寫技術文檔，無需多言
外觀改善類#
One Dark Pro#
Atom 的標誌性 One Dark 主題，也是 VS Code 安裝最多的 主題之一！
vscode-icons#
改進 vscode 的文件圖標，終於看著舒服多了
自動補全 / 智能提示類#
GitHub Copilot#
大名鼎鼎的自動補全
Tabnine AI#
雖不及 Copilot 但也有不錯的自動補全，勝在免費不用申請？（
Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more#
自動分析代碼生成註釋，適合懶得寫文檔的
Parameter Hints#
函數參數智能提示，不過用多了就會覺得有點干擾。
刷題類#
Quokka.js#
實時打印 js 輸出，適合刷題。
Competitive Programming Helper (cph)#
適合競賽同學、acm（當然也適合刷面試算法題就是了，不過語言是 c++。
algorithm#
適合力扣刷題
工具推薦#
瀏覽器插件#
截圖 & gif 工具#
- Snipaste 截圖工具，用過都說好：https://www.snipaste.com/
- ScreenToGif 顧名思義，錄製 gif 的好東西 ：https://www.screentogif.com/
- OBS 大名鼎鼎的視頻錄製和直播推流工具，dddd： https://obsproject.com/
實用工具#
- Everything 快快快快速搜索文件，dddd https://www.voidtools.com/zh-cn/downloads/
待補充#
... 如有推薦的插件可以評論