【推荐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

文章图片
这样,你就可以从任何你想要的设备上访问你喜欢的IDE,而不是在新设备上从普通的VSCode环境中编程,或者重新手动设置一切。
Settings Sync链接地址:https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Live Server

文章图片
每次保存代码时,你都会立即看到浏览器中反映的更改。你将更快地发现错误,并且更容易用代码进行一些快速测试。
Live Server链接地址:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Remote SSH

文章图片
你在本地机器上也不需要任何源代码,因为插件直接在远程机器上运行命令和其他VSCode插件。
Remote SSH链接地址:https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh
Prettier

文章图片
你可以设置它,这样每当你保存代码时,它就会对代码进行格式化,这大大减少了你需要花费在格式化代码上的时间。
Prettier链接地址:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Bracket Pair Colorizer

文章图片
还可以配置自定义括号字符,并且还可以向活动范围添加背景颜色。
Bracket Pair Colorizer链接地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Auto Rename Tag

文章图片
该插件适用于HTML、XML、PHP和JavaScript,并且不需要更改两次标记名称。
编辑: 一些人在评论中提到自动重命名标签有很多bug,所以要小心。
Auto Rename Tag链接地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
GitLens

文章图片
GitLens是一个高度可定制的插件。如果你不喜欢某个特定的设置,你可以很容易地在设置中关闭它。
GitLens链接地址:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git History

文章图片
该VSCode插件也是相当全面的,它允许你比较分支、提交和跨提交的文件。你也可以查看Github的头像,这是相当整洁的。
Git History链接地址:https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
CSS Peek

文章图片
如果你知道类或ID名称,它还允许你快速跳转到正确的CSS代码。
CSS Peek链接地址:https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
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

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

文章图片
Colorize链接地址:https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
Code Spell Checker

文章图片
该VSCode插件可在许多不同的语言和支持专业术语,如医学术语。
Code Spell Checker链接地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Debugger for Chrome

文章图片
你可以设置断点、逐步执行代码、动态添加调试脚本等等。
Debugger for Chrome链接地址:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Icon Fonts

文章图片
对于那些不使用VSCode的用户,这个VSCode插件也可以用于Atom和Sublime Text。
Icon Fonts地址:https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Turbo Console Log

文章图片
Turbo Console Log地址:https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
TODO Highlight

文章图片
你可以切换高亮显示,也可以列出所有高亮显示的注释,并从相应的文件中显示它们。
TODO Highlight链接地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
vscode-icons

文章图片
vscode-icons链接地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
Regex Previewer

文章图片
该插件提供了多个要匹配的示例,因此为各种用例快速而准确地编写正则表达式变得更加容易。
Regex Previewer链接地址:https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
Bookmarks

文章图片
此外,它允许你在书签代码之间选择代码区域,这对于日志文件分析之类的东西非常有用。
Bookmarks链接地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
这是推荐的20个常用的VSCode插件合集,可以在不影响质量的情况下提高你的编程效率。如果你喜欢这篇文章,并认为其他人也可以从中受益,请随意使用页面顶部的按钮在社交媒体上分享它。
推荐阅读
- 11个最佳而常用的React组件库,前端开发必备!
- 如何成为软件架构师(学习路线图)
- 采矿是如何运作的(为什么需要采矿?)
- 著名公司如何使用机器学习(机器学习应用例子)
- 链接器如何解析在多个位置定义的全局符号()
- 我如何在Facebook中发现错误并获得500美元()
- Jetty热部署问题
- Linux主机入侵检测
- Zabbix安装部署六————监控nginx