react vscode 那些省时省力的小插件

614 阅读2分钟

一. px to rem & rpx (cssrem)

开发移动端还是很有必要的 输入px的时候 会自动转换成rem 我们选取就好,下图:

image.png

二. Auto Rename Tag

自动补全修改中闭合标签 比如我们在修改某个标签的时候 只需要修改首或者尾的其中一个即可

image.png

三.Beautify (相对比 eslint更高效)

格式化代码文档 帮我们整理代码格式

image.png

四.Tab键补全html标签

image.png

五.eslint

最近发现,eslint其实对于写代码还是帮助挺大的,规范了代码格式,整体美观度还是很高的!

当代码不规范时候还会有提示信息以及修复功能

image.png 当ctrl+s的时候 会对代码进行整理

当我们git commit的时候 还会检索代码

ps:就是刚用的时候,多一个空格也会报warning 会让人很抓狂。。

image.png

六.live server

编辑器修改一键保存,浏览器实时更新

七.Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more
这是一款人工智能代码完成工具,能够以更快的速度完成代码,并且错误更少, 其支持多种语言,还具备记忆功能,拥有记忆的代码库。

八. vscode-fileheader 和 koroFileHeader 生成文件备注

某人某天编写,某人某天更新,来过就留下足迹,一眼望穿!

九. git History

查看git日志、文件历史记录、比较分支或提交


image.png 十. GitLens — Git supercharged

在 VS Code 中增强 Git

十一. git Graph

查看存储库的Git图,并从图中执行Git操作。

image.png

十二.Easy WXLESS

在 Visual Studio Code for Wechat Mini App中轻松处理 LESS 文件。

LESS 样式表的“保存时编译”,无需使用构建任务。简单来说 最常用在微信小程序 写了一个less文件 会自动生成一个wxss文件

十三. HTML Snlppets

禁用此扩展,因为它当前与现有的 VS 代码 HTML 扩展冲突

此扩展为 VS Code 的 HTML 标记添加了丰富的语言支持,包括:

  • 完整的 HTML5 标签
  • 着色
  • 片段
  • [部分实现] 快速信息
  • 描述中提到标签是否被弃用

十四. Prettier - Code formatter

使用prettier的代码格式化程序

先这样吧 用到什么再补充