手把手教你安装VS Code并附上超实用插件指南

红太狼 2023-10-03 15:42 3阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
[【前端之旅】Web基础与开发工具][Web]  
[【前端之旅】手把手教你安装VS Code并附上超实用插件指南][VS Code]  
[【前端之旅】HTML大总结][HTML]  
[【前端之旅】CSS三万字总结][CSS]  
[【前端之旅】JavaScript学习笔记][JavaScript]  
[【前端之旅】Web前端发展简史][Web 1]  
[【前端之旅】JavaScript进阶笔记][JavaScript 1]  
[【前端之旅】快速上手JSON][JSON]  
[【前端之旅】一文掌握AJAX技术][AJAX]  
[【前端之旅】Axios看这一篇就够了][Axios]  
[【前端之旅】响应式布局及Bootstrap框架][Bootstrap]  
[【前端之旅】Node.js安装教程（图文版）][Node.js]  
[【前端之旅】Webpack模块打包工具][Webpack]  
[【前端之旅】uni-app学习笔记][uni-app]  
[【前端之旅】手把手教你将uView UI配置到uniapp项目中][uView UI_uniapp]  
[【前端之旅】Nginx快速入门][Nginx]

> 工欲善其事，必先利其器，记录一下学习Web前端开发的强悍工具—Visual Studio Code

### 一、Visual Studio Code的下载与安装 ###

首先我们来到 [Visual Studio Code官网][Visual Studio Code]，下载 VS Code安装包。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA_size_20_color_FFFFFF_t_70_g_se_x_16]  
VS Code的安装比较简单，一直点击下一步即可，安装完成后打开，界面如下：  
![image-20210831202331448][]

### 二、VS Code 插件的安装 ###

![image-20210831203731884][]

*  点击扩展，通过插件名称进行搜索，点击 Install 即可。
 *  安装后，重启VS Code后插件就能生效。

### 三、超实用插件推荐 ###

#### 1、汉化插件 ####

Chinese (Simplified) Language Pack for Visual Studio Code

> 汉化界面，方便使用

![image-20210831205105712][]

#### 2、vscode-icon 插件 ####

> 不同的文件展示不同的图标，方便快速识别文件类型。

![image-20210831204823011][]

**效果：**  
![请添加图片描述][e0374e2e1e8f4c549828b790ac83e39c.gif]

#### 3、open in browser 右键运行插件 ####

> open in browser的作用是可以把编辑的HTML文件等用浏览器打开，查看效果。

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

**效果：**

![image-20210901170758716][]

#### 4、Auto Rename Tag ####

> 自动完成另一侧标签的同步修改。

![image-20210901162638030][]

**效果：**

![xx11][]

#### 5、Color Highlight 颜色插件 ####

> 用于颜色标记

![image-20210901165003759][]

**效果：**

![image-20210901165416102][]

#### 6、Image preview 图片预览 ####

> 当光标悬浮在图片路径上时，可以显示图片预览，方便判断是否引用了正确的图片或图标。

![image-20210901165103658][]

#### 7、Debugger for Chrome ####

> 映射vscode上的断点到chrome上，方便进行调试

![image-20210901170616353][]

#### 8、HTML Snippets ####

> 智能提示HTML标签，以及标签含义。

![image-20210901170553475][]

#### 当然，VS Code好用的插件还有很多，欢迎大家在评论区相互分享。 ####

最后为大家附上VS Code的快捷键。  
![快捷键][a2693c4eede0585380db66e8bce2a6ff.png]![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/f0b8d7f5f55942838721ae1fa4687e29.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[Web]: https://jumper.blog.csdn.net/article/details/113747343
[VS Code]: https://jumper.blog.csdn.net/article/details/120044481
[HTML]: https://jumper.blog.csdn.net/article/details/120873163
[CSS]: https://jumper.blog.csdn.net/article/details/121350224
[JavaScript]: https://jumper.blog.csdn.net/article/details/125818368
[Web 1]: https://jumper.blog.csdn.net/article/details/126669451
[JavaScript 1]: https://jumper.blog.csdn.net/article/details/127042045
[JSON]: https://jumper.blog.csdn.net/article/details/127058922
[AJAX]: https://jumper.blog.csdn.net/article/details/127077222
[Axios]: https://jumper.blog.csdn.net/article/details/127456907
[Bootstrap]: https://jumper.blog.csdn.net/article/details/127579513
[Node.js]: https://jumper.blog.csdn.net/article/details/122649972
[Webpack]: https://jumper.blog.csdn.net/article/details/128623065
[uni-app]: https://jumper.blog.csdn.net/article/details/119346463
[uView UI_uniapp]: https://jumper.blog.csdn.net/article/details/119283397
[Nginx]: https://jumper.blog.csdn.net/article/details/128655623
[Visual Studio Code]: https://code.visualstudio.com/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/070cc9730ddd4416a333c831ef26a4db.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA==,size_20,color_FFFFFF,t_70,g_se,x_16
[image-20210831202331448]: https://img-blog.csdnimg.cn/img_convert/1cddb734385f702e77e316c18d953a20.png
[image-20210831203731884]: https://img-blog.csdnimg.cn/img_convert/47f9a10cbd0c52ca892a4908bcb8579a.png
[image-20210831205105712]: https://img-blog.csdnimg.cn/img_convert/3921493fd955a4aed2f4f7a4e9512778.png
[image-20210831204823011]: https://img-blog.csdnimg.cn/img_convert/858816fc2f1162879faa57855e79a82d.png
[e0374e2e1e8f4c549828b790ac83e39c.gif]: https://img-blog.csdnimg.cn/e0374e2e1e8f4c549828b790ac83e39c.gif
[1acecb1f85f240bd9c5c0acc5e364ea0.png]: https://img-blog.csdnimg.cn/1acecb1f85f240bd9c5c0acc5e364ea0.png
[image-20210901170758716]: https://img-blog.csdnimg.cn/img_convert/79c510f9951876f32a4749caacc733a5.png
[image-20210901162638030]: https://img-blog.csdnimg.cn/img_convert/437fdd46349970735aaf6ebbc9d0bb20.png
[xx11]: https://img-blog.csdnimg.cn/img_convert/cf933be628f8d2a2beeb0610b3978ae0.gif
[image-20210901165003759]: https://img-blog.csdnimg.cn/img_convert/fa19a70d83c8c6d59d007a0b0d8a25e7.png
[image-20210901165416102]: https://img-blog.csdnimg.cn/img_convert/25726b1942d8aca1abed5c1ada9741de.png
[image-20210901165103658]: https://img-blog.csdnimg.cn/img_convert/c446413681e0856d7e5653f3a56d6b25.png
[image-20210901170616353]: https://img-blog.csdnimg.cn/img_convert/ea9f5b8af57368a3451e25b740ccb837.png
[image-20210901170553475]: https://img-blog.csdnimg.cn/img_convert/ca3ad626f454b1a97dd84e13f14c6f21.png
[a2693c4eede0585380db66e8bce2a6ff.png]: https://img-blog.csdnimg.cn/img_convert/a2693c4eede0585380db66e8bce2a6ff.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/63aff8e9e1e74fdeb748f816b69adf66.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a2Z5LiN5Z2aMTIwOA==,size_20,color_FFFFFF,t_70,g_se,x_16