一、使用vscode插件干什么?

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

下面推荐一些好用的插件

1.简体中文语言包

插件名称:Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

作用:将VSCode操作界面转换为中文,安装完成,重启VScode即可

vscode里数据分析 vscode 代码分析插件_Vue

2.显示文件图标

插件名称:vscode-icons

作用:vscode中的文件管理的树目录显示图标

vscode里数据分析 vscode 代码分析插件_编辑器_02

3.Live Server 开启本地服务器

插件名称:Live Server

作用:开启一个具有实时重新加载功能的小型开发服务器,可以一边编写代码一边保存,即实时刷新预览

vscode里数据分析 vscode 代码分析插件_Vue_03

4.自动修改标签对名称

插件名称:Auto Rename Tag

作用:修改标签,自动帮你完成头部和尾部闭合标签的同步修改

vscode里数据分析 vscode 代码分析插件_Vue_04

5.将代码生成一张图片

插件名称:carbon-now-sh

作用:在实际开发中遇到技术问题或者做部分代码片段分享,可以使用该插件将代码生成一张图片

1.在VSCode中,先选中需要生成图片的代码

2.打开命令托盘:Windows:Ctrl + Shift + P,Mac:Cmd + Shift + P

输入Carbon,回车

3.再打开的网页中,复制粘贴即可

vscode里数据分析 vscode 代码分析插件_Vue_05

6.prettier 格式化代码

插件名称:prettier

作用:格式化美化代码 ,按Ctrl + s 保存会自动格式化

vscode里数据分析 vscode 代码分析插件_vscode_06

7.自动补全标签

插件名称:Auto Close Tag

作用:自动补全结束标签

vscode里数据分析 vscode 代码分析插件_vscode_07

8.Beautify 格式化

插件名称:Beautify

作用: 可格式化css,js,less代码

vscode里数据分析 vscode 代码分析插件_Vue_08

9.Code Spell Checker 拼写检测

插件名称:Code Spell Checker

作用:帮助我们发现代码中拼写错误的单词

vscode里数据分析 vscode 代码分析插件_vscode里数据分析_09

10.HTML Snippets

插件名称:HTML Snippets

作用:HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了

vscode里数据分析 vscode 代码分析插件_编辑器_10

11.Path Intellisense 路径提示

插件名称:Path Intellisense

作用:自动提示文件路径,支持各种快速引入文件

vscode里数据分析 vscode 代码分析插件_vscode_11

12.Image preview 图片预览

插件名称:Image preview

作用:鼠标悬浮在链接上可及时预览图片

vscode里数据分析 vscode 代码分析插件_编辑器_12

13.JavaScript (ES6) code snippets

插件名称:JavaScript (ES6) code snippets

作用:ES6语法智能提示,以及快速输入

vscode里数据分析 vscode 代码分析插件_Vue_13

14.TSLint

插件名称:TSLint

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

vscode里数据分析 vscode 代码分析插件_编辑器_14

15.koroFileHeader

插件名称:koroFileHeader

作用:用于生成文件头部注释和函数注释的插件

vscode里数据分析 vscode 代码分析插件_vscode_15

16.GitLens

插件名称:GitLens

作用:能显示每一行代码的作者以及提交时间。

vscode里数据分析 vscode 代码分析插件_vscode_16

17.GitHistory

插件名称:GitHistory

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

vscode里数据分析 vscode 代码分析插件_HTML_17

18.Partial Diff 文件比较

插件名称:Partial Diff

作用:将文件进行对比

vscode里数据分析 vscode 代码分析插件_vscode_18

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

插件名称:Polacode-2020

作用:代码转化成图片

1.在VSCode中,先选中需要生成图片的代码

2.打开命令托盘:Windows:Ctrl + Shift + P 输入polacode

vscode里数据分析 vscode 代码分析插件_vscode里数据分析_19

20.browser preview 内置浏览器

插件名称:browser preview

作用:可以让我们在vscode里面打开浏览器,一边编码一边查看

vscode里数据分析 vscode 代码分析插件_编辑器_20

21.Settings Sync

插件名称:Settings Sync

作用:可以让我们的vscode配置同步到云端,当我们跟换电脑或者再次安装vscode的时候,只需要登录账号即可同步配置了

vscode里数据分析 vscode 代码分析插件_HTML_21

22.Vetur

插件名称:Vetur

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

vscode里数据分析 vscode 代码分析插件_Vue_22

23.Vue 3 Snippets

插件名称:Vue 3 Snippets

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

vscode里数据分析 vscode 代码分析插件_HTML_23

24.Rainbow Brackets

插件名称:Rainbow Brackets

作用:不同颜色的括号插件

vscode里数据分析 vscode 代码分析插件_Vue_24

25.HTML CSS Support

插件名称:HTML CSS Support

作用:在编写样式表的时候,自动补全功能大大缩减了编写时间

vscode里数据分析 vscode 代码分析插件_编辑器_25

26.Highlight Matching Tag

插件名称:Highlight Matching Tag

作用:html标签对齐高亮

vscode里数据分析 vscode 代码分析插件_vscode里数据分析_26

27.px to rem & rpx (cssrem)

插件名称:px to rem & rpx (cssrem)

作用:px转rem插件

vscode里数据分析 vscode 代码分析插件_vscode_27