没用过这些 VSCode 插件？怪不得写代码头疼

以你之姓@ 2023-07-06 08:45 24阅读 0赞

> **写在前面**： 我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。`技术是开源的、知识是共享的`。  
>   
> 这博客是对自己学习的一点点总结及记录，如果您对 *Java*、*算法* 感兴趣，可以关注我的动态，我们一起学习。  
>   
> `用知识改变命运，让我们的家人过上更好的生活`。

***相关文章***：

[史上最全的IDEA快捷键总结，提高开发效率][IDEA]

[Idea 中最常用的10款插件，提高开发效率][Idea _10]

[史上最牛逼的 Eclipse 快捷键，提高开发效率][Eclipse]

[史上最全的 VsCode 快捷键，提高开发效率][VsCode]

--------------------

#### 1. Codelf ####

`变量命名神器`  
![在这里插入图片描述][20200214154228713.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 1]

#### 2、View In Browser ####

`在浏览器里面预览正在编辑的html文件`

![在这里插入图片描述][20200214145407383.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 2]

### 3、Color Highlight ###

`高亮显示样式颜色`  
![在这里插入图片描述][20200215160655381.png]  
![在这里插入图片描述][2020021517173458.png]

#### 4、Bracket Pair Colorizer ####

`成对的彩色括号，让括号拥有独立的颜色，便于区分`

![在这里插入图片描述][20200214145615614.png]

![在这里插入图片描述][20200214150024547.png]

#### 5、Highlight Matching Tag ####

`高亮显示对应的HTML标签以及标识出对应的各种括号`  
![在这里插入图片描述][20200214150907664.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 3]

#### 6、Path Intellisense ####

`在编辑器中输入路径的时候，能自动补全`  
![在这里插入图片描述][20200214155449228.png]

![在这里插入图片描述][20200215155140396.gif]

#### 7、Prettier - Code formatter ####

`格式化代码`  
![在这里插入图片描述][20200214160218975.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 4]

### 8、Auto Close Tag ###

`自动补全标签`  
![在这里插入图片描述][20200215160933111.png]

### 9、Auto Rename Tag ###

`自动重命名html标签，如修改p标签为a，将自动修改结尾标签p为a`  
![在这里插入图片描述][20200215155923254.png]

### 10、HTML Snippets ###

`智能提示HTML标签，以及标签的含义`  
![在这里插入图片描述][20200215170349263.png]

### 11、HTML CSS Support ###

`在HTML标签上写Class的时候能够智能提示当前所支持的样式`  
![在这里插入图片描述][20200215170448954.png]

### 12、indent-rainbow ###

`带颜色的缩进`  
![在这里插入图片描述][20200215160336831.png]  
![在这里插入图片描述][20200215172855624.png]

### 13、change-case ###

`转换命名风格`  
![在这里插入图片描述][20200215162957975.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 5]

--------------------

***由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！***

[IDEA]: https://blog.csdn.net/weixin_43570367/article/details/103963249
[Idea _10]: https://blog.csdn.net/weixin_43570367/article/details/103978005
[Eclipse]: https://blog.csdn.net/weixin_43570367/article/details/104263892
[VsCode]: https://blog.csdn.net/weixin_43570367/article/details/105168732
[20200214154228713.png]: https://img-blog.csdnimg.cn/20200214154228713.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200214155030351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020021516575819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw==,size_16,color_FFFFFF,t_70
[20200214145407383.png]: https://img-blog.csdnimg.cn/20200214145407383.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200214162543469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw==,size_16,color_FFFFFF,t_70
[20200215160655381.png]: https://img-blog.csdnimg.cn/20200215160655381.png
[2020021517173458.png]: https://img-blog.csdnimg.cn/2020021517173458.png
[20200214145615614.png]: https://img-blog.csdnimg.cn/20200214145615614.png
[20200214150024547.png]: https://img-blog.csdnimg.cn/20200214150024547.png
[20200214150907664.png]: https://img-blog.csdnimg.cn/20200214150907664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200214151206308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw==,size_16,color_FFFFFF,t_70
[20200214155449228.png]: https://img-blog.csdnimg.cn/20200214155449228.png
[20200215155140396.gif]: https://img-blog.csdnimg.cn/20200215155140396.gif
[20200214160218975.png]: https://img-blog.csdnimg.cn/20200214160218975.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020021415354316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw==,size_16,color_FFFFFF,t_70
[20200215160933111.png]: https://img-blog.csdnimg.cn/20200215160933111.png
[20200215155923254.png]: https://img-blog.csdnimg.cn/20200215155923254.png
[20200215170349263.png]: https://img-blog.csdnimg.cn/20200215170349263.png
[20200215170448954.png]: https://img-blog.csdnimg.cn/20200215170448954.png
[20200215160336831.png]: https://img-blog.csdnimg.cn/20200215160336831.png
[20200215172855624.png]: https://img-blog.csdnimg.cn/20200215172855624.png
[20200215162957975.png]: https://img-blog.csdnimg.cn/20200215162957975.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200215163335865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw==,size_16,color_FFFFFF,t_70