[TOC] #### 前言 --- VSCode 下載地址: [https://code.visualstudio.com](https://code.visualstudio.com) 本文記錄我使用過的比較好用的插件，持續(xù)更新 只記錄插件名稱及簡(jiǎn)單介紹，不記錄具體用法，部分插件的用法會(huì)單獨(dú)寫文章記錄 #### 常規(guī)插件 --- | 插件 | 描述 | 文章 | | ------------ | ------------ | ------------ | | [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) | 根據(jù)編程活動(dòng)自動(dòng)生成指標(biāo)、見解和時(shí)間跟蹤 | | | [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) | 脫離鼠標(biāo)管理文件 | | | [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) | 改進(jìn)錯(cuò)誤、警告和其他語言診斷的突出顯示 | | | [Auto-Align](https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align) | 代碼等號(hào)對(duì)齊 | | | [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://m.waterflosserreview.com/index/621.html) | 顏色主題 | 插件 | 描述 | | ------------ | ------------ | | [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) | Atom 標(biāo)志性的 One Dark 主題，也是 VS Code 安裝最多的主題之一 | 文件圖標(biāo)主題 | 插件 | 描述 | | ------------ | ------------ | | [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) | 側(cè)邊欄文件目錄圖標(biāo)（強(qiáng)烈推薦） | | [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) | 側(cè)邊欄文件目錄圖標(biāo) | | [VSCode Great Icons](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons) | 側(cè)邊欄文件目錄圖標(biāo) | #### 插件分類 --- 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 項(xiàng)目管理插件 | | | [Git-Link](https://marketplace.visualstudio.com/items?itemName=maya.git-link) | 使用默認(rèn)瀏覽器打開當(dāng)前倉(cāng)庫 | | | [git-commit-plugin](https://marketplace.visualstudio.com/items?itemName=redjue.git-commit-plugin) | 快速生成 Angular 團(tuán)隊(duì)提交規(guī)范 | [使用方法](http://m.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-*的體驗(yàn)盡可能的好，快速生成uni-app組件| | uni-app-snippets | 支持uni-app基本能力的代碼片段，包括組件和API| | uni-app-schemas | 支持uni-app pages.json 和 manifest.json 簡(jiǎn)單的格式校驗(yàn)| 娛樂插件 | 插件 | 描述 | | ------------ | ------------ | | [Rainbow Fart](https://marketplace.visualstudio.com/items?itemName=saekiraku.rainbow-fart) | 程序員鼓勵(lì)師 (彩虹屁) | #### 待整理 --- 1. [Chinese (Simplified) (簡(jiǎn)體中文) ](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans "Chinese (Simplified) (簡(jiǎn)體中文) Language Pack for Visual Studio Code") 2. [Better Align - 等號(hào)對(duì)齊](https://marketplace.visualstudio.com/items?itemName=wwm.better-align "Better Align") 3. [Project Manager - 項(xiàng)目管理](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) | 自動(dòng)添加閉合標(biāo)簽 | | [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) | 標(biāo)簽自動(dòng)重命名 | | [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) | 成對(duì)括號(hào)著色 | | [Auto Import](https://marketplace.visualstudio.com/items/?itemName=steoates.autoimport) | 當(dāng)文件中使用到模塊的函數(shù)、變量或其他成員時(shí)，將模塊自動(dòng)導(dǎo)入文件中 | Auto Rename Tag：在我們修改某個(gè)標(biāo)簽名時(shí)，它會(huì)自動(dòng)將尾部的標(biāo)簽同步更改，通過以下配置能達(dá)到相同效果 ``` "editor.linkedEditing": true ``` Auto Close Tag：自動(dòng)添加閉合標(biāo)簽，通過以下配置能達(dá)到相同效果 ``` "html.autoClosingTags": true, "javascript.autoClosingTags": true, "typescript.autoClosingTags": true ```