vscode 常用扩展
本文介绍使用 vscode 开发时常用的扩展,小伙伴可以根据自己的需求和喜好自己安装
Element-UI 智能提示
shenjiaolong.vue-helper
ss.element-ui-snippets
Vant Snippets
UI 库—– vant 智能提示
Vetur
vetur 不断更新,但之后的更新代码格式化之后标签内部可能出现换行,个人表示不喜欢,这里推荐配置 settings.json
1 | { |
语法高亮、智能感知、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
对比两段代码或文件