vscode 常用扩展

本文介绍使用 vscode 开发时常用的扩展,小伙伴可以根据自己的需求和喜好自己安装

Element-UI 智能提示

  1. shenjiaolong.vue-helper

  2. ss.element-ui-snippets

Vant Snippets

UI 库—– vant 智能提示

Vetur

vetur 不断更新,但之后的更新代码格式化之后标签内部可能出现换行,个人表示不喜欢,这里推荐配置 settings.json

1
2
3
{
"vetur.format.defaultFormatter.html": "prettyhtml"
}

语法高亮、智能感知、Emmet 等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个 Ctrl 需要同时按着)

GitLens—– Git Supercharged

查看文件历史,出现 bug 后先把锅背好了

查看 git 文件提交历史

Git Project Manager

当开发很多项目时,常常需要切换项目,此扩展允许你直接从 VSCode 窗口打开一个针对 Git 仓库的新窗口

TODO Tree

这个扩展快速搜索(使用 ripgrep)您的评论标签如 TODO 和 FIXME 的工作空间,并在浏览器窗格的树视图中显示它们。单击树中的 TODO 将打开文件,并将光标放在包含 TODO 的行上

EsLint

语法纠错

Prettier

该插件十分简洁,编写者为 Esben Petersen,下载量近 1400 万次。它帮助开发者格式化代码,并提供颜色关键字以使代码更具可读性。

Beautify

它同 Prettier 十分类似,是一种出色的代码格式化扩展插件,近 1200 万的下载量足以说明一切。可以用它格式化以 JavaScript,JSON,CSS,Sass 和 HTML 编写的代码,用户可以根据自己的喜好选择对应的格式化工具

markdown-formatter

这是一个提高 markdown 编写效率的工具,不仅为 markdown 用户提供了一个相对统一的格式,而且还提供了一些代码片段

Debugger for Chrome

映射 vscode 上的断点到 chrome 上,方便调试(配置有点麻烦,其实我没用这个)

Auto Close Tag

自动闭合 HTML/XML 标签

Auto Rename Tag

自动完成另一侧标签的同步修改

JavaScript(ES6) code snippets

ES6 语法智能提示以及快速输入,除 js 外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含 js 代码文件的时间

Path Intellisense

自动路劲补全

HTML CSS Support

让 html 标签上写 class 智能提示当前项目所支持的样式

Better Comments

不同的注释显示不同的颜色,*,?,!起头然后开始写,你可以看到注释的颜色是不同的

Emoji

在代码中输入 emoji

File Peek

根据路径字符串,快速定位到文件

npm

运行 npm 命令

npm Intellisense

导入模块时,提示已安装模块名称

Partial Diff

对比两段代码或文件