VS Code--常用的插件

原文网址：VS Code--常用的插件_IT利刃出鞘的博客-CSDN博客

简介

本文介绍VS Code（Visual Studio Code）常用的插件。

插件的配置

默认情况下，插件会放到这里：C:\Users\xxx\.vscode\extensions

修改插件位置的方法

1. 新建一个目录（不要放到vscode安装目录），比如：D:\software_data\vscode\extensions
2. 将原插件目录的内容复制到新目录
3. 修改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按钮，开发者可以立即把代码放到服务器上，该扩展插件还支持实时刷新页面