个性化阅读
专注于IT技术分析

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

VSCode插件对于加速工作而不降低输出质量是非常重要的。考虑到Visual Studio Code是最流行的IDEJava免费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
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
立即查看浏览器中反映的代码更改

这是我最喜欢的VSCode插件之一,Live Server为静态和动态页面启动本地开发服务器,并提供动态重新加载功能。

每次保存代码时,你都会立即看到浏览器中反映的更改。你将更快地发现错误,并且更容易用代码进行一些快速测试。

Live Server链接地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Remote SSH

常用的VSCode插件:Remote SSH
使用任何带有SSH服务器的远程机器

Remote SSH插件允许你使用任何带有SSH服务器的远程机器作为开发环境,这使得在各种场景中开发和/或排除故障变得更加容易。

你在本地机器上也不需要任何源代码,因为插件直接在远程机器上运行命令和其他VSCode插件。

Remote SSH链接地址:https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

Prettier

常用的VSCode插件:Prettier
花更少的时间格式化代码

Prettier是一种固执己见的代码格式化程序,如果有多人在同一个项目上工作,它的工作效果特别好,因为该VSCode插件强制执行一致的风格。这是一个很常用的VSCode插件,它可以帮助你得到更规范的代码风格。

你可以设置它,这样每当你保存代码时,它就会对代码进行格式化,这大大减少了你需要花费在格式化代码上的时间。

Prettier链接地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Bracket Pair Colorizer

常用的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插件: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

常用的VSCode插件:GitLens
增强Git功能

GitLens增强了Visual Studio代码的Git功能。这是一个强大的VSCode插件,允许你查看谁、为什么以及代码行如何随着时间发生了变化(以及许多其他特性)。

GitLens是一个高度可定制的插件。如果你不喜欢某个特定的设置,你可以很容易地在设置中关闭它。

GitLens链接地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Git History

常用的VSCode插件:Git History
查看git日志

与GitLens类似,Git History是一个VSCode插件,它提供了一个可视化的Git日志。你不再需要在终端中查看git登录,Git在开发中用的非常频繁,GitLens也作为一款常用的VSCode插件。

该VSCode插件也是相当全面的,它允许你比较分支、提交和跨提交的文件。你也可以查看Github的头像,这是相当整洁的。

Git History链接地址:https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

CSS Peek

常用的VSCode插件:CSS Peek
插件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

常用的VSCode插件:JavaScript Code Snippets
更多的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

常用的VSCode插件:Peacock
改变你的VSCode实例的颜色

这个常用的VSCode插件很可爱。Peacock允许你改变Visual Studio代码环境的颜色,这样你就可以快速识别你刚刚切换到的实例。

Peacock链接地址:https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Colorize

常用的VSCode插件: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为它在字典文件中无法识别的单词下划线。

该VSCode插件可在许多不同的语言和支持专业术语,如医学术语。

Code Spell Checker链接地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Debugger for Chrome

常用的VSCode插件:Debugger for Chrome
在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

常用的VSCode插件: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

常用的VSCode插件:Turbo Console Log
自动创建有意义的日志消息

Turbo Console日志插件自动创建有意义的日志消息的过程。它使调试变得更容易,因为你可以使用一些有用的控制台输出来找出错误的原因,Turbo Console是一个非常有用的VSCode插件。

Turbo Console Log地址:https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

TODO Highlight

常用的VSCode插件:TODO Highlight
立即发现代码中的待办事项

我承认,我曾经在评论中写下待办事项,然后完全忘记它们,TODO Highlight可以使他们更突出。

你可以切换高亮显示,也可以列出所有高亮显示的注释,并从相应的文件中显示它们。

TODO Highlight链接地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

vscode-icons

常用的VSCode插件:vscode-icons
等等,不是每个人都喜欢图标吗?

又是一个常用的VSCode插件,同样是关于图标的。你可能不认为图标有什么大的区别,但它们确实有(至少对我来说)。vcode-icons为你的IDE添加了一些颜色和可爱的小图标,我已经开始喜欢上了。

vscode-icons链接地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Regex Previewer

常用的VSCode插件:Regex Previewer
创建正则表达式的预览

这个VSCode插件用于处理正则表达式,正则表达式是一个非常难理解的问题。Regex Previewer为你提供一个匹配正则表达式的副文档。

该插件提供了多个要匹配的示例,因此为各种用例快速而准确地编写正则表达式变得更加容易。

Regex Previewer链接地址:https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

Bookmarks

常用的VSCode插件:Bookmarks
在代码中添加书签

最后一个常用的VSCode插件是Bookmarks,虽然VSCode有行号,但Bookmarks可以让你在代码中添加书签,帮助你快速导航,轻松来回跳转。

此外,它允许你在书签代码之间选择代码区域,这对于日志文件分析之类的东西非常有用。

Bookmarks链接地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

这是推荐的20个常用的VSCode插件合集,可以在不影响质量的情况下提高你的编程效率。如果你喜欢这篇文章,并认为其他人也可以从中受益,请随意使用页面顶部的按钮在社交媒体上分享它。

赞(1) 打赏
未经允许不得转载:srcmini » 推荐20个常用的VSCode插件,码农开发必备!
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏