分享13个实用VSCode插件,让你写代码不再头疼!!

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插件。希望它们也能让大家的代码编写更加方便且愉快。