好用的vscode插件分享

程序员长夜
348 阅读3分钟

vscode是我们常用的编辑器，具有很多的插件，同样功能的插件具有多款，哪款插件更适合自己需要自行实践。

接下来说一下我常用的插件

基础

  1. Auto Import

    image-20240603105147322

    自动查找、解析并为所有可用的导入提供代码操作和代码完成。与Typescript和TSX

  2. Auto Rename Tag

    image-20240603105224128

    自动修改闭合标签

  3. Better Comments

    image-20240603105324520

    添加彩色注释，是注释更加明显

  4. Code Spell Checker

    代码检查插件

  5. Color Highlight

    image-20240603105719211

    在编辑器中突出显示网页颜色

    image-20240603105806106

  6. filesize

    image-20240603110858589

    这个插件是显示该文件的大小

    recording

  7. Image preview

    image-20240603111849249

    导入图片之后会在祖册显示图片缩略图

效率

  1. Bookmarks

    image-20240603105443134

    这是对代码添加标记的插件，有时候我们需要记录一段代码的位置，这个插件可以很好的帮助我们

  2. CSS Peek

    image-20240603110101994

    点击css名称会自动跳转到具体的样式

    recording

  3. folder-alias

    image-20240603111211179

    在我们开发项目的时候会有很多文件，文件多达几百个的时候你能够记住某个文件夹是什么功能吗？这个插件可以对文件(夹)添加备注

    recording

    对于有更改的文件夹，添加备注不知道为什么会不显示，代码提交之后会显示

    添加备注之后会在根目录添加folder-alias.json文件里面就是我们的备注信息

    image-20240603111804763

  4. Project Manager

    image-20240603112524713

    我们在公司开发可能会有多个项目，每次都需要去资源管理器找到在打开或使用utool中的vsc打开，有些麻烦。

    使用这个插件能够快速打开我们的项目

  5. Todo Tree

    image-20240603112953937

    在文件中添加了TODO后面找不到了，通过这个插件可以快速定位到todo的位置

    image-20240603112940059

  6. Turbo Console Log

    image-20240603113019340

    能够快速打印log，可以批量删除……

  7. Console Ninja

    image-20240603113130865

    能够在编辑器中直接显示打印的日志，可以结合上面的Turbo Console Log使用

美化插件

vscode默认界面比较丑，98%以上的程序员都会安装一定的美化插件。好看的编辑器是能够提高我们开发效率的！

  1. A-super-themes

    这个插件是一款主题插件，从一开始使用编辑器就一直在用这个。

    image-20240603104236149

  2. background

    这个插件是在编辑器窗口增加一个小背景

    image-20240603104326275

  3. background-cover

    这个是在整个窗口添加背景图，可以设置一张，也可以设置一个目录使其自动轮换播放

    image-20240603104438965

    以上安装之后的样式

    image-20240603104549402

  4. Material Icon Theme

    image-20240603111938711

    这是一个图标美化插件

别名

  1. 别名路径跳转

    别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表，功能还是比较强大的

    image-20240603104643144

  2. path-alias

    image-20240603112302238

    一个提供路径别名补全，跳转,重构,函数自动引入，函数signature help 的vscode 插件

    很遗憾 我没玩明白，要是有小伙伴玩明白了还望告诉我一声

翻译

  1. 翻译(英汉词典)

    image-20240603104811178

    选中英文会在底部自动出现翻译

    image-20240603104932179

  2. escook-translate

    image-20240603110316484

    escook-translate 是一个简洁高效的单词翻译插件，可以辅助程序员对单词进行中英互译。如果你正在为变量命名而发愁，那么强烈推荐您安装使用此插件

    recording

  3. fanyi

    image-20240603110643624

    一个划词翻译的 VS Code 插件

    recording

其他

  1. any-rule

    image-20240603105023170

    这是一个正则编写的插件

  2. Composer

    image-20240603105900991

    检查npm包，基本上不怎么用

    image-20240603110001737

  3. node-readme

    image-20240603112056340

    快速显示依赖的说明文档，不常用

    recording

总结

希望以上26个插件能够帮助你，后面不定期分享，一些很常用的插件就不会再分享了，分享了也没有任何意义

如果感觉这篇文章帮到了你，麻烦点赞关注一下，谢谢！

avatar
文章
阅读
粉丝