VS Code实用插件推荐

星星点点微光

6378人浏览 · 2022-09-06 17:10:36

星星点点微光 · 2022-09-06 17:10:36 发布

一、外观优化插件

1.1 Chinese

中文插件包，看起来清晰明了，安装完重启vs即可生效；

1.2 Better Comments

一款美化注释的插件，可以根据不同种类的注释，显示不同的颜色，一目了然。还可以通过扩展配置文件自定义任何颜色，类型的注释。

在这里插入图片描述

1.3 Color Highlight

用于给我们代码中的颜色进行高亮展示的插件，直接将代码中颜色值高亮展示。
在这里插入图片描述

1.4 Material Theme Icons

设置文件图标的，这个是我比较喜欢使用的一个文件样式，还有很多其他的文件图标大家可以自行选择。
在这里插入图片描述

1.5 Error Gutters

报错提示，报错的地方都有大红波浪线提示，可以很快的定位错误。
在这里插入图片描述

1.6 Image preview

预览代码中图片的引用，鼠标移上去就会展示图片。
在这里插入图片描述

1.7 indent-rainbow

彩虹缩进，就是把代码不同的缩进展示不同的颜色。
在这里插入图片描述

1.8 Trailing Spaces

强迫症福音，这个插件会把尾随空格显示出来。
在这里插入图片描述

1.9 代码主题插件

好看的背景主题，可以显示不同颜色高亮的语法提示，为此我总结了以下几种背景插件：

Theme - Oceanic Next
Material Theme
Dracula Official:
Winter is coming
Night Owl
One Dark Pro
PaleNight

二、功能优化插件

2.1 Code Spell Checker

检查代码中单词拼写是否正确，当单词不正常的时候，就会在下方出现波浪线进行提示，还可以自定义词典，忽略某个单词的检查等。
在这里插入图片描述

2.2 Git History

右键单击文件选择 Git：View File History 来以列表的形式查看所有的提交记录。可以更好的溯源，知道谁修改过代码。
在这里插入图片描述

2.3 GitLens — Git supercharged

这个也是跟 git 相关的插件，可以看到我的每一行代码都有上一次 git 提交的记录，那就是这个插件的功劳。
在这里插入图片描述

2.4 open in browser

安装完以后在目标的 html 文件上右击，选择 open in default browser 即可打开使用浏览器打开文件。或者快捷键alt + b
在这里插入图片描述

2.5 Postcode

在 vscode 里面使用 postman ，安装完以后左侧菜单会出现一个小盒子的图标，点开以后点击 Create Request 就可以正常使用了。
在这里插入图片描述

三、提升编码效率用插件

3.1 Auto Rename Tag

自动修改标签名，重命名一个开始标签时，自动重命名配对的结束标签。
在这里插入图片描述

3.2 javascript console utils

前端人员的调试少不了 console.log ，那么这就是一款快速生成 console.log 的插件。使用方法非常简单，选中变量，然后按 ctrl + shift + L 就可以生成了。需要删除的时候按 ctrl + shift + D 即可删除。
在这里插入图片描述

3.3 Document this

头部注释，给方法注释快捷键ctrl + alt + d / control + option + d。支持自定义内容，需要在 settings.json 中进行自定义配置。
在这里插入图片描述

"psi-header.templates": [{  
    "language": "*",  
    "template": [  
        "@workOrder 模块名",  
        "",  
        "@author LZH",  
        "@date <<dateformat('YYYY-MM-DD HH:mm:ss a')>>",  
        "@copyright Copyright (c) <<year>>"  
     ]  
},]