vscode插件使用留底

用于自己做各记录，使用了那些好用的vscode插件，持续记录吧（很常用的那些插件就不说了，该装的网上一搜就有~）

关于插件的配置文件setting.json，可以参考这篇博客：

vscode插件配置文件_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/121116309

---

local history  历史记录，方便回滚

安装好后，就能看见自己前面修改的内容，方便回滚了

---

CodeIf  命名变量

CODELF (unbug.github.io) 网站地址

 可以根据输入的中文生成对应的比较正规的英文名称，复制来用就行

---

驼峰翻译助手   alt+shift+Q

功能类似于CodeLf，但是这个是vscode里的插件，通过快捷键即可实现驼峰命名、中文转英文命名的功能

变量名规范化

这个快捷键可以自己修改，比如我改成了alt+shift+Q 用着比较顺手 

也能针对中文来实现变量命名

 

就能得到比较规范的英文命名了

---

code-translate 悬浮翻译插件

能在鼠标悬停在变量上时进行翻译，对于俺这种英语弱智来说很友好，妈妈再也不怕俺看不懂别人的代码命名了~

  

悬停即可进行翻译，不用在复制然后去utools里翻译了（有机会再讲下utools这个神级电脑工具，大学的学弟教俺用的，╰(*°▽°*)╯ 太感谢了）

---

any-rule

一款正则生成插件 GitHub - any86/any-rule: 🦕 常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台

方式1:

1. 按F1(mac下fn+F1)打开正则列表.
2. 输入关键词搜索, 比如"手机".

方式2:

右键选择"🦕正则大全".

方式3:

在代码任意位置输入"@zz".即可出现弹框

---

px to rem & rpx (cssrem) 

一款用于将px像素单位转换成为rem或者rpx的插件

开发小程序的时候，需要使用rpx单位来达到页面的响应式，但是手动换算px不方便，使用这个插件，就能在输入px单位的同时，展示出对应的rem单位和rpx单位来选择

在vscode的设置中搜索名称，就能直接找到对应的配置项，进行修改

基本上智慧用到【基准font-size】,其他用不着改

这样，选择使用rpx就不用担心小屏幕的适配了

---

css tree  根据class名称生成css

一款快速生成css格式的插件

 

但是需要注意： 有些undefined需要手动删除、img在小程序中要手动改成image

插一句：有时候快捷键会有冲突，所以要手动修改快捷键

---

Css peek 快速定位样式文件

 三种使用方式：在样式名上使用就行了

以内联方式加载css文件并在那里进行快速编辑(Alt+F12)

转到定义：直接跳转到css文件或在新编辑器中打开它(F12)

鼠标悬停：用鼠标悬停在符号上显示定义(Ctrl+ Hover)

图像预览插件-Image preview

Imagepreview是一款非常实用的图像预览工具。作为一款vscode五星好评的图片工具，它会根据路径在鼠标悬停时，在代码栏显示图片及其尺寸，很大程度上节约了我们翻阅图片的时间与精力。

---

Indent-Rainbow  代码缩进颜色标注 

对应各自标签的闭合，将缩进辅助线标识颜色，更加好区分

【但是，实际用起来，界面中颜色太多太杂也是不太舒服的，特别是缩进问题会导致这个插件泛红，看着不爽，反正我用了一段时间就关闭了这个插件。。。。。】

---

 guides 代码对齐辅助线

貌似基本会自带，没有就可以装一下

---

Path Intellisense 自动填充路径

会提示出对应路径的文件，方便填充

---

Color Highlight   显示进制颜色

会根据你输入的进制，来高亮颜色，提示你输入的是什么颜色