大家好，我是Echa。
VS Code 的誕生，給多少前端研發人員帶來了數不盡的方便，可以大大提高開發者的開發效率和代碼質量以及錯誤提醒等等，沒有編輯器的出現，估計前端開發人員又要回到原始的txt 文本 編寫前端程序了。下面小編帶著大家詳細介紹 VS Code 有哪些好玩的。
全文大綱
- VS Code 介紹
- VS Code 必備插件集合
- VS Code 前端框架插件集合
- VS Code 前端開發插件集合
- VS Code 主題與圖標插件集合
- VS Code Git 集成插件集合
- VS Code 編程美化插件集合
- VS Code 功能強化插件集合
- VS Code 數據統計插件集合
- VS Code 資料庫插件集合
- VS Code 開發效率插件集合
- VS Code 程式設計師摸魚神器插件集合
VS Code
官方網址：https://code.visualstudio.com/
VSCode（全稱：Visual Studio Code）是一款由微軟開發且跨平台的免費原始碼編輯器。
可以任意選擇Windows、Linux、macOS的不同系統對應安裝。該軟體支持語法高亮、代碼自動補全、代碼重構、查看定義功能，並且內置了命令行工具和 Git 版本控制系統。用戶可以更改主題和鍵盤快捷方式實現個性化設置，也可以通過內置的擴展程序商店安裝擴展以拓展軟體功能，VSCode 使用 Monaco Editor 作為其底層的代碼編輯器。
通過安裝一些插件可以讓這個編輯器變成一個編譯器。 VSCode支持C++、Python、Java、C#、Go等多種語言，功能強大、插件豐富並且啟動速度極快，值得每個開發人員擁有。
作為跨平台的編輯器，它是Linux系統開發中最受開發者歡迎的開發環境。
如下圖：
VS Code 必備插件集合
- Chinese 簡體中文插件包
打開VScode點擊商店搜索框內輸入chinese 出現的第一個點擊安裝（install）按鈕。
- Settings Sync（配置同步到雲端）
Settings Sync可以同步你當前的VSCode配置環境，當你需要在其它的電腦工作時，您不用重頭再來一遍。新機器登錄一下就搞定了。再也不用折騰環境了。
大致原理：使用GitHub Gist來同步多台計算機上的設置，代碼段，主題，文件圖標，啟動，鍵綁定，工作區和擴展。
- wakatime（編程時間及行為跟蹤統計）
VS Code 前端框架插件
- ES7+ React/Redux/react-native snippets
該插件提供了許多速記前綴來加速開發並幫助開發人員為 React、Redux、GraphQL 和 React Native 創建代碼片段和語法。
- VSCode React Refactor
這是一個專門為 React 開發人員設計的 VS Code 擴展。在處理大型項目時，重構可能很有挑戰性。可以使用 VSCode React Refactor 快速重構代碼，它會將 JSX 代碼片段提取到新的類、組件中。此外，它還支持 TypeScript、TSX、常規函數、類和箭頭函數。
- Simple React Snippets
該插件提供了一組精心挑選的 React 代碼片段，可以通過輸入幾個字母輕鬆地將其添加到代碼中。例如，輸入 imr 會將 React 導入到組件中。
- Typescript React Code Snippets
此插件包含了使用 Typescript 的 React 代碼片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等語言。以下是使用 TypeScript 創建 React 組件的兩個片段。
- Vue Language Features (Volar)
volar 是專門為 Vue 3 構建的語言支持插件。它基於 @vue/reactivity 按需計算一切，實現原生 TypeScript 語言服務級別的性能。
隨著 Vue 3 + TypeScript 越來越流行，Vetur（Vue 的官方 VS Code 擴展）開始出現問題，例如，將 Vue 與 TypeScript 一起使用時 CPU 使用率過高，或者不支持 Vue 3 的新 <script setup> 語法。而 Volar 就解決了 Vetur 的問題，並為 Vue 3 + TypeScript 用戶提供了最佳的開發體驗。它為 Vue 3 提供完整的語言支持，包括標準的單文件組件 (SFC) 語法及其最新添加的 <script setup>。
- Vue 3 Snippets
這個插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 對應的代碼片段。
- Vue VSCode Snippets
此插件將 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。
- React Native Tools
React Native Tools 擴展由 Microsoft 團隊構建，它為 React Native 項目提供了一個開發環境。該插件允許在不同的模擬器或仿真器上輕鬆運行和調試代碼，從命令面板快速運行 react-native 命令，而無需在終端中手動運行命令，並使用 IntelliSense 瀏覽 React Native 的函數、對象和參數等。
- JavaScript (ES6) code snippets
JavaScript (ES6) code snippets 擴展工具有多個代碼片段，可生成ES6代碼片段，比如鍵入clg然後回車，可以得到一個console.log。初次用它的人可能都不太熟練，但多用幾次，熟悉了所有的代碼片段，就能快速打出ES6代碼。
VS Code 前端開發插件集合
- npm Intellisense
該插件為 import 語句中的 npm 模塊提供了自動完成功能。npm 模塊的所有導入都會使用此擴展自動處理。
- Turbo Console Log
快速添加 console.log 信息，js debug 必備
快捷鍵
ctrl + alt + l 選中變量之後，使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log
- CSS-auto-prefix
- CSS Peek
使用該插件，可以直接從 HTML 和 JavaScript 文件快速導航和編輯外部樣式表中定義的 CSS 樣式。它提供了一個「Peek」功能，在 HTML 中選擇某個 class 或者 id 名稱按住Ctrl鍵+滑鼠左鍵可以直接定位到該名稱的CSS的位置。
該插件有利於處理大型或複雜的 CSS 樣式表，因為它可以快速查找和編輯應用於特定元素的樣式，而無需瀏覽多個文件或搜索大量代碼。
VS Code 主題與圖標插件集合
- One Dark Pro
- Dracula Official
- GitHub Theme
- Winter Is Coming Theme
- Night Owl
- Monokai Pro
- One Monokai
- Shades of Purple
- Ayu
- vscode-icons
VSCode 官方出品的圖標庫。
- Material Icon Theme
該插件根據最新的 Material Design 主題為文件和文件夾提供圖標。它可以幫助我們識別文件並為編輯器添加自定義的外觀。
- Material Theme
集成了多種主題皮膚，搭配 Material Icon Theme 食用更佳
VS Code Git 集成插件集合
- GitHub Pull requests（ 查看和管理GitHub拉取請求和問題）
在Visual Studio Code中查看和管理GitHub拉取請求和問題
- GitLens
該插件增強了 VS Code 中的 Git，並從每個存儲庫中釋放隱藏數據。可以快速查看代碼的編寫者、輕鬆導航和探索 Git 存儲庫、通過豐富的可視化效果和強大的比較命令獲取有效信息，以及執行更多操作，幫助我們更好地理解代碼。
- Git History
該插件用於查看 Git 日誌和文件歷史記錄並比較分支或提交。
- Git Graph
Git Graph 插件用於可視化查看存儲庫的 Git 操作，並從圖形中輕鬆執行Git操作。
VS Code 編程美化插件集合
- Bracket Pair Colorizer
給匹配的括號上色，可以自定義配置
注意：該插件已經內置到 vscode，不用重複安裝，
設置方法：setting 里搜索 editor.bracketPairColorization.enabled，設置為
true 即刻生效
- Highlight Matching Tag
突出顯示匹配的開始和/或結束標籤
官方支持的標記：HTML和JSX。其他樣式（XML，Vue，Angular，PHP）也可以使用，但不能保證正常使用。
當有很多 HTML 標籤時，有時很難將結束標籤定位到對應的開始標籤，反之亦然。使用該插件，單擊開始標籤時，會看到結束標籤帶有下劃線。此外，它還會突出顯示代碼樹中的開始和結束標籤。如果需要，可以自定義樣式以使下劃線更加突出。
除此之外，該插件還有一些方便的命令，因此當單擊標籤時，可以使用ctrl + shift + P打開命令面板並搜索「Highlight Matching Tag」，會看到兩個可以在項目中使用的命令。
- Markdown Preview Enhanced
- Image Preview
通過此插件，當滑鼠懸浮在圖片的連結上時，可以實時預覽該圖片，除此之外，還可以看到圖片的大小和解析度。
- TODO Highlight
如果想在將代碼發布到生產環境之前提醒自己注意事項或代碼中未完成的事情，TODO Highlight VS Code 插件會非常有用。該插件會在代碼注釋中突出顯示某些關鍵字，如 FIXME: 和 TODO: 以提醒注意事項或尚未完成的事情。
除此之外，使用快捷鍵 ctrl + shift + P 打開命令面板並搜索 Todo Highlight 選擇 List the Highlighted annotations，然後選擇 All 以列出在所有文件中留下的所有突出顯示的注釋。
- Better comments
該插件對不同類型的注釋會附加了不同的顏色，更加方便區分，幫助我們在代碼中創建更人性化的注釋。
- Colorize
Colorize 會給顏色代碼增加一個當前匹配代碼顏色的背景。它通過 CSS 變量、預處理器變量、hsl/hsla 顏色、跨瀏覽器顏色、exa、rgb、rgba和argb的彩色背景將 CSS 顏色可視化，幫助開發者快速區分顏色。
- CodeSnap
CodeSnap 用於對代碼的進行截圖和共享。屏幕截圖可以用文本或形狀進行注釋，並通過連結共享或包含在網站或文檔中。只需使用 ctrl + shift + P 並輸入 CodeSnap，然後按回車鍵，CodeSnap 窗口就會打開。
- Error Lens
Error Lens 是一款把代碼檢查(錯誤、警告、語法問題)進行突出顯示的插件。Error Lens 通過使診斷更加突出，增強了語言的診斷功能，突出顯示了由該語言生成的診斷所在的整行，並在代碼行的位置以行方式在線列印了診斷消息。
VS Code 功能強化插件集合
- Polacode
代碼截圖
- Duplicate Action
開發時我們可以能會遇到需要複製文件（組件）的情況，默認情況下，必須右鍵單擊該文件，然後單擊複製。右鍵單擊要將文件複製到的文件夾，然後單擊粘貼。再次右鍵單擊該文件並重命名。
使用該插件，當右鍵單擊文件時，將看到一個新的「Duplicate file or directory」選項。單擊它，輸入文件的新名稱，然後按回車鍵即可。
- npm Intellisense
該插件為 import 語句中的 npm 模塊提供了自動完成功能。npm 模塊的所有導入都會使用此擴展自動處理。
- Path intellisense
該插件用於自動補全文件名。當 import 其它文件時，能夠對文件進行提示，快速補全要引入的文件名。
- Auto Rename Tag
使用該插件，可以再重命名一個 HTML 標籤時，自動重命名 HTML 標籤的開始和結束標籤。避免只修改了開始標籤，而忘記修改結束標籤。該擴展適用於 HTML、XML、PHP 和 JavaScript。
- Auto Close Tag
通常想要使用一個特定的 HTML 元素時，需要輸入開始標籤和結束標籤。使用該插件後，只需要輸入開始標籤，它就會自動添加結束標籤。對於 Vue 開發人員來說，它還支持自定義類型名稱。當輸入自定義組件的開始標籤時，它會自動添加結束標籤。
- CSS Peek
使用該插件，可以直接從 HTML 和 JavaScript 文件快速導航和編輯外部樣式表中定義的 CSS 樣式。它提供了一個「Peek」功能，在 HTML 中選擇某個 class 或者 id 名稱按住Ctrl鍵+滑鼠左鍵可以直接定位到該名稱的CSS的位置。
該插件有利於處理大型或複雜的 CSS 樣式表，因為它可以快速查找和編輯應用於特定元素的樣式，而無需瀏覽多個文件或搜索大量代碼。
- Regex Previewer
Regex Previewer 用於測試正則表達式。在編寫正則表達式時，可以直接使用快捷鍵 Ctrl+Alt+M （windows）或者 ⌥+⌘+M（Mac）在編輯器右側啟動一個標籤頁，可以在這個標籤頁寫一些正則表達式測試用例，寫完之後，點擊正則表達式上方的 Test Regex...，這時右側標籤頁匹配到字符就會高亮顯示：
- Code Spell Checker
Code Spell Checker 插件可以檢查單詞拼寫是否出現錯誤，檢查的規則遵循 camelCase （駝峰拼寫法）。
VS Code 數據統計插件集合
- Sort lines
對當前文本排序
- Data Preview
- Import Cost
在項目中導入多個包時可能會出現性能問題，Import Cost 就用於查看將特定庫導入項目的成本。該插件會顯示導入庫的大小，如果大小為綠色，則表示庫很小，而紅色表示庫很大。
- Time Master
從編程活動中自動生成的指標、見解和時間跟蹤。它是一個開源項目，獨立於網絡環境，安全輕量。
- VS Code Counter
VS Code Counter 插件用於統計項目代碼的行數，安裝插件之後，右鍵點擊需要統計代碼的文件夾，選擇「Count lines in directory」，這時就會在項目根目錄出現一個名為 .VSCodeCounter 的文件夾，包含了不同格式的結果，編輯器會打開其中的的 .md 格式。結果中會顯示代碼總行數，不同格式文件行數，不同路徑文件函數等。代碼行數中有純代碼行數、空白行數、注釋行數。
VS Code 資料庫插件集合
- Oracle Developer Tools for VS Code
Oracle 資料庫支持
- SQL Server (mssql)
Microsoft SQL Server 資料庫支持
- MySQL
支持 MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, Redis, and ElasticSearch
- MongoDB for VS Code
MongoDB 資料庫支持
VS Code 開發效率插件集合
- EditorConfig for VS Code
代碼風格統一
- change-case
更改命名風格
- Codelf
給變量起名的神器
- Prettier - Code formatter
自動格式化代碼
- vscode-json
操作美化 json
快捷鍵
- cmd+alt+v，驗證
- cmd+alt+b，格式化
- cmd+alt+u，壓縮
- cmd+alt+'，加轉義字符
- cmd+alt+;，去轉義字符
- Regex Previewer
預覽正則表達式效果
程式設計師摸魚神器插件集合
- LeetCode
刷題利器
- VSC Netease Music
網易雲音樂（程式設計師版）
- daily anime
追番神器
更多的摸魚神器請見：程式設計師摸魚神器大全
最後
一台電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;
一 個靈感,一段程序,推動科技進步,促進社會發展。
創作不易，喜歡的老鐵們加個關注，點個讚，打個賞，後面會不定期更新乾貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。