Visual Studio Code安装，基本操作，插件安装

柔情只为你懂 2023-10-02 18:35 12阅读 0赞

## Visual Studio Code安装：![5b31258400e341dd85c2f448310fdc44.png][] ##

这款软件给我印象就是（这款软件就是一个壳，功能很完善，强大到插件很完善）

### 1.1：下载:官网网址： ###

[Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.![favicon.ico][]https://code.visualstudio.com/Download][Download Visual Studio Code - Mac_ Linux_ WindowsVisual Studio Code is free and available on your favorite platform - Linux_ macOS_ and Windows. Download Visual Studio Code to experience a redefined code editor_ optimized for building and debugging modern web and cloud applications._favicon.ico_https_code.visualstudio.com_Download]

### 1.2:安装： ###

#### 步骤一：我接受协议 ####

#### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_10_color_FFFFFF_t_70_g_se_x_16][]   步骤二：选择安装到哪个位置 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16][]

#### 步骤三：可直接下一步 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 1][]

#### 步骤四：创建桌面快捷方式 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 2][]

#### 步骤五：可点击安装 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 3][]

#### 步骤六： ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 4][]

#### 安装成功 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 2， 基本操作 ##

### 2.1选择工作空间(第一次) ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

### 2.2：创建项目（文件夹） ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

### 2.3 ：创建文件 ###

创建新文件  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

创建新文件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

编写HTML页面

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

### 2.4切换空间 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 8][] ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

### 2.5自动保存（可选）本人喜欢勾选，自动保存刚刚在页面上书写过的代码，比较方便 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_19_color_FFFFFF_t_70_g_se_x_16][]

## 3，常见配置 ##

### 3.1安装插件 ###

#### 3.1.1浏览器打开 ####

在html页面中,右键可以以浏览器的方式打开html页面

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

安装插件：open in browser

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

#### 3.1.2 vue的 v- 提示 ####

提示效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

安装插件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

#### 3.1.3 提示 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

安装的插件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_17_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 16][]

#### 3.1.4安装axios提示 ####

提示效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 17][]

安装插件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 18][]

[5b31258400e341dd85c2f448310fdc44.png]: https://img-blog.csdnimg.cn/5b31258400e341dd85c2f448310fdc44.png
[favicon.ico]: https://code.visualstudio.com/favicon.ico
[Download Visual Studio Code - Mac_ Linux_ WindowsVisual Studio Code is free and available on your favorite platform - Linux_ macOS_ and Windows. Download Visual Studio Code to experience a redefined code editor_ optimized for building and debugging modern web and cloud applications._favicon.ico_https_code.visualstudio.com_Download]: https://code.visualstudio.com/Download
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a7aee9dd8b19401b8a9611a2d0c99cce.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/29fdef6b83894ce78e77db1387fbdb66.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/ea06573e08f848ec9c86adb316afefa9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/97a669f5581d4c28b37b110c4474fcbb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/426792293d2240d2a2f830a5392bb56f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_14_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/4e3430874a434dd2a5b75b629d82918b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/590353f0ddad478ca10cf1f890cdcfc3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/674008ef12104c44a9ab15c064a51b0d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/69ca76742da44a78a59ea1deec193012.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/2f4fde2fd2574fd48a2bb4d8dd9ef377.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/ce2cae434d8946eca72ecda39328dc3c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/90d3fadb58924ed78e9da5d45a18027d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/0b4f1400320c42fda94469827d8ded70.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/a0924b0c17794543b06b2222db33d6be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/d93a3055114e4aa4962597e1458a65f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/9cf1022485a944d09bd7ae9faac4b833.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1dc99fe15be04a1e88c4edfaafd006cb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/958c617f8a364666b3fdc2313141659b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/aff89ad1b2224a83b15b2e70c8397f45.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/6ce8c5b189a84b3e90bebec8c9c44d2d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/15c30a07f0314c0394f51e8d49a0daf0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/1ffbe1ca2b28473193014bc9ce56d45d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/16d1772e78204bc293aa077933932c22.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/392883409e7145e8b61802c65c8c62e6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/a720de715b30471f9309620e99902ec1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 17]: https://img-blog.csdnimg.cn/8e87305b8b9f4333ae281ecf5f978546.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG_size_20_color_FFFFFF_t_70_g_se_x_16 18]: https://img-blog.csdnimg.cn/fe69b58b1df14b19a4d8b25ae4761840.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix5ZCD6LGG55qE5Zyf6LGG,size_20,color_FFFFFF,t_70,g_se,x_16