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
作用:自动提示文件路径,支持各种快速引入文件
Vscode——开发常用插件分享_第1张图片

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
Vscode——开发常用插件分享_第2张图片

15.koroFileHeader

插件名称:koroFileHeader
作用:用于生成文件头部注释和函数注释的插件
在这里插入图片描述

16.GitLens

插件名称:GitLens
作用:能显示每一行代码的作者以及提交时间。
Vscode——开发常用插件分享_第3张图片

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的时候,只需要登录账号即可同步配置了
Vscode——开发常用插件分享_第4张图片

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插件
在这里插入图片描述

你可能感兴趣的:(工具,vscode,编辑器)