推荐!一些好用的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.xdnf.cn/news/4361.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

任务调度实现

我的后端学习大纲 XXL-JOB大纲 1、什么是任务调度 1.以下面业务场景就需要任务调度来解决问题: 某电商平台需要每天上午10点,下午3点,晚上8点发放一批优惠券某银行系统需要在信用卡到期还款日的前三天进行短信提醒某财务系统需要在每天凌晨0:10分结算前…

【SQL50】day 1

目录 1.可回收且低脂的产品 2.寻找用户推荐人 3.使用唯一标识码替换员工ID 4.产品销售分析 I 5.有趣的电影 6.平均售价 7.每位教师所教授的科目种类的数量 8.平均售价 1.可回收且低脂的产品 # Write your MySQL query statement below select product_id from Products w…

【数据结构与算法】第9课—数据结构之二叉树(链式结构)

文章目录 1. 二叉树的性质2. 链式结构二叉树3. 二叉树链式结构的4种遍历方式4. 二叉树节点个数5. 二叉树的叶子节点个数6. 二叉树第k层节点个数7. 二叉树的高度/深度8. 二叉树查找值为x的节点9. 二叉树的销毁10. 判断是否为完全二叉树11. 二叉树练习题11.1 单值二叉树11.2 相同…

ONLYOFFICE 8.2深度体验:高效协作与卓越性能的完美融合

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ONLYOFFICE 8.2 🔍引言📒1. ONLYOFFICE 产品简介📚2. 功能与特点🍁协作编辑 PDF🍂…

一文带你了解,全国职业院校技能大赛老年护理与保健赛项如何备赛

老年护理与保健,作为2023年全国职业院校技能大赛的新增赛项,紧密贴合党的二十大精神,致力于加速健康与养老产业的蓬勃发展,并深化医养康养结合的服务模式。此赛项不仅承载着立德树人的教育使命,更通过竞赛的引领作用&a…

HT71778 实时音频信号跟踪的18V,15A全集成同步升压转换器

1、特点 实时音频信号跟踪的电源供电 SN 短接地,VIN2.7~4.5V, VouT5V~12V RsN(to GND) 100k, ViN 2.7~8.5V, VouT 9V~15V SN 悬空,VIN 2.7~8.5V, VouT9V~18V 可编程峰值电流:15A 高转换效率: 93%(VIN7.4V, VoUT15.5V, IouT 1.5A) 低关断功耗,关断电流1uA 可调节的开…

二叉树 最大深度(递归)

给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:3示例 2: 输入:root [1,null,2] 输出…

【Spring IoCDI】路径扫描,DI依赖注入

【路径扫描】 Spring注重路径,约定大于配置 例如,这个路径下,Spring默认会去扫描下【com.baiye.ioc】下面所有类中加了五大注解的路径,不在这个路径下是默认不会去扫描的 即:Spring默认的扫描路径是——启动类所在的目录及其子目…

JavaScript中变量的基础知识(超详细)

1.变量 1.1目标 理解变量是计算机存储数据的容器 变量:变量是计算机用来存储数据的容器(盒子)作用:记录计算机数据的不同状态注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为一个用…

iPhone 17 :全系 120HZ,等等党终于等到了

苹果首次在 iPhone 13 Pro 上采用120 HZ 自适应高刷,通过屏幕体验,来拉开 Pro 和标准版的定位差距,这个策略持续到 iPhone 16。 不过从 iPhone 17 开始,情况要开始转变了。 根据外媒ETNews 的透露,苹果明年推出的四款…

【系统配置】信创终端操作系统如何彻底禁用ssh _ 统信 _ 麒麟 _ 方德

原文链接:【系统配置】信创终端操作系统如何彻底禁用ssh | 统信 | 麒麟 | 方德 Hello,大家好啊!今天带来一篇关于如何在信创终端操作系统中彻底禁用SSH的文章。在某些安全性要求较高的环境中,禁用SSH服务可以防止未经授权的远程访…

Ubuntu 18在线安装Docker 实战 2024年11月

Ubuntu 18在线安装Docker 实战 厂商:华为云 系统:Ubuntu 18.04 安装前原本以为国内直接安装会有魔法失效的问题,没有考虑直接用Docker 官方指引,找了各种帖子,各种国内源,结果一堆错,还把系统…

C语言-fseek函数

🌏个人博客:尹蓝锐的博客 希望文章能够给到初学的你一些启发~ 如果觉得文章对你有帮助的话,点赞 关注 收藏支持一下笔者吧~ fseek函数 int fseek ( FILE * stream, long int offset, int origin ); 重新定位流位置指示…

排序算法之插排希尔

算法时间复杂度(最好)时间复杂度(平均)时间复杂度(最差)空间复杂度插入排序O(n)O(n^2)O(n^2)1希尔排序O(n)O(n^1.3)O(n^2) 1 1.插入排序 玩牌时,每得到一张,就要把它插入…

babylonjs shader学习之shadertoy案例四

代码 const onSceneReady (scene: Scene) > {(scene.activeCamera as ArcRotateCamera).beta 1.185793134378305;const light new HemisphericLight(light, Vector3.Down(), scene);light.intensity 1;const plane MeshBuilder.CreatePlane(ground, { width: 10, heig…

【机器学习】20. RNN - Recurrent Neural Networks 和 LSTM

1. RNN定义 用于顺序数据 文本数据是序列数据的一个例子 句子是单词的序列——一个单词接另一个单词 每个句子可能有不同数量的单词(长度可变) 每个句子之间可能有长距离的依赖关系 rnn可以记住序列中较早的相关信息 RNN在每个时间点取序列中的1个…

python-读写Excel:openpyxl-(4)下拉选项设置

使用openpyxl库的DataValidation对象方法可添加下拉选择列表。 DataValidation参数说明: type: 数据类型("whole", "decimal", "list", "date", "time", "textLength", "custom"…

unity发布webGL

1.安装WebGL板块 打开unity,进入该界面,然后选择圈中图标 选择添加模块 选择下载WebGL Build Support 2.配置项目设置 打开一个unity项目,如图进行选择 如图进行操作 根据自己的情况进行配置(也可直接点击构建和运行&#xff09…

基于势能的平面运动模拟

运动模拟 接前面递归调用——单向汉诺塔七边形最小分割弦 F m a Fma Fma F m a m d 2 r d t 2 F ma m \frac{{{d^2}\ r}}{{d{t^2}}} Fmamdt2d2 r​ F k Q q r 2 r ^ F k \frac{{Qq}}{{{r^2}}} \hat{r} Fkr2Qq​r^代码电荷的位置和值运动电荷的初始位置和速度计算距离计算…

SpringBoot在线教育系统:数据分析与报告

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式,是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示: 图4-1系统工作原理…