VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了

╰+攻爆jí腚メ 2024-04-06 12:45 49阅读 0赞

## 前言 ##

> Visual Studio Code 是一个轻量级功能强大的源代码编辑器，支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言和运行时（如 C++、C\#、Java、Python、PHP、Go、.NET）提供了丰富的扩展生态系统。为了不影响读者的沉浸式阅读学习，如需使用目录请在左侧使用即可。

## VSCode的下载 ##

通过前言我们已经大致了解到了VSCode的强大之处，现在开始步入正题。

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

> 进入VSCode官方的下载页，根据系统需求选择相对应的下载地址。

**官方下载页面--->：[VSCode官方下载页面链接][VSCode]**，选择自己系统对应的下载链接。

![78e88029a7ff47be939bf535be6d5140.png][]

**对于Windows下载标绿文本的解释**

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th style="width:131px;">文本</th> 
   <th style="width:366px;">文本解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:131px;"> <p><strong>User Installer</strong></p> </td> 
   <td style="width:366px;">默认安装在当前计算机帐户目录，如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。vscode默认提供的为<strong>User Installer</strong></td> 
  </tr> 
  <tr> 
   <td style="width:131px;"><strong>System Installer</strong></td> 
   <td style="width:366px;">安装在非用户目录,例如C盘根目录,任何帐户都可以使用。</td> 
  </tr> 
 </tbody> 
</table>

关于具体下载哪个版本我进行了大量的调研，发现网络上大部分的教程都是选择的VSCode默认提供的**User Installer版本。**但是对于我们实际和真正的开发，以及我们对于系统文件的管理难易度上来讲我**更推荐System Installer版本，它可以自定义安装路径，使其我们后期对于它的管理十分方便。**

## VSCode的安装 ##

> 此处我选择了**System Installer版本，原因无它，因为它可以自定义安装路径，使其我们后期对于它的管理十分方便，我也十分建议你选择此版本安装。**

### 同意协议 ###

选择**同意协议**，点击**下一步**

![9dbdc38a071a4c09b52c929507a31c0a.png][]

### 选择安装位置 ###

选择安装位置，单击**浏览**按需选择自己要设置的安装路径位置。然后点击**下一步**即可

**注意：****为了后期的稳定性，切勿使用中文路径。**

![31225e22e1794a458e0d74a59589b0ac.png][]

### 选择开始菜单文件夹 ###

如需修改，请点击浏览进行设置，无需修改直接单击**下一步**即可

![caedf66e969040e49cb1519266074ae3.png][]

### 选择附加任务 ###

按需选择自己需要的附加任务，这里我推荐将其他中的所有选项都勾选上，对于创建桌面方式则按需选择是否勾选，我这里因为不需要所以就不勾选了。

设置完毕最后单击**下一步**

**注意：****添加到PATH一定要勾选，很重要。**

![77c6c02138d240dc9254c7ab294b6b74.png][]

### 准备安装 ###

确认自己前面设置的是否有误，无误则点击**安装**即可

![d4287143e51f4887a93b08844ade9236.png][]

### 安装完成 ###

如果你看到如下界面，那么恭喜你，你的VSCode安装完成。

![3df882115ee6445d9236c3ca22bf87f7.png][]

## VSCode基础配置 ##

### VSCode界面简介 ###

> VS Code 采用通用的用户界面和左侧的资源管理器布局，显示您可以访问的所有文件和文件夹，右侧的编辑器显示您打开的文件的内容。

![cdf60147c0ab421a85f5ca1440ce7beb.png][]

关于对上图界面的区域解释：

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th style="width:66px;">区块颜色</th> 
   <th style="width:63px;">区块名称</th> 
   <th>区块作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:66px;">红色</td> 
   <td style="width:63px;">活动栏</td> 
   <td>位于最左侧，可让您在视图之间切换，并为您提供额外的特定于上下文的指标，例如启用 Git 时传出更改的数量。</td> 
  </tr> 
  <tr> 
   <td style="width:66px;">绿色</td> 
   <td style="width:63px;">侧栏</td> 
   <td>包含不同的视图，例如资源管理器，可在您处理项目时为您提供帮助。</td> 
  </tr> 
  <tr> 
   <td style="width:66px;">粉色&nbsp; &nbsp; &nbsp;</td> 
   <td style="width:63px;">状态栏</td> 
   <td>有关已打开项目和您编辑的文件的信息。</td> 
  </tr> 
  <tr> 
   <td style="width:66px;">紫色</td> 
   <td style="width:63px;">面板</td> 
   <td>您可以在编辑器区域下方显示不同的面板，用于输出或调试信息、错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。</td> 
  </tr> 
  <tr> 
   <td style="width:66px;">白色&nbsp; &nbsp; &nbsp;</td> 
   <td style="width:63px;">编辑区</td> 
   <td>编辑文件的主要区域。您可以垂直和水平并排打开任意数量的编辑器。</td> 
  </tr> 
  <tr> 
   <td style="width:66px;">黄色&nbsp; &nbsp; &nbsp;</td> 
   <td style="width:63px;">菜单栏</td> 
   <td>进行VSCode的各项操作</td> 
  </tr> 
 </tbody> 
</table>

### VSCode设置中文界面 ###

因为我们此时安装的VSCode还是英文界面，对于英语不是那么好的小伙伴不是十分友好，所以我们此时需要安装一个插件来对VSCode进行中文化处理。

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>活动栏简单介绍</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p><img alt="4e333afda7384d0594403b5fed3f6e78.png" src="https://img-blog.csdnimg.cn/4e333afda7384d0594403b5fed3f6e78.png"></p> </td> 
   <td>编辑器打开的文件</td> 
  </tr> 
  <tr> 
   <td> <p><img alt="d62a5aa48cc04e3a85379a733a922a58.png" src="https://img-blog.csdnimg.cn/d62a5aa48cc04e3a85379a733a922a58.png"></p> </td> 
   <td>全局搜索</td> 
  </tr> 
  <tr> 
   <td> <p><img alt="02348a018e124324bd3986ed07e7c8fc.png" src="https://img-blog.csdnimg.cn/02348a018e124324bd3986ed07e7c8fc.png"></p> </td> 
   <td>Git管理</td> 
  </tr> 
  <tr> 
   <td> <p><img alt="9e7e1e8a07fe46d98f7962418bbdb4ff.png" src="https://img-blog.csdnimg.cn/9e7e1e8a07fe46d98f7962418bbdb4ff.png"></p> </td> 
   <td>Debug</td> 
  </tr> 
  <tr> 
   <td> <p><img alt="353d63150a154abe8e34537b670c52df.png" src="https://img-blog.csdnimg.cn/353d63150a154abe8e34537b670c52df.png"></p> </td> 
   <td>插件安装</td> 
  </tr> 
  <tr> 
   <td> <p><img alt="1c67369cabf049e3b6dff2c889261e1f.png" src="https://img-blog.csdnimg.cn/1c67369cabf049e3b6dff2c889261e1f.png"></p> </td> 
   <td>用户登录</td> 
  </tr> 
  <tr> 
   <td> <p><img alt="1605fb594f754519b3049dd3f89517fa.png" src="https://img-blog.csdnimg.cn/1605fb594f754519b3049dd3f89517fa.png"></p> </td> 
   <td>VSCode设置</td> 
  </tr> 
 </tbody> 
</table>

经过如上对VSCode界面基本的了解，我们在**活动栏区域**找到**插件安装**这个选项，单击它，在**搜索框**中搜索**Chinese** 选择第一个即可，选择**Install**进行安装。

![57264e177e9a4ec99e9891428d5a94c2.png][]

安装完毕，右下角会弹出如下提示框，单击**Restart**重启VSCode即可完成。

![69995462abaa489eb5fcb58b55599c52.png][]

### VSCode个性化设置 ###

我们找到**设置**，选择**颜色主题**

![2cab0db75cf04dd8899eac966947eee4.png][]

会弹出如下框选，此时我们**根据自己的喜好选择**即可，如果你觉得没有，还可以选择浏览其他颜色主题进行预览选择。

![314646ffc61845a3b75207e47ac34b20.png][]

其余文件图标主题和产品图标主题的个性化设置同理。

### VSCode常用设置 ###

打开**活动栏**的VSCode**设置**，我们在**常用设置**，设置字体大小，字体，是否自动保存等常用的设置项目，此处按需选择设置即可。

![be084f06cecc414a8fba007affd3c8c7.png][]

对于其他的设置也是同理，**按需选择设置**。

对于常用设置这一项，我的个人**建议是将Files：AutoSave选项的off更改为onFocusChange选项**（当编辑器失去焦点时，会自动保存具有更改的编辑器）

![4b7bcca7c0294a68bdc9737d57196aec.png][]

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

## VSCode常用快捷键 ##

为了大家更为方便的使用快捷键，我再次列了一个表格进行规整化说明。

#### 常规快捷键 ####

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>快捷键&nbsp;</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Ctrl+Shift+P, F1</td> 
   <td>显示命令选项板</td> 
  </tr> 
  <tr> 
   <td>Ctrl+P</td> 
   <td>快速打开，转到文件…</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+N</td> 
   <td>新建窗口/实例</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+W</td> 
   <td>关闭窗口/实例</td> 
  </tr> 
  <tr> 
   <td>Ctrl+</td> 
   <td>用户设置</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+S</td> 
   <td>键盘快捷键</td> 
  </tr> 
 </tbody> 
</table>

#### 基本编辑快捷键 ####

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>快捷键</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Ctrl+X</td> 
   <td>剪切线(空选区)。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+C</td> 
   <td>复制行(空选择)。</td> 
  </tr> 
  <tr> 
   <td>Alt+↑/↓</td> 
   <td>向上/向下移动行。</td> 
  </tr> 
  <tr> 
   <td>Shift+Alt+↓/↑</td> 
   <td>复制行向上/向下。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+K</td> 
   <td>删除行。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Enter</td> 
   <td>在下面插入行。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+Enter</td> 
   <td>在上面插入行。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+\</td> 
   <td>跳转到匹配的括号。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+]/[</td> 
   <td>缩进/凸出行。</td> 
  </tr> 
  <tr> 
   <td>Home/End</td> 
   <td>转到行的开始/结束。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Home</td> 
   <td>转到文件开头。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+End</td> 
   <td>转到文件末尾。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+↑/↓</td> 
   <td>向上/向下滚动行。</td> 
  </tr> 
  <tr> 
   <td>Alt+PgUp/PgDn</td> 
   <td>上/下滚动页面。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+[</td> 
   <td>折叠(折叠)区域。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+]</td> 
   <td>展开(展开)区域。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+[</td> 
   <td>折叠(折叠)所有子区域。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+]</td> 
   <td>展开(展开)所有子区域。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+0</td> 
   <td>折叠(折叠)所有区域。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+J</td> 
   <td>展开(展开)所有区域。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+C</td> 
   <td>添加行注释。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+K Ctrl+U</td> 
   <td>删除行注释。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+/</td> 
   <td>切换行注释。</td> 
  </tr> 
  <tr> 
   <td>Shift+Alt+</td> 
   <td>切换块注释。</td> 
  </tr> 
  <tr> 
   <td> <p>Alt+Z</p> </td> 
   <td>切换自动换行</td> 
  </tr> 
 </tbody> 
</table>

#### 导航 ####

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>快捷键</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Ctrl+T</td> 
   <td>显示所有符号。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+G</td> 
   <td>转到行...。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+P</td> 
   <td>转到文件...。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+O</td> 
   <td>转到符号...。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+M</td> 
   <td>显示问题面板。</td> 
  </tr> 
  <tr> 
   <td>F8</td> 
   <td>转到下一个错误或警告。</td> 
  </tr> 
  <tr> 
   <td>Shift+F8</td> 
   <td>转到上一个错误或警告。</td> 
  </tr> 
  <tr> 
   <td>Ctrl+Shift+Tab</td> 
   <td>导航编辑器组历史记录。</td> 
  </tr> 
  <tr> 
   <td> <p>Alt+←/→</p> </td> 
   <td>后退/前进</td> 
  </tr> 
  <tr> 
   <td>Ctrl+M</td> 
   <td>切换选项卡移动焦点</td> 
  </tr> 
 </tbody> 
</table>

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

## 插件推荐 ##

### 主题/外观美化区 ###

**Material Icon Theme:**

![635e33c369aa4cd59e398fb23f184635.png][]

它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面，而且在暗黑模式下使用效果更佳。

**Material Theme:**

![ea86312ce62649959bc0a2ba03b4a0f8.png][]

可以说是与Material Icon Theme师从一脉了

**彩虹括号插件最新版VSCode已内置，无需安装**，如需其他请使用Rainbow Brackets：

![9f5b83edb9a4409386041797b446371e.png][]

vscode的彩虹括号扩展。

**Highlight Matching Tag：**

![58985e4479044fb6a02a8a3fd295edf9.png][]

这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示标签的路径。即使VSCode有一些基本的标签匹配，它也只是——基本的。这个扩展将尝试匹配标签的任何地方:从标签属性，字符串内部，任何文件，同时也提供了广泛的样式选项，自定义标签如何突出显示。

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

### Git相关插件 ###

**GitHub Pull Requests and Issues：**

![6b9e0a6b60e94f9d99e4b465ef5c8310.png][]

允许您在 Visual Studio Code 中检查和管理 GitHub 拉取请求和问题。

**Git History：**

![0fb3285b859542589d10b771c3fc51f4.png][]

查看Git日志，提交文件历史，比较分支或提交

**GitLens — Git supercharged：**

![e2d5d3634fe54830a5be5cd2107df2f1.png][]

通过Git Under注解和CodeLens使你可以直截了当的显示代码作者，无缝导航和探索Git存储库，通过丰富的可视化和强大的比较命令获得有价值的见解等

**Git Graph：**

![5b18d19823ea451f8aeb2edb11857a96.png][]

查看存储库的Git Graph，并从该图轻松执行Git操作

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

### Markdown语法插件 ###

**Markdown All in One ：**

![d709d20564924ccea9f1286e400d9725.png][]

**Markdown All in One** 是 VSCode 热门的 Markdown 插件，可以在左边书写，右边即时预览。下图替大家展示了常用的快捷键，以供查阅。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>Key &nbsp; &nbsp;</td> 
   <td>Command</td> 
  </tr> 
  <tr> 
   <td>Ctrl + B &nbsp; &nbsp;</td> 
   <td>粗体</td> 
  </tr> 
  <tr> 
   <td>Ctrl + I &nbsp; &nbsp;</td> 
   <td>斜体</td> 
  </tr> 
  <tr> 
   <td>Alt + S &nbsp;</td> 
   <td>&nbsp;删除线</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Shift + ]&nbsp;&nbsp;</td> 
   <td>标题(uplevel)</td> 
  </tr> 
  <tr> 
   <td>Ctrl + Shift + [&nbsp;</td> 
   <td>标题(downlevel)</td> 
  </tr> 
  <tr> 
   <td>Ctrl + M&nbsp;</td> 
   <td>切换数学环境</td> 
  </tr> 
  <tr> 
   <td>Alt + C&nbsp;</td> 
   <td>选中/取消选中任务列表项</td> 
  </tr> 
 </tbody> 
</table>

**Markdown Preview Enhanced：**

![d41333c61b2245e6b417d6e6cb8f0b54.png][]

Markdown预览增强，自动滚动同步、数学排版、PlantUML、pandoc、PDF 导出、代码块、演示文稿编写器等。

Markdown Preview Enhanced常用快捷键：

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>快捷键</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">cmd-k v 或 ctrl-k v</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">打开预览到侧面</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">cmd-shift-v 或 ctrl-shift-v</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">打开预览</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">ctrl-shift-s</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">同步预览/同步源</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">shift-enter</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">运行代码块</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">ctrl-shift-enter</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">运行所有代码块</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">cmd-= 或 cmd-shift-=</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">预览放大</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">cmd-- 或 cmd-shift-_</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">预览缩小</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">cmd-0</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">预览重置缩放</td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;">Esc键</td> 
   <td style="background-color:#ffffff;border-color:#dddddd;">切换侧边栏目录</td> 
  </tr> 
 </tbody> 
</table>

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

### 学习\\摸鱼 ###

**LeetCode:**

![bc432d11c0ae4fad9a9c3439cf04b49b.png][]

解决 VS Code 中的 LeetCode 问题

**daily anime:**

![99f40c267b85438da608d6f271cfe22e.png][]

VSCode追番摸鱼看剧必备，以下展示使用命令行使用此插件方法

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><code>ctrl+shift+p</code></td> 
   <td>&nbsp; 打开命令面板</td> 
  </tr> 
  <tr> 
   <td>命令行输入<code>anime</code></td> 
   <td>&nbsp;打开番剧页面</td> 
  </tr> 
  <tr> 
   <td>命令行输入<code>hitokoto</code></td> 
   <td> <p>&nbsp;可随机展示一条句子</p> </td> 
  </tr> 
 </tbody> 
</table>

**小霸王：**

![39172ae8978e4b23807cff1804d6da4a.png][]

上班玩游戏必备！摸鱼之王必备！

**超越鼓励师：**

![24366638c0744b0184de43031cca4217.png][]

梦里的超越将在你枯燥乏味的编辑器中鼓励你。

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

### 前端插件 ###

**Better Comments：**

![32683e2d1d97422aab8c93cd086222c1.png][]

帮助在代码中创建更人性化的注释，有了这个扩展，你就可以把你的注释分类为:警报、查询、待办事项、突出。注释掉的代码也可以设置样式，以明确代码不应该出现在那里，你想要的任何其他评论样式都可以在设置中指定，不同注释可以显示不同的效果。

**ESLint:**

![dc0ffcde9252407392c4b5d29a11dd16.png][]

集成ESLint JavaScript到VS Code，一个适用于前端的规范提示插件。

**vetur：**

![f67e8147760642fe8c48f476fa1c1422.png][]

此插件可谓是前端必备，vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等。

**Vue VScode Snippets：**

![6a2b0c8234034fc387b883de907035ce.png][]

构建代码片段的缩写节约开发时间

**JavaScript (ES6) code snippets**

![32102699d47c45abb10adb94e9290bf8.png][]

ES6语法中的JavaScript代码片段

**ES7+ React/Redux/React-Native snippets：**

![5385a2aa836f44f38bb83a0cba6cdfec.png][]

扩展React, React- native和Redux在JS/TS与ES7+语法

**Image preview：**

![6c0b903e8c71470c85d9701cab92b73c.png][]

显示图像预览在槽和悬停，图片是否正确引入的显示工具，在链接处按ctrl，鼠标悬浮即可使用，确定是否正确找到路径下的图片。

**Auto Rename Tag：**

![8bb3dc6d4f924fd3abcacbd03b8c89bc.png][]

自动重命名成对的HTML/XML标记，与Visual Studio IDE相同。

**HTML CSS Support：**

![35a11fce8eec4bc7ac9539b02cee6684.png][]

HTML的CSS智能感知，支持链接和嵌入式样式表、支持模板继承、支持其他样式表、支持其他HTML之类的语言、根据需要验证CSS选择器。

使用方法：通过Ctrl + space查看id和class属性建议列表。

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

> 如果您认真阅读至此，您现在已经掌握了VSCode的安装与配置，且随着您认真练习使用次数的增加，您对此软件的掌握我相信不止于此，如果您对此软件或其他有进阶的要求，请移步至**[我的博客][Link 1]**进行其余的修炼计划。

感谢您认真观看完毕此文章，如果此文章对您有帮助的话，还请您**点赞**、**收藏**、**评论**，这对我有很大的帮助。

[VSCode]: https://code.visualstudio.com/download
[78e88029a7ff47be939bf535be6d5140.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7949a7e01af44ddbb545f2508b316c91.png
[9dbdc38a071a4c09b52c929507a31c0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/495205638fb5400dbf00ffe6edf2f4a1.png
[31225e22e1794a458e0d74a59589b0ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0c0afdcb77bc456aa913f098048a46bf.png
[caedf66e969040e49cb1519266074ae3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9da1cecdb65b4c4f9d89c367bff6d635.png
[77c6c02138d240dc9254c7ab294b6b74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4e9569cafa3d42809a7c207ecc5ad421.png
[d4287143e51f4887a93b08844ade9236.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3829c4ee052d402e96cf0ac08ce5e5d4.png
[3df882115ee6445d9236c3ca22bf87f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/30b86adb251042529a7ea9ad84b3b3a2.png
[cdf60147c0ab421a85f5ca1440ce7beb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a61c43bac5cc4b06ada113a2f185ba70.png
[57264e177e9a4ec99e9891428d5a94c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/700fcedb8d114253bdcac4014ac4d0fe.png
[69995462abaa489eb5fcb58b55599c52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8e32157466614e998572ce6b7a461a2b.png
[2cab0db75cf04dd8899eac966947eee4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7c0da8c6787847ba95c524245d0a1843.png
[314646ffc61845a3b75207e47ac34b20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f9aac5ef75a74e8a973ccf5f99527aa4.png
[be084f06cecc414a8fba007affd3c8c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cc6c4294871e428d816cb1d3a01ffb8c.png
[4b7bcca7c0294a68bdc9737d57196aec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/15bf62532acc413b824ee230a6eaf9bf.png
[635e33c369aa4cd59e398fb23f184635.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/23d2606bb51d4b4eb33cf59155e58029.png
[ea86312ce62649959bc0a2ba03b4a0f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6eb9c29289e74f0ca3640f57522e702a.png
[9f5b83edb9a4409386041797b446371e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1a5bf24f14c24010bd7e9bb2615732f8.png
[58985e4479044fb6a02a8a3fd295edf9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2d24ae6bfca741f6853d69bb8533cbbe.png
[6b9e0a6b60e94f9d99e4b465ef5c8310.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e68cf60c3294df9ab2e495c478f1f6a.png
[0fb3285b859542589d10b771c3fc51f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/59b0c16527844eeaa55e0f8043e9651a.png
[e2d5d3634fe54830a5be5cd2107df2f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/abcfb8c3abcc488eb2961d60ae7f34d2.png
[5b18d19823ea451f8aeb2edb11857a96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/39fa4258f45d4469babb9c5971ace93e.png
[d709d20564924ccea9f1286e400d9725.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d942c0d5d5dd42a3931a27e7a09336e8.png
[d41333c61b2245e6b417d6e6cb8f0b54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bc6e43d632894427a3006eff5e0c5531.png
[bc432d11c0ae4fad9a9c3439cf04b49b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9792713a4c2f4618951722e52fc94536.png
[99f40c267b85438da608d6f271cfe22e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f7d4b69466324404ac35530c9394b3b6.png
[39172ae8978e4b23807cff1804d6da4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d3db77318c1f4477a7c28bad6ffac222.png
[24366638c0744b0184de43031cca4217.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d7697c3b12764be1b0cf2a825e732464.png
[32683e2d1d97422aab8c93cd086222c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d448f266e05c476c9e35345e18836147.png
[dc0ffcde9252407392c4b5d29a11dd16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/388b0fc088d048b9904218a88da9f138.png
[f67e8147760642fe8c48f476fa1c1422.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ecc8904bb04b4653bb153db8d0942580.png
[6a2b0c8234034fc387b883de907035ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9dd04432f7714005bd0c29b5a31c239b.png
[32102699d47c45abb10adb94e9290bf8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8fff732f0e79426c8ccbd59f48734d7e.png
[5385a2aa836f44f38bb83a0cba6cdfec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1f85099924fb4ca99b674686cbf719e4.png
[6c0b903e8c71470c85d9701cab92b73c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7062b509ae314d4a9ed75a040a49ec1a.png
[8bb3dc6d4f924fd3abcacbd03b8c89bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2700bc18d8974f7da4b14ef32b662495.png
[35a11fce8eec4bc7ac9539b02cee6684.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/48d73913919b4c2fbe235380f0df5862.png
[Link 1]: https://blog.csdn.net/MSDCP?type=blog