VsCode系列:11个必备 VS Code 插件

📖摘要


今天分享下 —— VsCode系列:11个必备 VS Code 插件 的一些基本知识,欢迎关注!


🌂提升开发效率的插件


1. Better Comments

在这里插入图片描述

Better Comments 你可以使用不同的前缀来让注释显示为不同的颜色。非常适合快速扫描并发现重要的代码片段。若使用的话, 建议团队统一规范.


2. Bracket Pair Colorizer

在这里插入图片描述

你是否经常在项目中出现查找是否缺失括号. 这是一件非常浪费时间的事情. 使用上面这款插件, 它可以帮你用不同的颜色标识括号, 是不是很棒.


3. change-case

在这里插入图片描述

change-case 提供了一种简单的方法来将单词或变量名更改为各种情况,包括 camelCasesnake_caseTitleCase…… 这种再多人合作, 遇到不一致的代码时, 可以极大地提高效率.


4. ES7 React/Redux/GraphQL/React-Native snippets

在这里插入图片描述

如果每创建一个组件都要重复地写样板代码, 那真的是非常浪费时间. 这个插件有很多有用的 snippets 片段, 你可以快速初始化一个样板代码, 节省大量时间.


ESLint

这一个插件应该都有安装, 好处不多讲了


6. GitLens

在这里插入图片描述

GitLens 是一个非常非常好用的插件,可以让您了解 git 的提交历史。精确到行. 甩锅怎么甩得快, 就靠它了.
滑动到行, 就可以看到提交作者, 提交日期, 以及 commit 的内容.


7. Import Cost

在这里插入图片描述

Import Cost 有助于你认识到你引入的文件大小。它以内联方式显示每个导入的大小,如果导入大于正常大小,则显示红色和黄色警告颜色。


8. indent-rainbow

在这里插入图片描述

通过颜色区分, 让你一眼就看出缩进.


9. javascript console utils

在这里插入图片描述

力荐啊. 只需要找到你想 console.log 的变量, 按住快捷键, 即可出现一个带变量名的 console。选中变量,使用方法:Ctrl + Shift + LCtrl + Shift + D删除添加的 console.log。同理 Mac 就是 Cmd + ...


10. Prettier

在这里插入图片描述

这个是非常重要的。用 alt + shift + F 自动格式化你的代码,或者你可以让它在每次保存时自动格式化。节省了你很多缩进, 前后空格等代码风格上的时间. 保持一样的 prettier 配置, 在团队合作中也是非常重要的.


11. Version Lens

在这里插入图片描述

跟踪 npm 包 的所有最新版本可能很麻烦。版本镜头显示你如何内联你安装的版本包。将 json 与当前版本进行比较。


不再使用的插件

当太多插件被添加到 VScode 中, 电脑小风扇就会呼呼呼地响. 因此我会卸载一些没必要的插件.

Auto-close tag & Auto Rename Tag

现在,这些功能大部分都包含在 VS 代码中. 可以移除这个插件了

Color Highlight

突出显示任何 CSS 颜色值及其所代表的颜色。同样的, VS 中现在在值旁边显示了一个彩色的框,已经足够了.
如果你内存够. 尽管安装.


🎉最后

  • 更多参考精彩博文请看这里:《陈永佳的博客》

  • 喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈永佳

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值