VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统，还支持 JavaScript、TypeScript 和 Node.js 等开发语言。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。
好了，废话不多话，下面开始进入正题！
接下来，我来详细给大伙介绍下那些年我们没有使用过的高效实用的 VsCode 插件。
通用
Chinese
功能：用于将 VsCode 提供本地化界面汉化成中文简体。
嘿嘿嘿！大家不要激动！！第一个插件功能也是很强的，对于英语不好的同学来说，绝对是福音呢，天天盯着一堆英文，完全一脸懵。有了这个插件后，后面的代码开发成功了一半。（英语好的大佬除外🤣🤣🤣）
下面就来正式分享一些实用性和使用率高的插件。
indent-rainbow
功能：这个插件主要是通过交替使用不同的颜色来区分代码的缩进程度，如下图。
Bracket Pair Colorizer 2
功能：这个插件目前官网显示已弃用，停止更新了，但是这款插件依旧好用，主要功能：通过不同颜色来匹配相对应的括号。当代码量很大且需要调式时，这个插件绝对可以说是救世主。用户可以定义要匹配的标记以及要使用的颜色。
Auto Rename Tag
功能：当重命名成对出现的 HTML/XML 标签时，重命名一个开始标签，同时会自动重命名配对的结束标签。
Auto Close Tag
功能：和上述插件功能类似，具有自动闭合标签的功能。
Color Highlight
功能：用于给我们代码中的颜色进行高亮展示的插件
Color Info
功能：查看颜色详细信息的插件，可以小窗口显示颜色值
Highlight Matching Tag
功能：突出显示匹配的开始和/或结束标签。
vscode-pigments
功能：实时预览设置的颜色
Trailing Spaces
功能：允许突出显示在每行代码中尾随的空格，然后判断是否手动删除它们，还挺实用的。
Todo Tree
功能：快速搜索您的工作区以查找 TODO 和 FIXME 等注释标签，并将它们显示在活动栏中的树视图中。可以将视图从活动栏拖到资源管理器窗格中（或您希望的任何其他位置）。
Peacock
功能：当你在多个工作区进行开发时，这个插件可以显示已经切换过的工作区以及当前所处的工作区。
运行
Code Runner
功能：运行多种语言的代码片段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、C# 脚本、C# (.NET Core)、TypeScript、Swift、Julia、 SCSS, Sass, Less和自定义命令
Live Server
功能：为静态和动态页面启动具有实时重新加载功能的本地开发服务器。
open in browser
功能：可以使用默认程序打开任何类型的文件，而不仅仅是 html 文件
输出
Turbo Console Log
功能：通过自动化编写有意义的日志消息的操作使调试变得更加容易。
- 选择或悬停作为调试主题的变量（手动选择将始终接管悬停选择）
- 按 ctrl + alt + L (Windows) 或 ctrl + option + L (Mac)
Quokka.js
功能：Quokka.js 是用于快速 JavaScript / TypeScript 原型设计的开发人员生产力工具。当您键入时，运行时值会更新并显示在您的代码旁边的 IDE 中。文档说明
Wallaby.js
功能：Wallaby.js 是一种开发人员生产力工具，可在您键入时立即运行 JavaScript 和 TypeScript 测试，并在代码旁边突出显示 IDE 中的结果。
路径
别名路径跳转
功能：别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表，使用方法：鼠标移动到路径上，按住
ctrl并单击就会跳转
配置项可以写入settings.json中，来扩展插件的能力
// 别名路径跳转
"alias-skip.mappings": {
"@": "/src",
"assets": "/src/assets",
"api": "/src/api",
"common": "/src/common",
"views": "/src/views",
"store": "/src/store"
},
// 导入路径时，可以省略以下后缀名
"alias-skip.allowedsuffix": ["js", "vue", "jsx", "ts"] // 默认选项
path-alias
功能：一个提供路径别名补全，跳转,重构,函数自动引入，函数signature help 的vscode 插件，使用详情请点击👆🏻链接。
Path Intellisense
功能：自动完成文件名的 Visual Studio Code 插件。
注释
Document This
功能：可以自动为 TypeScript 和 JavaScript 文件生成详细的 JSDoc 注释。通过
/**+enter键或者连续两次Crtl + Alt + D快速生成注释
koroFileHeader
功能：用于一键生成文件头部注释并自动更新最后编辑人和编辑时间、函数注释自动生成和参数提取。
Better Comments
功能：帮助您在代码中创建更人性化的注释。使用详情请点击👆🏻链接。
主题
Dracula Official
功能：一个 Visual Studio Code 的深色主题，更多详情可以点击👆🏻链接。
One Dark Pro
功能：Atom 标志性的 One Dark 主题，也是 VsCode 安装最多的主题之一, 更多详情可以点击👆🏻链接。
Material Theme
功能：VsCode 安装最多的主题之一,** 更多详情可以点击👆🏻链接**
Community Material Theme
功能：VsCode 安装最多的主题之一, 更多详情可以点击👆🏻链接
Icons
Material Theme Icons
功能：VsCode 安装最多的 icon 之一, 更多详情可以点击👆🏻链接
vscode-icons
功能：VsCode 安装最多的 icon 之一, 更多详情可以点击👆🏻链接
VSCode Great Icons
功能：VsCode 安装最多的 icon 之一, 更多详情可以点击👆🏻链接
Power Mode
功能：要说花里胡哨的应该就是这个插件了，各种花式特效，让你撸代码的过程中不再单调， 更多详情可以点击👆🏻链接
配置项
"powermode.enabled": true, // 开启 Power Mode
"powermode.shakeIntensity": 0, // 关闭抖动（喜欢的也可以选择不关闭）
"powermode.presets": "particles", // 特效预设，还有 "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"
代码
vue-component
功能：使用说明可以点击👆🏻链接
1.模板中输入组件名称自动提示找到的组件（详见设置说明），勾选后自动输入组件名称（包含必填属性）、导入语句、组件属性（如果有需要）。
2.移动到组件标签名称时按
Ctrl，点击标签名称可鼠标跳转到组件文件。3.鼠标悬浮到组件标签，提示组件属性和事件。
4.标签内输入
p-提示属性，输入e-提示事件，后自动输入。
Vetur
功能：Vue 开发必备插件，官方文档：Vetur
volar
功能：Vue 语言功能是为 Vue、Vitepress 和 petite-vue 构建的语言支持扩展。
Vue Volar extension Pack
功能：一个使用 volar 扩展的 vue 项目包，使用说明可以点击👆🏻链接
Vue 3 Snippets
功能：用于将 Vue2 Snippets 和 Vue3 Snippets 添加到 Visual Studio Code 中。包含大量 Vue2 及最新 Vue3 的 API。
Vue VSCode Snippets
功能：支持 Vue2 和 Vue3
React Style Helper
功能：在JSX中更容易编写样式，在 CSS、LESS、SASS 等样式文件中提供强大的辅助开发功能。对 React 和Rax友好。支持：
- 自动完成
- 转到定义
- 创建 JSX/TSX 内联 CSS 样式
- 预览样式和变量值
- 自动导入 CSS 模块文件
ES7+ React/Redux/React-Native/JS snippets
功能：React 框架开发必备插件，ES7+ 中的 JavaScript 和 React/Redux 片段，带有用于 VS Code的 Babel 插件功能
vscode-styled-components
功能：JavaScript 和 TypeScript 中样式化组件的语法高亮显示。使用样式字符串时的详细 CSS IntelliSense。
HTML Snippets
功能：为 VS Code 的 HTML 标记添加了丰富的语言支持
Jest Snippets
功能：Visual Studio Code 的 Jest 片段扩展。
JavaScript (ES6) Code Snippets
功能：如果你是一名 JavaScript 开发人员，它能帮助你快速构建新项目并节省大量时间。由于它为许多通用的 JavaScript 函数提供了预定义的代码片段，所以你再不需要手动输入所有代码。此外，这个插件对对 TypeScript，React，Vue 和 HTML 都提供支持。
Git
Git Graph
功能：Visual Studio Code 的 Git Graph 扩展查看存储库的 Git 图表，并从图表轻松执行 Git 操作。可配置为您想要的方式！
Git History
功能：右键单击文件选择 Git：View File History 来以列表的形式查看所有的提交记录，帮助你迅速查看 Git 历史记录，图形化的页面，使 Git 历史一目了然。
GitLens
功能：GitLens 增强了VS Code 中的 Git，并解锁了每个存储库中未开发的知识。 它可以帮助您通过 Git 责备注释和 CodeLens直观地可视化代码作者， 无缝导航和探索Git 存储库，通过丰富的可视化和强大的比较命令获得有价值的见解等等。
其他
Rainbow Fart
功能：在你编码时不断给你赞美，它将检查代码中的关键字以播放相关声音。
啵啵助写
功能; bobo 翻译引擎配置很简单，默认翻译引擎是Google，当然，你也可以设置Baidu翻译引擎，这里需要配置
appid和scretkey。
A-super-translate
功能：使用 Google Translate API 翻译 VSCode 的编程语言的注释。使用方法：选中行，Alt+Shift+p 输入 翻译。
- 键入 Alt+ 再按下 Alt+1 为翻译直接替换选中区域
- 键入 Alt+ 再按下 Alt+2 为切换翻译语言
- 识别代码中注释部分，不干扰阅读。支持不同语言，单行、多行注释 !
- 支持用户字符串与变量翻译,支持驼峰拆分 !
- 选择区域翻译 - 划词翻译 !
- 翻译并替换选择内容 !
- 选中最后一次翻译区域命令 !
LeetCode
功能：在
VsCode中刷算法题
Code Spell Checker
功能：一个基本的拼写检查器，适用于 camelCase 代码。检查单词拼写是否错误（支持英语），这个拼写检查器的目标是帮助捕捉常见的拼写错误，同时保持低误报的数量。
Tabnine
功能：Tabnine 是一款 AI 代码助手，可让您成为更好的开发人员。Tabnine 将通过所有最流行的编码语言和 IDE 的实时代码完成来提高您的开发速度。无论您将其称为IntelliSense、intelliCode、自动完成、人工智能辅助代码完成、人工智能驱动的代码完成、人工智能副驾驶、人工智能代码片段、代码建议、代码预测、代码提示还是内容辅助，使用 Tabnine 都会极大地影响您的编码速度，显着减少您的编码时间。
Codelf
功能：搜索来自 Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project、GitLab 的项目，以查找真实世界的使用变量名称。
Svg Preview
功能：实时编辑 svg 文件和 svg 的内部文件
Image preview
功能：当引入路径为图片时，可以预览当前图片，预览代码中图片的引用，鼠标移上去就会有小窗展示图片。
Template String Converter
功能：模板字符串转换器
"${"此扩展在键入时将字符串转换为模板字符串。
Parameter Hints
功能：提示函数的参数类型及消息，显示被调用函数的参数名称
ESLint
功能：代码规范检查，如果您是 ESLint 新手，请查看文档。该扩展使用安装在打开的工作区文件夹中的 ESLint 库。如果该文件夹没有提供一个，则扩展程序会查找全局安装版本。如果您尚未在本地或全局安装 ESLint，请
npm install eslint在工作区文件夹中运行以进行本地安装或npm install -g eslint全局安装。
Prettier
功能：使用
ctrl/command + ,打开 setting.json 文件，按照上面配置后，保存时会自动格式化。这个插件通常搭配eslint使用，也可以单独使用。在根目录下新建.prettierrc.json文件，在里面书写自己想要的格式就行了。
{
...
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // js文件用prettier格式化
},
"prettier.jsxSingleQuote": true, // jsx中用但引号
"prettier.semi": false, // 不要分号
"prettier.singleQuote": true, // 使用单引号
"prettier.printWidth": 120, // 超过120自动换行
"editor.formatOnSave": true // 保存自动格式化
}
Project Manager
功能：可以帮助您轻松访问您的项目，无论它们位于何处。不要再错过那些重要的项目。
htmltagwrap
功能：将您的选择包装在 HTML 标记中。可以包装内联选择和跨越多行的选择（同时适用于单个选择和多个选择）。要使用，请选择一个或多个代码块，然后按 Alt + W（Mac 为 Option + W）。
Partial Diff
功能：您可以比较（差异）文件内、不同文件或剪贴板中的文本选择。
Postcode
功能：可用于创建和测试简单和复杂的 HTTP 请求以及查看响应。
CSS Peek
Npm Intellisense
功能：在 import 语句中自动完成 npm 模块的 Visual Studio Code 插件。
Settings Sync
功能：可以同步
VsCode配置的插件
Paste JSON as Code
功能：可以使用它一键生成类，不必手动编写类代码，因而节省了时间。支持大多数流行的语言。
Search node_modules
功能：可以让你快速浏览 node modules 目录中的文件。
Rest Client
功能：可以让你直接在 VSCode 中发出 HTTP 请求并查看响应，无需在两个应用程序之间切换。
相关链接
VsCode 官方文档地址： code.visualstudio.com/docs
VsCode 官方插件市场： marketplace.visualstudio.com/VSCode
温馨提示
今天的分享就到这里，有需要的小伙伴按需取用（😬）。
PS：插件安装会影响电脑性能哦，电脑配置高，当我没说！！🤡🤡🤡！
