[TOC] #### 前言 --- VSCode 下載地址: [https://code.visualstudio.com](https://code.visualstudio.com) 本文記錄我使用過的比較好用的插件，持續(xù)更新 只記錄插件名稱及簡單介紹，不記錄具體用法，部分插件的用法會單獨寫文章記錄 #### 常規(guī)插件 --- | 插件 | 描述 | 文章 | | ------------ | ------------ | ------------ | | [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) | 根據(jù)編程活動自動生成指標、見解和時間跟蹤 | | | [string-master](https://marketplace.visualstudio.com/items?itemName=tfgzs.string-master) | 字符串轉(zhuǎn)換工具 | | | [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) | 突出顯示尾部空格，并可以快速將其刪除 | | | [Template String Converter](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter) | 模板字符串轉(zhuǎn)換 | | | [Dyno File Utils](https://marketplace.visualstudio.com/items?itemName=dyno-nguyen.vscode-dynofileutils) | 脫離鼠標管理文件 | | | [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) | 改進錯誤、警告和其他語言診斷的突出顯示 | | | [Auto-Align](https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align) | 代碼等號對齊 | | | [path-alias](https://marketplace.visualstudio.com/items?itemName=IWANABETHATGUY.path-alias) | 解決路徑別名提示，文件跳轉(zhuǎn) | | | [Image preview](https://marketplace.visualstudio.com/items/?itemName=kisstkondoros.vscode-gutter-preview) | 在編輯器左側(cè)代碼行數(shù)的左邊預(yù)覽圖片 | | | [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) | VSCode 支持 EditorConfig 所需插件 | [使用方法](http://www.waterflosserreview.com/index/621.html) | 顏色主題 | 插件 | 描述 | | ------------ | ------------ | | [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) | Atom 標志性的 One Dark 主題，也是 VS Code 安裝最多的主題之一 | 文件圖標主題 | 插件 | 描述 | | ------------ | ------------ | | [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) | 側(cè)邊欄文件目錄圖標（強烈推薦） | | [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) | 側(cè)邊欄文件目錄圖標 | | [VSCode Great Icons](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons) | 側(cè)邊欄文件目錄圖標 | #### 插件分類 --- Git 插件 | 插件 | 描述 | 文章 | | ------------ | ------------ | ------------ | | [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) | 查看提交記錄 | | | [Git Graph](https://marketplace.visualstudio.com/items/?itemName=mhutchie.git-graph) | 圖形化顯示提交記錄 | | | [Git Project Manager](https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager) | git 項目管理插件 | | | [Git-Link](https://marketplace.visualstudio.com/items?itemName=maya.git-link) | 使用默認瀏覽器打開當前倉庫 | | | [git-commit-plugin](https://marketplace.visualstudio.com/items?itemName=redjue.git-commit-plugin) | 快速生成 Angular 團隊提交規(guī)范 | [使用方法](http://www.waterflosserreview.com/index/607.html) | PHP 插件 | 插件 | 描述 | | ------------ | ------------ | | [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) | PHP 函數(shù)、類跳轉(zhuǎn)跟蹤 | | [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker) | 快速生成 PHP 文檔注釋 | Vue 插件 | 插件 | 描述 | | ------------ | ------------ | | [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) | Vue 2 語法高亮、智能感知、格式化 | | [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) | Vue 3 語法高亮、智能感知、格式化 | | [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) | Vue 3 的 TypeScript Vue 插件 | | [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) | Vue 代碼片段，支持 Vue 2 和 Vue 3 | Uni-App 相關(guān)插件 | 插件名稱 | 描述 | | ------------ | ------------ | | uni-helper | 讓開發(fā)者在vscode中開發(fā) uni-*的體驗盡可能的好，快速生成uni-app組件| | uni-app-snippets | 支持uni-app基本能力的代碼片段，包括組件和API| | uni-app-schemas | 支持uni-app pages.json 和 manifest.json 簡單的格式校驗| 娛樂插件 | 插件 | 描述 | | ------------ | ------------ | | [Rainbow Fart](https://marketplace.visualstudio.com/items?itemName=saekiraku.rainbow-fart) | 程序員鼓勵師 (彩虹屁) | #### 待整理 --- 1. [Chinese (Simplified) (簡體中文) ](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans "Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code") 2. [Better Align - 等號對齊](https://marketplace.visualstudio.com/items?itemName=wwm.better-align "Better Align") 3. [Project Manager - 項目管理](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager "Project Manager") 4. [Live Server - 熱加載插件](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer "Live Server") 5. [Live Preview - 同步預(yù)覽插件](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server "Live Preview") 6. [Power Mode - 炫酷的打字特效](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode "Power Mode") 7. [Prettier - Code formatter - 代碼格式化](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode "Prettier - Code formatter") 8. [CSS Peek - 在 HTML 中通過 CSS id 或 class 定位](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek "CSS Peek") 9. [Polacode - 生成漂亮的代碼截圖](https://marketplace.visualstudio.com/items?itemName=pnp.polacode "Polacode") 10. [JavaScript (ES6) code snippets - ES6 語法片段](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets "JavaScript (ES6)") #### 你可能不需要的插件 --- | 插件名稱 | 描述 | | ------------ | ------------ | | [Auto Close Tag](https://marketplace.visualstudio.com/items/?itemName=formulahendry.auto-close-tag) | 自動添加閉合標簽 | | [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) | 標簽自動重命名 | | [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) | 成對括號著色 | | [Auto Import](https://marketplace.visualstudio.com/items/?itemName=steoates.autoimport) | 當文件中使用到模塊的函數(shù)、變量或其他成員時，將模塊自動導(dǎo)入文件中 | Auto Rename Tag：在我們修改某個標簽名時，它會自動將尾部的標簽同步更改，通過以下配置能達到相同效果 ``` "editor.linkedEditing": true ``` Auto Close Tag：自動添加閉合標簽，通過以下配置能達到相同效果 ``` "html.autoClosingTags": true, "javascript.autoClosingTags": true, "typescript.autoClosingTags": true ```