vscode插件之常用插件

清疚 2023-05-30 15:53 17阅读 0赞

也算用了不少编辑器，但感觉还是vscode比较好用，下面介绍一些常用插件，有次手贱把插件删了，废了好大劲

### 1，Chinese；=》中文包，反正我英语差的一批（必备） ###

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

### 2，Auto Close Tag；=》自动添加HTML / XML关闭标签（必备） ###

![在这里插入图片描述][20191111095508341.png]  
![在这里插入图片描述][20191111101036804.gif]

### 3，Auto Rename Tag；=》自动重命名配对的HTML / XML标签 ###

![在这里插入图片描述][20191111095950166.png]  
![在这里插入图片描述][201911111010267.gif]

### 4，Beautify =》格式化javascript，JSON，CSS，Sass，和HTML ###

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

### 5，Bracket Pair Colorizer ；=》添加不同颜色的括号，便于分辨属于哪个作用域 ###

![在这里插入图片描述][201911111004215.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]

### 6，ES7 React/Redux/GraphQL/React-Native snippets=》 React开发必备，代码补全，规范代码样式 ###

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

### 7，HTML Snippets；=》各种 HTML 标签片段 ###

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

### 8，htmltagwrap ；=》在选中代码两侧添加标签 ###

比較好用的插件，不过我修改了快捷键，不习惯这个自带 的快捷键  
![在这里插入图片描述][20191111102101492.png]  
![在这里插入图片描述][20191111102221405.gif]

### 9，JavaScript (ES6) code snippets =》es6代码片段 ###

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

### 10，open in browser；=》在浏览器中打开，vscode没有自带浏览器打开功能（必备） ###

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

### 11，Path Intellisense；=》路径补全工具 ###

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

### 12，PHP Intelephense；=》PHP智能感知 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]

### 13，Vetur；语法高亮、智能感知 ###

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

### 14，vscode-icons；=》图标工具 ###

![在这里插入图片描述][20191111102957736.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3]

### 15，VS Color Picker；=》取色器工具；推荐，有吸管功能（推荐） ###

vscode和webstrom不同，自带的颜色没有取色功能，这个可以选取其他页面的颜色  
![在这里插入图片描述][20191111103205463.png]

[20191111095407352.png]: https://img-blog.csdnimg.cn/20191111095407352.png
[20191111095508341.png]: https://img-blog.csdnimg.cn/20191111095508341.png
[20191111101036804.gif]: https://img-blog.csdnimg.cn/20191111101036804.gif
[20191111095950166.png]: https://img-blog.csdnimg.cn/20191111095950166.png
[201911111010267.gif]: https://img-blog.csdnimg.cn/201911111010267.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191111100222459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[201911111004215.png]: https://img-blog.csdnimg.cn/201911111004215.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191111101216233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[20191111100713851.png]: https://img-blog.csdnimg.cn/20191111100713851.png
[20191111100856491.png]: https://img-blog.csdnimg.cn/20191111100856491.png
[20191111102101492.png]: https://img-blog.csdnimg.cn/20191111102101492.png
[20191111102221405.gif]: https://img-blog.csdnimg.cn/20191111102221405.gif
[20191111102312316.png]: https://img-blog.csdnimg.cn/20191111102312316.png
[20191111102455479.png]: https://img-blog.csdnimg.cn/20191111102455479.png
[20191111102514974.png]: https://img-blog.csdnimg.cn/20191111102514974.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191111102744354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[20191111102844124.png]: https://img-blog.csdnimg.cn/20191111102844124.png
[20191111102957736.png]: https://img-blog.csdnimg.cn/20191111102957736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191111102948181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[20191111103205463.png]: https://img-blog.csdnimg.cn/20191111103205463.png