【vscode】vscode插件汇总

1. VS Code简介

• 在 Build 2015 大会上，微软宣布推出免费跨平台的 Visual Studio Code 编辑器了！
• Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作…

---

2. vscode 下载安装

进入官网下载安装 点此进入官网

---

3. 配置：

【 ctrl +, 】打开setting设置界面

1. 开启自动保存

【 ctrl +, 】打开setting设置界面，搜索Auto Save

---

2. 保存时自动格式化

• 具体操作参考：VSCode自动格式化

---

使用Tab键展开Emmet缩写

【 ctrl +, 】打开setting-扩展 -Emmet下，打开settings.json 添加配置信息：

"emmet.triggerExpansionOnTab": true

4. 插件

VSCode属于轻便型代码编辑器，可以安装一些插件来扩展它的功能，不像一些集成的大型IDE集成了很多功能，安装、使用起来比较麻烦。

• 通过点击下方图片所示或者使用快捷键ctrl+shift+x 打开扩展模块安装插件。
  

4.0 插件汇总

https://segmentfault.com/a/1190000011779959

Auto Close Tag   //自动添加HTML / XML关闭标签（必备）
Auto Rename Tag   //自动重命名配对的HTML / XML标签(必备)
Auto Complete Tag   //自动补全标签，搭配自动重命名(必备)

Beautify   //格式化javascript，JSON，CSS，Sass，和HTML,快捷键ctrl+a    ctrl+k   ctrl+f
css peek   //能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）

Git History   //以图表的形式查看git日志 ,使用 command+shift+p（Ctrl+shift+p） 输入git log就可以看到了

JavaScript (ES6) code snippets    //es6代码片段（必备）
JavaScript Snippet Pack    //js代码片段（必备）

Path Intellisense    //路径自动补全（必备）

Vetur     //添加对.vue后缀文件的快速书写支持。
Vue 2 Snippets     //快速新建vue页面（使用方法：https://blog.csdn.net/Eva3288/article/details/81662735）

4.1 git 相关插件

点击左侧扩展按钮，或者快捷键Ctrl+Shift+X打开左侧扩展侧栏

1. GitLens—Git supercharged (git记录，单击某一行代码会显示对应的修改人和时间)

安装前：

安装后：

2. Git History （右键选中的文件， 可查看git提交、修改记录）

使用：右键文件可查看提交、修改记录

4.2 便捷操作

1. Path Intellisense （路径智能感知–【自动完成文件名】）

使用后：会自动显示出对应的文件名提示

2. Auto Rename Tag (自动重命名结束标签)

使用后：

3. Auto Close Tag（自动闭合标签）

4. CSS Peek（快速查看样式）