srcminiVSCode插件对于加速工作而不降低输出质量是非常重要的。考虑到Visual Studio Code是最流行的IDE（Java免费IDE），本文收集了20个常用的VSCode插件，使用这些常用的VSCode插件将使你成为更高效的开发人员。这些插件主要适用于web开发人员，但也有一些通用的插件也会让其他人受益。
以下是我们将涉及的VSCode插件:
- Settings Sync
- Live Server
- Remote SSH
- Prettier
- Bracket Pair Colorizer
- Auto Rename Tag
- GitLens
- Git History
- CSS Peek
- JavaScript Code Snippets
- Peacock
- Colorize
- Code Spell Checker
- Debugger for Chrome
- Icon Fonts
- Turbo Console Log
- TODO Highlight
- vscode-icons
- Regex Previewer
- Bookmarks
Settings Sync
在你开始考虑安装常用的VSCode插件之前，最好知道Settings Sync的存在。它允许你同步你在VSCode上自定义的几乎所有东西到Github，从设置到键盘快捷键到其他VSCode插件。
这样，你就可以从任何你想要的设备上访问你喜欢的IDE，而不是在新设备上从普通的VSCode环境中编程，或者重新手动设置一切。
Settings Sync链接地址：https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Live Server
这是我最喜欢的VSCode插件之一，Live Server为静态和动态页面启动本地开发服务器，并提供动态重新加载功能。
每次保存代码时，你都会立即看到浏览器中反映的更改。你将更快地发现错误，并且更容易用代码进行一些快速测试。
Live Server链接地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Remote SSH
Remote SSH插件允许你使用任何带有SSH服务器的远程机器作为开发环境，这使得在各种场景中开发和/或排除故障变得更加容易。
你在本地机器上也不需要任何源代码，因为插件直接在远程机器上运行命令和其他VSCode插件。
Remote SSH链接地址：https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh
Prettier
Prettier是一种固执己见的代码格式化程序，如果有多人在同一个项目上工作，它的工作效果特别好，因为该VSCode插件强制执行一致的风格。这是一个很常用的VSCode插件，它可以帮助你得到更规范的代码风格。
你可以设置它，这样每当你保存代码时，它就会对代码进行格式化，这大大减少了你需要花费在格式化代码上的时间。
Prettier链接地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Bracket Pair Colorizer
常用的VSCode插件中，Bracket Pair Colorizer用于美化括号样式。线索在标题中，但方括号对着色器提供了匹配颜色的开始和结束方括号，使它更容易知道哪些方括号属于一起。
还可以配置自定义括号字符，并且还可以向活动范围添加背景颜色。
Bracket Pair Colorizer链接地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Auto Rename Tag
这是一个快速匹配表示的VSCode插件，VSCode会突出显示匹配的标签，并在你输入开始标签时立即添加结束标签，而Auto Rename Tag会自动重命名你更改的标签。
该插件适用于HTML、XML、PHP和JavaScript，并且不需要更改两次标记名称。
编辑: 一些人在评论中提到自动重命名标签有很多bug，所以要小心。
Auto Rename Tag链接地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
GitLens
GitLens增强了Visual Studio代码的Git功能。这是一个强大的VSCode插件，允许你查看谁、为什么以及代码行如何随着时间发生了变化(以及许多其他特性)。
GitLens是一个高度可定制的插件。如果你不喜欢某个特定的设置，你可以很容易地在设置中关闭它。
GitLens链接地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git History
与GitLens类似，Git History是一个VSCode插件，它提供了一个可视化的Git日志。你不再需要在终端中查看git登录，Git在开发中用的非常频繁，GitLens也作为一款常用的VSCode插件。
该VSCode插件也是相当全面的，它允许你比较分支、提交和跨提交的文件。你也可以查看Github的头像，这是相当整洁的。
Git History链接地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
CSS Peek
对于前端开发人员来说，这个VSCode插件是无价的。受IDE括号中类似特性的启发，CSS Peek允许插件HTML和ejs文件，以在源代码中显示CSS/SCSS/LESS代码。
如果你知道类或ID名称，它还允许你快速跳转到正确的CSS代码。
CSS Peek链接地址：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
JavaScript Code Snippets
虽然VSCode内置了JS的智能感知，但JavaScript Code Snippets通过添加大量的导入/导出触发器、类帮助器和方法触发器来增强这种体验。
该VSCode插件支持JS, TypeScript, JS React, TS React, HTML和Vue。在VSCode市场中，Angular等其他风格的代码片段也很容易获得。
JavaScript Code Snippets链接地址：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
Peacock
这个常用的VSCode插件很可爱。Peacock允许你改变Visual Studio代码环境的颜色，这样你就可以快速识别你刚刚切换到的实例。
Peacock链接地址：https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
Colorize
这是一款关于颜色的VSCode插件，坚持使用颜色，Colorize立即可视化CSS颜色在CSS/SASS/Less/…文件。这使它很容易一眼就看出你在哪里使用的颜色。
Colorize链接地址：https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
Code Spell Checker
尽管它没有其它VSCode插件那么重要，但我还是希望我的代码没有拼写错误。Code Spell Checker为它在字典文件中无法识别的单词下划线。
该VSCode插件可在许多不同的语言和支持专业术语，如医学术语。
Code Spell Checker链接地址：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Debugger for Chrome
该VSCode插件由微软开发，Debugger for Chrome允许你调试你的JS代码在VSCode。与其他ide中的调试器不同，它出奇的流畅，它也是一款常用的VSCode插件，因为我们大部分时间都是在调试，所以我们希望有一个更好的调试器。
你可以设置断点、逐步执行代码、动态添加调试脚本等等。
Debugger for Chrome链接地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Icon Fonts
Icon Fonts提供了各种图标字体的片段，包括流行字体Awesome v5图标包。
对于那些不使用VSCode的用户，这个VSCode插件也可以用于Atom和Sublime Text。
Icon Fonts地址：https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Turbo Console Log
Turbo Console日志插件自动创建有意义的日志消息的过程。它使调试变得更容易，因为你可以使用一些有用的控制台输出来找出错误的原因，Turbo Console是一个非常有用的VSCode插件。
Turbo Console Log地址：https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
TODO Highlight
我承认，我曾经在评论中写下待办事项，然后完全忘记它们，TODO Highlight可以使他们更突出。
你可以切换高亮显示，也可以列出所有高亮显示的注释，并从相应的文件中显示它们。
TODO Highlight链接地址：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
vscode-icons
又是一个常用的VSCode插件，同样是关于图标的。你可能不认为图标有什么大的区别，但它们确实有(至少对我来说)。vcode-icons为你的IDE添加了一些颜色和可爱的小图标，我已经开始喜欢上了。
vscode-icons链接地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
Regex Previewer
这个VSCode插件用于处理正则表达式，正则表达式是一个非常难理解的问题。Regex Previewer为你提供一个匹配正则表达式的副文档。
该插件提供了多个要匹配的示例，因此为各种用例快速而准确地编写正则表达式变得更加容易。
Regex Previewer链接地址：https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
Bookmarks
最后一个常用的VSCode插件是Bookmarks，虽然VSCode有行号，但Bookmarks可以让你在代码中添加书签，帮助你快速导航，轻松来回跳转。
此外，它允许你在书签代码之间选择代码区域，这对于日志文件分析之类的东西非常有用。
Bookmarks链接地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
这是推荐的20个常用的VSCode插件合集，可以在不影响质量的情况下提高你的编程效率。如果你喜欢这篇文章，并认为其他人也可以从中受益，请随意使用页面顶部的按钮在社交媒体上分享它。
评论前必须登录！
注册