VS Code 30個推薦套件(外掛)分享 (2022年7月更新)

線上版的VS Code可以看這篇:

Github 新功能!直接在網頁瀏覽器上使用VS Code (VS Code線上版)


首先當然是繁體中文套件

Chinese (Traditional) Language Pack for Visual Studio Code - Visual Studio Marketplace


好看的git分支

Git Graph - Visual Studio Marketplace


Settings Sync VS Code設定檔同步工具

Settings Sync



Markdown 語法標記

Markdown Preview Github Styling - Visual Studio Marketplace


紀錄coding時間,支援多種IDE

WakaTime - Visual Studio Marketplace

一個星期寫了快80個小時的程式


程式碼自動補全,在輸入程式時提示的內容增加 AI 判斷的提示程式碼,在不支援的檔案格式很難用,但支援的檔案格式就還不錯,因人而異

Tabnine Autocomplete AI: JavaScript, Python, TypeScript, PHP, Go, Java, Ruby, C/C++, HTML/CSS, C#, Rust, SQL, Bash, Kotlin, React - Visual Studio Marketplace


自動補全網頁閉合語法

Auto Close Tag - Visual Studio Marketplace


快速網頁server

Live Server - Visual Studio Marketplace


使用不同的顏色區分空白和 tab ,快速辨識程式碼區塊,推薦

indent-rainbow - Visual Studio Marketplace


intellij主題背景

WebStorm Darcula Theme - Visual Studio Marketplace


替換側邊檔案總管中的小圖示 (icon)

vscode-icons - Visual Studio Marketplace


IntelliJ 快捷鍵,習慣 JetBrains 相關的產品嗎?使用他們家的快捷鍵,不用重新訓練肌肉記憶

IntelliJ IDEA Keybindings - Visual Studio Marketplace


可以拿來畫流程圖、循序圖等等的工具

DotUML - Visual Studio Marketplace


和上一款一樣,也是畫圖的工具

Draw.io Integration - Visual Studio Marketplace


JavaScript Debugger,用於在 Node.js 和 chrome 上面除錯

如果是要在 Firefox上除錯的話就要安裝這個套件

Debugger for Firefox - Visual Studio Marketplace



在discord上告訴大家你在寫程式,他會自動修改你 Discord 帳號上面的狀態

Discord Presence - Visual Studio Marketplace



美美的程式碼截圖工具

邊框、顏色等等都可以調整,分享給妹子必備(?...

CodeSnap - Visual Studio Marketplace



寫前端必備, cdnjs 快速匯入 JS 依賴

cdnjs - Visual Studio Marketplace



自動建議(提示)檔案路徑(例如:圖片、JS、CSS檔案路徑等)

AutoFileName - Visual Studio Marketplace



我的最愛列表,能夠快速跳到加入最愛的程式碼位置

favorites - Visual Studio Marketplace



可以開啟PDF,Word,Excel,Svg等檔案格式(除非沒有office,不然不推薦)

Office Viewer - Visual Studio Marketplace


自動產生單元測試的套件
目前僅支援TypeScript, JavaScriptPython
Ponicode
讓 VSCode 看起來像是 Office 的主題套件
利用Markdown語法製作簡報

提到Markdown就一定要裝這個,依照規則格式化文件,減少其他閱讀軟體無法正確解圖Markdown的問題

PDF Viewer
就是支援閱讀PDF的套件

訓練程式碼打字速度的工具


Google Search
在右鍵選單新增Google搜尋按鈕和快捷鍵
可以快速開啟網頁瀏覽器搜尋不懂的程式碼和錯誤訊息:)
可以直接新增、管理 Github Gist的工具,拿來做筆記和分享程式碼都非常方便

開啟後居然還自動幫我安裝語言的相關套件
(看來我該好好整理我以前的Gist了)

簡易的 API 測試工具,此作者目的就是輕度使用可以取代Postman,還有簡易的自動測試

自動重新命名 HTML Tag,編輯其中一邊的標籤時,他相對的另一個會一起更新

適用於JavaScript和TypeScript的重構輔助套件
撰文當下具有32種重構的功能,例如提取常數、for 轉換為 forEach、快速Try...Catch等
可以在作者發布的這篇文章中看到詳細介紹  



歡迎補充~~~

留言