当前位置: 首页 > article >正文

推荐!一些好用的VSCode插件

那些好用的VSCode插件

  • 前言
  • 1、Auto Close Tag(自动补全标签)⭐
  • 2、Auto Rename Tag(自动更新标签)⭐
  • 3、Chinese(简体中文)⭐
  • 4、Git History (查看 Git 提交历史)⭐
  • 5、GitLens (增强 Git )
  • 6、open in browser (快速预览 )⭐
  • 7、Vetur ( Vue相关 )⭐
  • 8、Beautify ( 美化代码 )
  • 9、background ( 设置主题 )
  • 10、change-case( 转换文本 )
  • 11、Path Intellisense( 自动补全文件名 )
  • 12、Prettier( 格式化代码 )⭐
  • 13、Quokka.js( 编译时运行 )
  • 14、Live Server( 实时更新页面 ) ⭐
  • 15、Live Sass Compiler( sass转换为css )
  • 16、 vscode-icons( 图标 )
  • 最后

前言

通过使用插件,可以扩展编辑器的功能,实现代码自动格式化、语法高亮、版本控制等功能,从而提升编码效率和代码质量。

在日常开发过程中,一般用的编辑器是vscode,这里给大家推荐一些平时开发比较好用的插件
(ps:⭐必备,没有的则看情况使用)

1、Auto Close Tag(自动补全标签)⭐

输入一个开始标签时,它会自动补全对应的结束标签。
请添加图片描述

2、Auto Rename Tag(自动更新标签)⭐

修改一个标签的开始标签时,对应的结束标签也会自动更新,保持标签的一致性。
请添加图片描述

3、Chinese(简体中文)⭐

当初始化刚安装好vscode时默认是英文的像这种

在这里插入图片描述
可以在应用市场输入Chinese第一个就是然后安装重启就可以啦
在这里插入图片描述

4、Git History (查看 Git 提交历史)⭐

通过 Git History,可以轻松地浏览、搜索和比较 Git 提交历史,而无需离开编辑器或命令行界面(可以直观看是谁写的代码)。
在这里插入图片描述

5、GitLens (增强 Git )

它提供了丰富的功能和工具,帮助开发者更好地管理和理解 Git 仓库。
具体可以操作的功能:

  • 代码作者信息:GitLens 可以在代码编辑器中显示每一行代码的作者信息,包括提交日期和提交哈希。这对于团队协作和代码审查非常有用。
  • 行历史:GitLens 提供了行历史功能,允许用户查看每一行代码的提交历史,包括作者、提交日期和提交信息。这对于理解代码的演变和跟踪问题非常有帮助。
  • 文件历史:GitLens 可以显示文件的提交历史,包括作者、提交日期和提交信息。用户可以查看文件的每次提交,并查看每次提交的详细差异。
  • 比较分支:GitLens 支持比较不同分支之间的差异,包括代码差异和提交差异。这对于合并分支和解决冲突非常有用。
  • 搜索提交:GitLens 提供了强大的搜索功能,允许用户根据关键字、作者、日期等条件搜索提交历史。这对于查找特定提交或解决问题非常有帮助。
  • 集成 Git 命令:GitLens 提供了与 Git 命令的集成,用户可以直接在编辑器中使用 Git 命令,如 git commit、git push 等。这对于习惯使用命令行的开发者来说非常方便。
  • 支持多种 Git 版本:GitLens 支持多种 Git 版本,包括 Git 1.7.0 及以上版本,确保用户可以正常使用。

6、open in browser (快速预览 )⭐

方便地在浏览器中预览和测试代码,提高开发效率和代码质量。
请添加图片描述

7、Vetur ( Vue相关 )⭐

初始化新建vue文件的时候全是白色的像text文本,这时候Vetur这个插件就启到了关键作用。
它包括了vue的语法高亮代码补全错误检查格式化vue模版等功能
在这里插入图片描述

8、Beautify ( 美化代码 )

它可以快速地格式化 HTML、CSS、JavaScript、JSON、XML 等代码,保持代码风格的一致性。
在这里插入图片描述
下载后需要设置Beautify,默认是没用设置的

9、background ( 设置主题 )

用于更改编辑器背景的颜色和图像。这个插件可以使编辑器背景更加个性化。
在这里插入图片描述

10、change-case( 转换文本 )

文本编辑中转换文本大小写的插件。
它通常用于各种编程语言和文本编辑器中。这个插件可以帮助开发者快速地将文本从大写、小写、驼峰式、下划线等多种格式之间进行转换,从而提高编码效率。
请添加图片描述

11、Path Intellisense( 自动补全文件名 )

可以自动补全文件名,包括本地文件和远程文件,从而提高文件操作和引用的效率。
请添加图片描述

12、Prettier( 格式化代码 )⭐

可以确保代码具有一致的样式和格式,提高代码的可读性和可维护性。
请添加图片描述

13、Quokka.js( 编译时运行 )

可以在编辑器中即时运行代码,并显示结果,无需离开编辑器即可进行测试和调试。
使用方法首先调出面板并搜索Quokka.js
然后会出现这些,一般选择使用这个
在这里插入图片描述
然后代码中神奇的东西就出现了
在这里插入图片描述

14、Live Server( 实时更新页面 ) ⭐

初始化html页面时,每次都需要去刷新页面才能获取更新后的页面,下载这个插件后,保存页面浏览器就会事实更新~~
请添加图片描述

15、Live Sass Compiler( sass转换为css )

将scss文件转换为css文件,提高书写css的效率,在scss文件中点击watch sass实时查看和调试 CSS 样式,提高开发效率和代码的可读性。
在这里插入图片描述

16、 vscode-icons( 图标 )

它为编辑器中的文件和文件夹提供了一套自定义的图标,这些图标可以帮助开发者更直观地识别文件类型和项目结构,提高开发效率和代码的可读性。
在这里插入图片描述

最后

以上就是本人基本上常用的一些插件了,
如果大家也有比较好用的插件欢迎留言补充~~


http://www.kler.cn/a/381401.html

相关文章:

  • python正则总结
  • A010-基于SpringBoot的宠物健康咨询系统的设计与实现
  • 运维工具之docker入门
  • ISUP协议视频平台EasyCVR视频融合平台接入各类摄像机的方法
  • utf-8、pbkdf2_sha
  • 东北虎豹国家公园shp格式范围
  • 【前端基础】Flex布局
  • celery加速爬虫 使用flower 可视化地查看celery的实时监控情况
  • C++和JAVA中的sort详解
  • QML项目实战:自定义Combox
  • vue-router+element-plus实现左边侧边栏+右边内容
  • 【2024最新版Kotlin教程】Kotlin第一行代码系列第三课-流程控制
  • 解决 Spring 异步处理中的 JDK 动态代理问题及相关错误分析
  • CCS下载安装(以12.3.0版本为例)
  • 学习threejs,导入OBJ格式的模型
  • BackTrader-Commission 06
  • 十四届蓝桥杯STEMA考试Python真题试卷第二套第五题
  • fpga引脚约束问题
  • springboot集成onlyoffice(部署+开发)
  • 风宇博客全站HTTPS配置
  • 【图论】——理论基础总结
  • 【力扣打卡系列】移动零(双指针)
  • ESRALLY安装与使用
  • 「C/C++」C/C++的区别
  • C#编程:VSTO在Excel工作表中输出List数据
  • c++的list类