亲测!2022好用的vscode extensions推荐!

6,636 阅读2分钟

最近又经历了一次电脑重装!!!

对于常用的vscode extensions再进行一次梳理,在新环境时可以快速还原自己的开发环境,及时恢复原有效率,实现历史经验的有效利用

常规类

GitLens

快速查看git的历史记录

gitlen.gif

Search node_modules

快速搜索本地node_modules~但凡涉及到引用库的实际版本查询,还是非常快速的

Relative Path

现在的项目目录层级一般会比较乱,万一有个tools,utils之类的,在不适用alias的情况下,可以快速查找文件路径,用于文件的快速引用,(感觉比path Intellisense 更符合需求)

relativepath.gif

Path Intellisense

path寻找型

path.gif

前端开发使用类

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

autorename.gif

Auto Close Tag

标签闭合

image.png

代码优化类

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

常用的优化插件,针对ts、json、less等都可以支持;

image.png

Beautify

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

vue开发过程中的html的换行功能

image.png

Pretty

vue的开发中,引号的优化

image.png

花里胡哨类

Better Comments

评论是编程的重要组成部分,没有它,你永远无法理解自己或他人的代码。

此扩展允许您通过将注释分类为突出显示文本、问题、待办事项、错误/警告和删除线来组织注释,以便在以后查看项目时易于阅读!

咋说呢,看没注释的代码还是挺累的!

image.png

CSS Peek

直接查找css对应的地方,支持less,sass

csspeek.gif

JavaScript (ES6) code snippets

快捷键,虽然这边有,不过大部分不太常用,还是自己写了一份snppet,毕竟适合自己的才是效率最高的。

不过可以参照一下是否有自己常用,但没有被收录成snippet的情况。以防不知不觉还是辛苦敲代码~

image.png

个人喜好

Vim

非常强大的工具!用熟悉之后感觉 某些方面要比正常开发的效率高!

vim插件安装后的常见问题:

juejin.cn/post/690793…

建议

  1. 插件还是够用为主,能少装就少装点,毕竟为了提效,装多了卡。
  2. 针对不同的开发阶段,使用的插件不一样。还是及时整理及删除

还有哪些好用的插件推荐呢?