vs code的一些经常或着不经常用的插件

388 阅读1分钟

One Dark Pro

  • 插件名:One Dark Pro

image.png

image.png

Auto Rename Tag

  • 插件名: Auto Rename Tag
  • 功能:自动重命名标签

image.png

auto-close-tag

自动关闭标签。 当我们输入 <div/ 时,它会自动把后面的括号补充好。

any-rule

any-rule : 这下在使用正则判断表单内容时就不用每次都到处去百度了。

image.png

插件(必装)

  • Bookmarks
    • 功能:常用于读源码进行标记行,跳转(代码标记快速跳转)
  • ESLint
    • 功能:代码规范检查
  • Prettier - Code formatter
    • 功能:代码美化,自动格式化成规范格式
  • Project Manager
    • 功能:项目管理插件,当开发多个项目时,可以快速跳转
  • Path Intellisense
    • 功能:路径智能提示
  • Image preview
    • 功能:当引入路径为图片时,可以预览当前图片
  • GitLens
    • 功能:增强了git功能,支持在VSCode查看作者、修改时间等等
  • open in browser
    • 功能:在浏览器打开当前文件

Vetur

  • 插件名:Vetur
  • 开发 Vue 必备

Vue 3 Snippets

  • 插件名:Vue 3 Snippets
  • 基本必备:很多Vue的代码段,很方便开发

彩虹括号

以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2,但是有着性能问题,着色慢。vscode在2021 年 8 月开始内置了这个功能,随之到来的还有垂直连线,亲测,现在已经非常好用了,效果出色,并且所有颜色都是可主题化的,最多可以配置六种颜色。 在如下打开settings.json,记住放在最外层的大括号里。

这是我认为比较好的配置,详细的配置可以参考vscode官方文档

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",

摸鱼软件

小霸王

小霸王是一款基于vscode的nes游戏插件,能让你在紧张的开发之余在vscode里放松身心。通过劳逸结合,提升开发效率。

image.png

daily-anime

追番插件 (=・ω・=)

  1. 1.anime: 从[bangumi](https://bgm.tv/ "https://bgm.tv/")上获取番剧
    
  2. 2.hitokoto: 随机从网络获取一条acgn句子
    

image.png

z-reader

用来摸鱼或学习的小说阅读插件,支持在线搜索和本地阅读,支持 txt 和 epub 格式

前端每日一题

一个前端刷题插件

如何使用

  1. 在 vscode 搜前端每日一题,或者 在 vscode marketplace 上下载
  2. 安装完成后,vscode 左侧栏会出现一个新图标,点击进去就能看我们的练习题了。
  3. 点击想做的题目,会弹出 4 个选择框。选择其中一个会自动生成面试题文件,到你指定的 workplace。(ps. 建议在你专门刷题的文件夹下使用,那么就不会每次都弹出选择框了)
  4. 请在 start 和 end 之间作答。
  5. 下方会有提交答案和查看题解的按钮。提交答案,会提交你在 start 和 end 之间的答案。

image.png