VsCode插件推荐⚙️

分享一下我日常使用的VsCode插件，说实话要我离开这些插件，和要了我的命没什么区别（Just kidding）

必用强推类

Chinese - VsCode中文翻译插件

VsCode中文翻译，把大部分的VsCode内容翻译成了中文，对初学者🔰非常友好，再也不用找一个功能找半天了

Code Spell Checker - 拼写检查插件

经常有时候打代码打太多会打出错别字，像detail打成detaul的报错找半天问题的烦恼再也不存在了，这个插件会帮你检查一些英文的拼写，虽然有些小众的词汇他不认识😅，但也解决了大部分的问题

总的来说还是非常方便的

Auto Rename Tag - HTML自动重命名

这个是真的方便，写前端HTML经常会遇到改标签的情况，有了这个插件就只用改一个标签，大大节约开发效率！

eg:
<h1></h1>修改这个h1标签为h2，需要改<h1>和</h1>这两个地方
安装插件后，你修改<h1>为<h2>，后面的</h1>会自动帮你修改成</h2>
非常方便❗

Auto Close Tag - HTML自动生成尾标签

和Auto Rename Tag类似，但这个用于添加标签，他会自动帮你加上尾标签

样式优化类

vscode-icons - 文件icon样式

这个插件可以对不同文件类型的icon进行更改

Git类

GitLens — Git supercharged - git操作简化

这个插件很好的简化了git操作，并开启了一个拓展栏，可以说的上是我最常用的插件了，非常强推❗❗❗

大致功能点：

1. 展示哪些文件已经暂存，哪些没有，同时点击可以查看到文件有哪些更改
2. 在代码行的最末尾有这行代码最后被谁修改，在什么时候被修改，停留可以查看详细信息

这个插件对git很多操作都支持，这个博主的文章还挺详细的：
https://blog.csdn.net/m0_57707788/article/details/129459955?fromshare=blogdetail&sharetype=blogdetail&sharerId=129459955&sharerefer=PC&sharesource=&sharefrom=from_link
不过我一般不太使用其他的功能，都是命令行敲敲敲🤣但有总比没有好不是哈哈哈哈

Git Graph - 分支关系查看插件⭐

这个插件可以很好的看到各个分支之间的情况，以及每次提交的修改内容、提交时间啥的👍，同时也能在此基础上进行创建新分支等操作，非常好用！

Git History - 查看文件历史

这个插件可以很好的查看文件过去git提交的修改历史，修改人等信息

我一般最常用是他们在文件中右键的使用方法，还有很多其他方法

开发辅助拓展工具类

HTML-Comment - HTML注释助手

这个插件可以在HTML中，原来HTML注释的基础上继续不断加注释

比如：在正常情况下，VsCode不能使用ctrl+/给下面的代码进行继续HTML注释

    <div>
      <div>
        ctrl + shift + / 注释 x1
        <div>
          ctrl + shift + / 注释 x1
          <!-- <div>这里注释了</div> -->
        </div>
      </div>
    </div>

使用了这个插件，就可以不断给HTML添加嵌套的注释了，快捷键：ctrl + shift + /

    <!-- <div>
      <!== <div>
        ctrl + shift + / 注释 x1
        <!== <div>
          ctrl + shift + / 注释 x1
          <!== <div>这里注释了</div> ==>
        </div> ==>
      </div> ==>
    </div> -->

WakaTime - 记录代码时间

这个插件可以记录你的代码时间，看看你最花时间在哪些项目上✌️

使用之前使用github登陆就能记录你的代码时间了
记录网站：https://wakatime.com/

Bookmarks - 书签标记

有时候需要开很多个页面来回切换，有了这个工具，就可以给文档添加标记（还可以命名），方便来回跳转

具体可以有：

1. 标记需要处理的bug的位置
2. 标记需要来回切换的地方
3. 标记未来需要添加的功能
   还有些功能，等你来探索🧩...

下载后会出现新的插件标签页，类似还有一个TODO list的插件，我个人用的更多一些😁

Todo Tree - 代办事项

这个插件可以添加代办在代码里，作用和Bookmarks类似，不过这个更加方便而且可定制

CSS Peek - peek一下css的样式

开发时经常需要查看这个样式的定义，这个插件可以在文件里搜索这个样式的所有定义和应用的地方

使用方法：
按住ctrl然后点击该类可以查看该类的定义

按F12可以打开一个小窗口，查看所有用到该样式的地方

Import Cost - 查看导入包的大小

这个插件就单纯拿来看一下引入的包是大是小哈哈哈，just look look

大概样式：

Postman - 在VsCode里测试接口✅

这个确实是很爽的，就不用打开网页版或者应用版的Postman了，而且数据登录后同步，是真的舒服啊❗️

其他

Prettier - 代码格式化工具

这个插件是一种格式化代码的风格

使用方法：
右键文档，然后使用这两个就可以直接使用了

我们在使用的时候还可以把他配置成默认的格式化工具

然后搭配保存时格式化来使用（我是这么用的，非常的方便🙂）

但可以看到我使用的是Vetur哈哈哈哈哈🤣因为我懒的配置，所以直接用Vetur了感觉也很方便（记得开启Format On Save之后，按照VsCode的提示，把Files: Auto Save设置成afterDelay）