推荐20个常用的VSCode插件,码农开发必备!

【推荐20个常用的VSCode插件,码农开发必备!】VSCode插件对于加速工作而不降低输出质量是非常重要的。考虑到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
推荐20个常用的VSCode插件,码农开发必备!

文章图片
Settings Sync为你节省了大量安装跨设备插件的时间
在你开始考虑安装常用的VSCode插件之前,最好知道Settings Sync的存在。它允许你同步你在VSCode上自定义的几乎所有东西到Github,从设置到键盘快捷键到其他VSCode插件。
这样,你就可以从任何你想要的设备上访问你喜欢的IDE,而不是在新设备上从普通的VSCode环境中编程,或者重新手动设置一切。
Settings Sync链接地址:https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Live Server
推荐20个常用的VSCode插件,码农开发必备!

文章图片
立即查看浏览器中反映的代码更改
这是我最喜欢的VSCode插件之一,Live Server为静态和动态页面启动本地开发服务器,并提供动态重新加载功能。
每次保存代码时,你都会立即看到浏览器中反映的更改。你将更快地发现错误,并且更容易用代码进行一些快速测试。
Live Server链接地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Remote SSH
推荐20个常用的VSCode插件,码农开发必备!

文章图片
使用任何带有SSH服务器的远程机器
Remote SSH插件允许你使用任何带有SSH服务器的远程机器作为开发环境,这使得在各种场景中开发和/或排除故障变得更加容易。
你在本地机器上也不需要任何源代码,因为插件直接在远程机器上运行命令和其他VSCode插件。
Remote SSH链接地址:https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh
Prettier
推荐20个常用的VSCode插件,码农开发必备!

文章图片
花更少的时间格式化代码
Prettier是一种固执己见的代码格式化程序,如果有多人在同一个项目上工作,它的工作效果特别好,因为该VSCode插件强制执行一致的风格。这是一个很常用的VSCode插件,它可以帮助你得到更规范的代码风格。
你可以设置它,这样每当你保存代码时,它就会对代码进行格式化,这大大减少了你需要花费在格式化代码上的时间。
Prettier链接地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Bracket Pair Colorizer
推荐20个常用的VSCode插件,码农开发必备!

文章图片
每个人都喜欢配色
常用的VSCode插件中,Bracket Pair Colorizer用于美化括号样式。线索在标题中,但方括号对着色器提供了匹配颜色的开始和结束方括号,使它更容易知道哪些方括号属于一起。
还可以配置自定义括号字符,并且还可以向活动范围添加背景颜色。
Bracket Pair Colorizer链接地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Auto Rename Tag
推荐20个常用的VSCode插件,码农开发必备!

文章图片
自动重命名标签
这是一个快速匹配表示的VSCode插件,VSCode会突出显示匹配的标签,并在你输入开始标签时立即添加结束标签,而Auto Rename Tag会自动重命名你更改的标签。
该插件适用于HTML、XML、PHP和JavaScript,并且不需要更改两次标记名称。
编辑: 一些人在评论中提到自动重命名标签有很多bug,所以要小心。
Auto Rename Tag链接地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
GitLens
推荐20个常用的VSCode插件,码农开发必备!

文章图片
增强Git功能
GitLens增强了Visual Studio代码的Git功能。这是一个强大的VSCode插件,允许你查看谁、为什么以及代码行如何随着时间发生了变化(以及许多其他特性)。
GitLens是一个高度可定制的插件。如果你不喜欢某个特定的设置,你可以很容易地在设置中关闭它。
GitLens链接地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git History
推荐20个常用的VSCode插件,码农开发必备!

文章图片
查看git日志
与GitLens类似,Git History是一个VSCode插件,它提供了一个可视化的Git日志。你不再需要在终端中查看git登录,Git在开发中用的非常频繁,GitLens也作为一款常用的VSCode插件。
该VSCode插件也是相当全面的,它允许你比较分支、提交和跨提交的文件。你也可以查看Github的头像,这是相当整洁的。
Git History链接地址:https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
CSS Peek
推荐20个常用的VSCode插件,码农开发必备!

文章图片
插件HTML文件以查看CSS代码
对于前端开发人员来说,这个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
推荐20个常用的VSCode插件,码农开发必备!

文章图片
更多的JS功能
虽然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
推荐20个常用的VSCode插件,码农开发必备!

文章图片
改变你的VSCode实例的颜色
这个常用的VSCode插件很可爱。Peacock允许你改变Visual Studio代码环境的颜色,这样你就可以快速识别你刚刚切换到的实例。
Peacock链接地址:https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
Colorize
推荐20个常用的VSCode插件,码农开发必备!

文章图片
看看你在你的风格指南中使用了什么颜色
这是一款关于颜色的VSCode插件,坚持使用颜色,Colorize立即可视化CSS颜色在CSS/SASS/Less/…文件。这使它很容易一眼就看出你在哪里使用的颜色。
Colorize链接地址:https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
Code Spell Checker
推荐20个常用的VSCode插件,码农开发必备!

文章图片
没有更多的拼写错误
尽管它没有其它VSCode插件那么重要,但我还是希望我的代码没有拼写错误。Code Spell Checker为它在字典文件中无法识别的单词下划线。
该VSCode插件可在许多不同的语言和支持专业术语,如医学术语。
Code Spell Checker链接地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Debugger for Chrome
推荐20个常用的VSCode插件,码农开发必备!

文章图片
在VScode中调试你的JS代码
该VSCode插件由微软开发,Debugger for Chrome允许你调试你的JS代码在VSCode。与其他ide中的调试器不同,它出奇的流畅,它也是一款常用的VSCode插件,因为我们大部分时间都是在调试,所以我们希望有一个更好的调试器。
你可以设置断点、逐步执行代码、动态添加调试脚本等等。
Debugger for Chrome链接地址:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Icon Fonts
推荐20个常用的VSCode插件,码农开发必备!

文章图片
使用图标!
Icon Fonts提供了各种图标字体的片段,包括流行字体Awesome v5图标包。
对于那些不使用VSCode的用户,这个VSCode插件也可以用于Atom和Sublime Text。
Icon Fonts地址:https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Turbo Console Log
推荐20个常用的VSCode插件,码农开发必备!

文章图片
自动创建有意义的日志消息
Turbo Console日志插件自动创建有意义的日志消息的过程。它使调试变得更容易,因为你可以使用一些有用的控制台输出来找出错误的原因,Turbo Console是一个非常有用的VSCode插件。
Turbo Console Log地址:https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
TODO Highlight
推荐20个常用的VSCode插件,码农开发必备!

文章图片
立即发现代码中的待办事项
我承认,我曾经在评论中写下待办事项,然后完全忘记它们,TODO Highlight可以使他们更突出。
你可以切换高亮显示,也可以列出所有高亮显示的注释,并从相应的文件中显示它们。
TODO Highlight链接地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
vscode-icons
推荐20个常用的VSCode插件,码农开发必备!

文章图片
等等,不是每个人都喜欢图标吗?
又是一个常用的VSCode插件,同样是关于图标的。你可能不认为图标有什么大的区别,但它们确实有(至少对我来说)。vcode-icons为你的IDE添加了一些颜色和可爱的小图标,我已经开始喜欢上了。
vscode-icons链接地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
Regex Previewer
推荐20个常用的VSCode插件,码农开发必备!

文章图片
创建正则表达式的预览
这个VSCode插件用于处理正则表达式,正则表达式是一个非常难理解的问题。Regex Previewer为你提供一个匹配正则表达式的副文档。
该插件提供了多个要匹配的示例,因此为各种用例快速而准确地编写正则表达式变得更加容易。
Regex Previewer链接地址:https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
Bookmarks
推荐20个常用的VSCode插件,码农开发必备!

文章图片
在代码中添加书签
最后一个常用的VSCode插件是Bookmarks,虽然VSCode有行号,但Bookmarks可以让你在代码中添加书签,帮助你快速导航,轻松来回跳转。
此外,它允许你在书签代码之间选择代码区域,这对于日志文件分析之类的东西非常有用。
Bookmarks链接地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
这是推荐的20个常用的VSCode插件合集,可以在不影响质量的情况下提高你的编程效率。如果你喜欢这篇文章,并认为其他人也可以从中受益,请随意使用页面顶部的按钮在社交媒体上分享它。

    推荐阅读