Vscode——开发常用插件分享

一、使用vscode插件干什么？

vscode插件是为了更高效的代码开发，为了美观的代码格式。

下面推荐一些好用的插件

1.简体中文语言包

插件名称：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
作用：将VSCode操作界面转换为中文，安装完成，重启VScode即可

2.显示文件图标

插件名称：vscode-icons
作用：vscode中的文件管理的树目录显示图标

3.Live Server 开启本地服务器

插件名称：Live Server
作用：开启一个具有实时重新加载功能的小型开发服务器，可以一边编写代码一边保存，即实时刷新预览

4.自动修改标签对名称

插件名称：Auto Rename Tag
作用：修改标签，自动帮你完成头部和尾部闭合标签的同步修改

5.将代码生成一张图片

插件名称：carbon-now-sh
作用：在实际开发中遇到技术问题或者做部分代码片段分享，可以使用该插件将代码生成一张图片
1.在VSCode中，先选中需要生成图片的代码
2.打开命令托盘：Windows：Ctrl + Shift + P，Mac：Cmd + Shift + P
输入Carbon，回车
3.再打开的网页中，复制粘贴即可

6.prettier 格式化代码

插件名称：prettier
作用：格式化美化代码 ，按Ctrl + s 保存会自动格式化

7.自动补全标签

插件名称：Auto Close Tag
作用：自动补全结束标签

8.Beautify 格式化

插件名称：Beautify
作用： 可格式化css,js,less代码

9.Code Spell Checker 拼写检测

插件名称：Code Spell Checker
作用：帮助我们发现代码中拼写错误的单词

10.HTML Snippets

插件名称：HTML Snippets
作用：HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了

11.Path Intellisense 路径提示

插件名称：Path Intellisense
作用：自动提示文件路径，支持各种快速引入文件

12.Image preview 图片预览

插件名称：Image preview
作用：鼠标悬浮在链接上可及时预览图片

13.JavaScript (ES6) code snippets

插件名称：JavaScript (ES6) code snippets
作用：ES6语法智能提示，以及快速输入

14.TSLint

插件名称：TSLint
作用：ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

15.koroFileHeader

插件名称：koroFileHeader
作用：用于生成文件头部注释和函数注释的插件

16.GitLens

插件名称：GitLens
作用：能显示每一行代码的作者以及提交时间。

17.GitHistory

插件名称：GitHistory
作用：GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便

18.Partial Diff 文件比较

插件名称：Partial Diff
作用：将文件进行对比

19.Polacode-2020(类似第五个插件)

插件名称：Polacode-2020
作用：代码转化成图片
1.在VSCode中，先选中需要生成图片的代码
2.打开命令托盘：Windows：Ctrl + Shift + P 输入polacode

20.browser preview 内置浏览器

插件名称：browser preview
作用：可以让我们在vscode里面打开浏览器，一边编码一边查看

21.Settings Sync

插件名称：Settings Sync
作用：可以让我们的vscode配置同步到云端，当我们跟换电脑或者再次安装vscode的时候，只需要登录账号即可同步配置了

22.Vetur

插件名称：Vetur
作用：Vetur是一款Vue代码高亮显示的一款插件

23.Vue 3 Snippets

插件名称：Vue 3 Snippets
作用：这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

24.Rainbow Brackets

插件名称：Rainbow Brackets
作用：不同颜色的括号插件

25.HTML CSS Support

插件名称：HTML CSS Support
作用：在编写样式表的时候，自动补全功能大大缩减了编写时间

26.Highlight Matching Tag

插件名称：Highlight Matching Tag
作用：html标签对齐高亮

27.px to rem & rpx (cssrem)

插件名称：px to rem & rpx (cssrem)
作用：px转rem插件