VSCode是程序员日常中不可或缺的一个文本编辑器,它具有轻盈快捷、多功能、支持各种语言等优点,因此备受欢迎。而在众多插件中,以下13个VSCode插件是我最常用、最实用的插件,值得与大家分享一下。
1. Live Server (实时预览)
Live Server是一个可以在浏览器上实时预览代码的插件,可以大大提高开发效率。除此之外,它还具有自动刷新页面的功能,省去了频繁手动刷新的麻烦。只需在本地启动一个web服务,即可在本地进行代码编辑并实时查看效果。
在使用中,如果需要在一些不以html为后缀名的文件上使用,例如jsp,需要做一些配置。
{
"liveServer.settings.root": "/src/main/webapp",
"liveServer.settings.fileExtensions": [
".html",
".jsp",
]
}
2. Prettier (代码格式化)
作为一款专业的代码格式化工具,Prettier支持多种代码语言,可以自动将不规范的代码格式化为符合规范的风格,大大提升了代码的可读性。使用Prettier可以使我们省去大量的手动调整代码格式的工作。
使用Prettier,我们可以通过快捷键(Ctrl+Shift+P)进行调用,也可以选择将它集成到VSCode中,直接按下快捷键(Shift+Alt+F)即可对代码进行格式化。
3. Bracket Pair Colorizer (括号匹配)
在复杂的代码中,括号的匹配常常是一个难点。 Bracket Pair Colorizer插件可以给不同的括号设置不同的颜色,让匹配变得更加直观,减少出错的概率。同时,该插件也支持在匹配过程中进行快速跳转。
在使用中,我们可以通过安装插件后在设置中进行相关设置即可。
{
"bracket-pair-colorizer-2.colors": [
"#ff0000",
"#00ff00",
"#0000ff",
"#ffff00",
"#00ffff",
"#ff00ff"
]
}
4. GitLens (Git工具)
Git是程序员必须掌握的一种代码管理工具。而在VSCode中, GitLens这个插件可以让Git的使用更加方便。它可以在代码中显示文件的Git历史记录、作者、最近一次提交等信息,让我们能够更加方便地追踪代码的历史变更。同时,它还支持代码注释中显示特定行号的提交信息。
5. ES7 React/Redux/GraphQL/React-Native Snippets (React代码片段)
如果你正在写React项目,那么该插件就是你的福音。它提供了许多React需要用到的代码片段,如快速生成React组件和Redux模板等,可以让我们更加快速地进行React项目的开发。
6. Code Spell Checker (代码拼写检查)
一个不好的拼写易导致代码出错或不可读。 Code Spell Checker插件可以在我们编写代码的过程中,进行拼写检查,修正打错的单词,提供更加规范的代码编写方式。代码中的注释也会被检查。
7. REST Client (接口调试)
REST Client插件是一个RESTful接口调试工具, 在调试API时十分实用。可以直接在VSCode中编写和调试HTTP请求,支持多种数据格式的请求,包括JSON、XML、FORM等。 只需在VSCode中创建一个HTTP请求文件,输入请求的相关信息,就可以直接在编辑器中看到API响应的结果。
8. Polacode (代码截图)
如果需要在文档或博客中展示代码, Polacode是一个非常好用的工具。它可以将VSCode中的代码截图,并将其格式化成一个可以嵌入页面的可复制的图片。在使用中,我们可以选择要截图的代码段,点击右键,选择Polacode插件即可。此外,它还支持自定义主题,可以让截取的代码更加美观。
9. Quokka.js (实时JS调试工具)
Quokka.js是一个非常好用的JavaScript调试工具,在VSCode中安装该插件后,只需在JS文件中按下Ctrl+ K, 然后按下Q键即可开启Quokka.js的调试功能。 Quokka.js可以帮助开发者在代码中调试JavaScript,尤其是在进行一些快速语句的调试时更为方便。
10. Vim (Vim模拟器)
Vim是一款非常经典的命令行文本编辑器,它由一系列的快捷键来完成文件操作。而 VSCode中有一个 Vim插件是为了让更多程序员能够在VSCode中模拟Vim编辑风格,希望能让程序员更好的体验代码编写的乐趣。
11. Debug Visualizer (数据可视化)
Debug Visualizer可以将大量数据以可视化的形式展示出来,减轻程序员对一些复杂数据类型的调试难度。同时,该插件还支持与调试器对接,让程序员可以获得更加详细的信息。
12. Rainbow Brackets (括号彩虹)
在编写代码时,经常会用到很多括号,而在处理很多括号时,容易忘记哪个括号与哪个括号相对应。 Rainbow Brackets这个插件可以让相同的括号颜色一样,从而更加直观地区分不同的括号。同时,它也支持多种括号类型,如{}, (), [],等。
13. Auto Close Tag (自动闭合标签)
Auto Close Tag是一个非常实用的插件,以XML为主的语言中,当我们写完一个标签后,该插件可以自动闭合标签,避免输入标签时的出错问题。例如:当我们输入的标签为<div>时,我们只需直接输入完整的标签即可,节省了我们的时间和精力。
以上是我使用频率最高、最实用的13个VSCode插件。希望它们也能让大家的代码编写更加方便且愉快。