VScode中常用插件集合

2,021 阅读2分钟

平常我们VScode开发中,必然要借助插件,提高我们的开发效率,这里简单列几个常用插件,如果有更好用的插件麻烦补充,后续也会持续更新。

1. git相关

Git Graph

View a Git Graph of your repository, and perform Git actions from the graph.

图形化展示git提交记录。marketplace.visualstudio.com/items?itemN…

Git History

View git log, file history, compare branches or commits.

查看git 文件修改记录,提交日志,分支比较等。非常实用。

Git Merger

Simplifies the git merge process.

简化git合并过程。快捷键Command+Shift+p或者Ctrl+Shift+p打开搜索框。github.com/shaharkazaz…

Local History

Save files into local history.

可以帮助我们查看文件的修改历史,如果修改了文件,但是不小心丢弃了修改操作,可以通过本地历史记录找回。github.com/zabel-xyz/l…

GitLens — Git supercharged

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

可以查看修改人的信息,文件修改历史等操作,这里就不一一截图了。

2. vue相关

Vetur

Vue tooling for VS Code.

提供vue语法高亮,代码片段,错误检测,格式化,自动补全等功能。如果是vue项目开发,必装不可。vuejs.github.io/vetur/

Vue 3 Snippets

A Vue.js 2 Extension.

基于最新的Vue 2的API添加了Code Snippets. 具体的快捷名见插件的详细介绍。marketplace.visualstudio.com/items?itemN…

Vue VSCode Snippets

Snippets that will supercharge your Vue workflow.

代码片段的快捷简写。能有效提高代码编写效率,很实用。Vscode设置: Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": "onlySnippets" to your personal settings。

更多的快捷方式参考链接:marketplace.visualstudio.com/items?itemN…

3. 其他

Auto Close Tag

Automatically add HTML/XML close tag.

自动添加闭合标签。

Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX

Auto-Open Markdown Preview

Open Markdown preview automatically when opening a Markdown file.

打开md文件时,自动打开预览模式。

XML Tools

XML Formatting, XQuery, and XPath Tools for Visual Studio Code.

Beautify

Beautify code in place for VS Code.

美化代码格式。

ESLint

Integrates ESLint JavaScript into VS Code.

代码检测。

Prettier

EditorConfig for VS Code

EditorConfig for VS Code 插件可以让编译器读取配置文件,并且按照配置文件 .editorconfig 里面的规定来格式化代码。

Code Runner

Code runner.

代码运行。

path-alias

在导入文件时,有别名提示。

indent-rainbow

彩虹缩进。

Bracket Pair Colorizer 2

给匹配的括号() 或者 对象{}.. 添加对应的颜色用于区分。

auto rename tag

自动重命名标签。

Code Spell Checker

检查单词拼写是否错误(支持英语)。

Debugger for Chrome

vscode端调试代码。

Tabnine

智能提示代码,可以预测你将要写的代码进行提示。

Highlight Matching Tag

当光标停留在标签时,高亮匹配的标签。