[TOC] #### 前言 --- VSCode 下载地址: [https://code.visualstudio.com](https://code.visualstudio.com) 本文记录我使用过的比较好用的插件，持续更新 只记录插件名称及简单介绍，不记录具体用法，部分插件的用法会单独写文章记录 #### 常规插件 --- | 插件 | 描述 | 文章 | | ------------ | ------------ | ------------ | | [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) | 根据编程活动自动生成指标、见解和时间跟踪 | | | [string-master](https://marketplace.visualstudio.com/items?itemName=tfgzs.string-master) | 字符串转换工具 | | | [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) | 突出显示尾部空格，并可以快速将其删除 | | | [Template String Converter](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter) | 模板字符串转换 | | | [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) | 解决路径别名提示，文件跳转 | | | [Image preview](https://marketplace.visualstudio.com/items/?itemName=kisstkondoros.vscode-gutter-preview) | 在编辑器左侧代码行数的左边预览图片 | | | [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) | VSCode 支持 EditorConfig 所需插件 | [使用方法](https://www.itqaq.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) | 侧边栏文件目录图标（强烈推荐） | | [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) | 侧边栏文件目录图标 | | [VSCode Great Icons](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons) | 侧边栏文件目录图标 | #### 插件分类 --- 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 团队提交规范 | [使用方法](https://www.itqaq.com/index/607.html) | PHP 插件 | 插件 | 描述 | | ------------ | ------------ | | [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) | PHP 函数、类跳转跟踪 | | [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 相关插件 | 插件名称 | 描述 | | ------------ | ------------ | | uni-helper | 让开发者在vscode中开发 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 - 同步预览插件](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) | 当文件中使用到模块的函数、变量或其他成员时，将模块自动导入文件中 | Auto Rename Tag：在我们修改某个标签名时，它会自动将尾部的标签同步更改，通过以下配置能达到相同效果 ``` "editor.linkedEditing": true ``` Auto Close Tag：自动添加闭合标签，通过以下配置能达到相同效果 ``` "html.autoClosingTags": true, "javascript.autoClosingTags": true, "typescript.autoClosingTags": true ```