原文网址：VS Code--常用的插件_IT利刃出鞘的博客-CSDN博客
简介
本文介绍VS Code（Visual Studio Code）常用的插件。
插件的配置
默认情况下，插件会放到这里：C:\Users\xxx\.vscode\extensions
修改插件位置的方法
- 新建一个目录（不要放到vscode安装目录），比如：D:\software_data\vscode\extensions
- 将原插件目录的内容复制到新目录
- 修改vscode软件快捷方式：右击快捷方式=> 属性=> 快捷方式=> 修改“目标”（后边加上：--extensions-dir "D:\software_data\vscode\extensions"）（例：D:\software\vscode\Code.exe --extensions-dir "D:\software_data\vscode\extensions"
）
注意：本处只修改双击VSCode快捷方式的插件位置。右键用VSCode打开需要改注册表，这里就不改了。
编辑
| 插件 | 说明 |
| Auto Rename Tag | 修改html标签自动补全，改了首标签，尾部自动变。webstorm自带 |
| Auto Close Tag | 输入完整左标签后，结束标签将被自动插入。 |
| Auto Import | 自动导入包 |
| Bracket Select | 选择括号内的内容。关键字：bracket。快捷键：Alt+A |
| Bracket Jumper | 跳转到对应的括号。比如：左括号跳到右括号。关键字：bracket，快捷键：ctrl+alt+uparrow |
| Prettier | 默认不开启，需要手动启动：editor.formatOnSave": true。自己按保存会自动格式化。 |
| Beautify | 同Prettier十分类似，是一种出色的代码格式化扩展插件。可以用它格式化以JavaScript，JSON，CSS，Sass和HTML编写的代码。 |
| eslint | 代码检测 |
跳转
| 插件 | 说明 |
| vscode-elm-jump | 常规的代码跳转定义，按ctrl，和webstorm一样 |
| CSS Peek（也可能叫 VUE css peek） | 按ctrl可以跳转css和id定义，按ctrl，和webstorm一样。 |
| Vue - Official | vue官方插件（支持跳转等） |
| vue-helper | 类似Vue - Official |
| vscode-element-helper | 针对Element的VSCode插件 |
| 路径别名跳转 | 名字就是这个，提供关于import定义的跳转 |
显示
| 插件 | 说明 |
| 样式Material Theme | webstorm也有这样的插件，但是vscode丑好多 |
| TODO Highlight | 待办高亮 |
| Bracket Pair Colorizer 2 | 标识各种不一样的括号 |
| Image preview | 绝对路径下直接预览图片，vue文件的@就没用了 |
| Solarized Light | 太阳灯主题（浅色主题，vscode自带） |
调试
| 插件 | 说明 |
| Open in Browser | 快速在浏览器打开 |
| Debugger for Chrome | 直接在VS Code中进行测试和调试代码 |
| JavaScript (ES6) code snippets | ES6 语法的 JavaScript 代码片段 |
包
| 插件 | 说明 |
| Code Runner | 自动检测packjson文件执行npm命令。webstrom自带 |
| NPM | 帮助管理依赖包的。有助于管理Package.json，当生产环境依赖包未安装时会发出警告，并确保安装的版本正确 |
| Live Sass Compiler | 它可以将SASS /SCSS文件实时编译为CSS文件，并在浏览器中展示已编译样式的实时预览 |
版本管理
| 插件 | 说明 |
| GitLens — Git supercharged | 可以查看git所有提交记录，并且代码上面自动有提示 |
其他
| 插件 | 说明 |
| Project Manager | 多项目管理 |
| Live Server | 开启一个本地开发服务器，为静态网页和动态网页提供服务。使用编辑器中的go-live按钮，开发者可以立即把代码放到服务器上，该扩展插件还支持实时刷新页面 |