VSCode不仅仅是一个代码编辑器，它有着强大的社区生态和丰富的插件。背靠着微软这棵大树，它已经变成了近些年最热门的IDE。

IDE的全称是Integrated Development Environment，也就是集成开发环境。你可以在VSCode里面集成代码运行与编辑的环境、SSH工具、Docker、API测试、Git、数据库、代码美化、AI助手等等。一个软件就能包揽开发过程中的全部需求。

本期视频，我们试着来拓展VSCode的边界，看看它有多少隐藏的功能与好用的插件。

下载与安装

注意下载蓝色图标的VSCode，

紫色图标的Visual Studio是给.NET和C++开发人员用的。这里还提供了Linux和Mac版本的下载。这是一个微软开发的全平台开源免费的代码编辑软件。

网页版VSCode

这里还有一个Web版，它甚至可以直接在浏览器里使用。

我找到一个GitHub项目，直接点击键盘上的句号，瞬间就打开了网页版的VSCode。我们可以使用这个环境查看代码，甚至还可以调试运行。

我们点击这里的Debug，这里可以跟GitHub申请一个CodeSpace的运行环境用来调试你的代码。比如你在你的外婆家，只有一个上个世纪的古董电脑，只要有浏览器，你就可以随时随地地开展工作，又方便又神奇。

基本使用

好，我们回归正题，还是把这个软件先下载下来，然后按照提示一步步地把它安装好。

我们打开软件，可以看到VSCode并没有那些复杂的项目、工程那种概念。这里打开文件夹就可以直接开始写代码。这里我点击File，点击Open Folder，我来新建一个文件夹，这里我叫tech-shrimp技术爬爬虾。打开这个文件夹，这样就可以直接开始工作了。

插件安装与使用

我们先新建一个文件，点击这个小图标New File。这里我新建一个.py结尾的Python文件。

它自动识别出了这是一个Python文件，前面出现了一个Python的小图标。右下角弹出了一个提示，它识别到我正在使用Python语言，问我是否要安装这个Python的插件。

VSCode是一个轻量的代码编辑软件，它的许多功能都是通过插件来实现的。这里我们点击Install。这是一个微软官方开发的插件，已经有了1,300多万次的下载。我们等待一会儿，它就安装完成了。

然后我们再回到这里写一点代码。有了插件以后，它自动有了代码补全功能。比如我要输入这个print函数，它自动进行了代码补全，右侧显示出了这个函数的定义，

包括如何传递参数等等。

代码运行与调试

我们找到右上角这个小箭头，这里有一个Run Python File。如果你电脑上安装过Python环境的话，这里就可以直接执行。可以看到它自动弹出了控制台，执行了我的Python文件并且打印出了结果。

这里的控制台就是Windows默认的PowerShell控制台。爬爬虾之前有一个完整视频介绍PowerShell，

我们在这里面可以执行一些PowerShell的语法，可以切换目录、创建文件等等。

虚拟环境

除了这种基本的Python环境以外，VSCode还提供了一些进阶的虚拟环境。我们可以创建一个虚拟环境，把鼠标移动到上面这个命令托盘，这里我们输入一个大于号，然后输入Python，选到这个Python Create Environment，就是创建Python的虚拟环境。

我们点一下，

这里给了两个选项，一个叫Venv，还有一个Conda。这里我选择创建Venv的，选择你电脑上的Python版本，这里我选择最新的3.12。等到右下角这边执行完成，Python的虚拟环境就创建好了。右下角这里显示了.venv，表示现在处于Python的虚拟环境。

有了虚拟环境以后，我们就可以在项目里面随意安装Python包，而不去影响主环境了。

Git集成

由于VSCode跟GitHub都是微软家的产品，所以在VSCode里面使用Git也是十分轻松的。这里我们找到代表Git的这个小按钮，点击一下，这里有两个选项，一个是Init Repository，指的是把这个文件夹初始化成一个Git工程，由Git管理起来。下面还有一个Publish to GitHub，就是直接把你的项目推送到GitHub上面。

我们先点击这个Init，这样我们就有了第一次提交。这里有一个Publish Branch，我们点击一下，这里提示我们先要登录一下GitHub。我们点击Allow，登录一下自己的GitHub账号。这里点击Authorize VS Code，第一个选项是Publish成一个私有的仓库，就是只有你一个人可以看到，第二个是Publish成一个公开的仓库，互联网上所有人都可以看到。这里我们选择Public，你的项目就上传到GitHub上面了。

当然我们也可以在GitHub上面直接克隆一个项目。我们又回到了欢迎界面，这里有一个克隆Git Repository，我们点击一下，

这里可以直接输入一个Git的URL克隆项目，当然也可以在下拉列表里克隆自己的项目。

我们点击这个克隆from GitHub，列出了我的GitHub账号下面的所有项目。这里我选择克隆这个Hello World，选择一个对应的目录，项目就被克隆下来了。我们修改一行代码，找到Git的这里，可以看出自己的改动，这里我填写一个commit message，点击Commit改动就提交上去了。现在的改动处于你的本地分支，这里再点击Sync Changes，把你的改动push到远端，也就是GitHub上面。

Git插件

除了这些基础的功能以外，VSCode还有很多与Git相关的插件。比如这里我推荐这个GitLens插件，我们把它安装一下。

插件安装好以后，我们把鼠标指向代码的每一行，在后面都会显示出一个提交人，还有提交日期，包括commit message。

我们可以很轻松地追溯到每行代码都是谁写的。

打开左侧的这个GitLens，这里有一个Commit Graph，这里使用图形化的方式展现出了整个仓库的提交情况，包括分支创建情况、分支合并情况，还有历史的提交记录。

我们还是打开这个版本控制，这里这里有三个点显示More Action，打开以后，许多Git的常用操作都在这里列出来了。配合下面的图形化显示，使用起来也是非常的顺手。

远程开发

我们来演示一组跟后台服务器相关的功能。这里我们找到插件面板，输入这个SSH，这里有一个Remote SSH插件，我们下载一下。这个也是微软的官方插件。

下载好以后，这里又多了一个小选项卡，我们点进去，这里选择SSH，点击这个加号，我们可以根据这个格式填写一个SSH链接。这里我以我的一台云服务器为例，演示SSH链接。点击回车，选择一个配置文件，这里自动生成了一个配置文件，然后我们保存一下这个配置文件。

点击这个刷新按钮，这里多了一个我的远程服务器。我们可以点击这个文件夹一样的小按钮，它开启了一个全新的界面，这是一个全新的运行环境。首先它询问我的操作系统版本，我选择Linux，

然后点击Continue，输入密码，它其实直接连上了服务器那边的云环境。

我们还是打开一个文件，这里点击Open Folder，这是我服务器上的远程文件夹。比如这里我打开opt目录，这里点击OK，点击Trust。我们可以看到在左侧的文件树就可以像编辑本地文件一样去修改服务器上的代码和配置文件了。

修改完成以后，我们可以进入命令行调试代码。这里我们点击Terminal，点击New Terminal，可以看到，这里展开的是Linux的命令行环境。我们可以在这里随意输入Linux命令，运行代码调试程序等等。

Docker插件

我们再安装一个插件，这里叫做Docker，点击安装。可以注意到这个也是微软的官方插件。安装好以后，这里又多了一个Docker的小图标。

目前我是处于Linux云服务器环境下面，这里列出了所有的镜像，还有我在运行的容器，下面还有Docker Registry、Docker网络、Docker挂载卷。这是一个内容非常丰富的Docker可视化软件，仅仅一个小插件就可以搞定Docker的全部需求。

WSL集成

爬爬虾上个月讲过WSL，也就是运行在Windows上的Linux子系统。

VSCode也可以很好地跟WSL交互。我们先安装一下这个插件，WSL这个也是微软的官方插件。

这里我们在桌面打开PowerShell，启动一个WSL实例。这里我启动这个Ubuntu的WSL实例，之前的视频有完整介绍这一块的内容，感兴趣的观众可以找来看一下。

启动完成以后，我们就进入了Linux界面。进入任意一个目录，输入这个命令 code . 回车，它就会自动打开我的VSCode。这里的文件树显示的就是我Linux子系统的文件树，我们可以进去修改并且查看文件。下面的命令行也是Linux子系统的命令行，同样的，我们也可以使用这些命令行启动程序或者调试代码。

API调试工具

我们来看一组跟开发工具相关的插件。有了这些插件，都不需要额外下载软件，很多开发需求可以直接在VSCode里面搞定了。

我们先看如何调试API。这个Postman肯定不需要我过多介绍了，应该是全世界最有名的API调试工具。这里可以填写一个Request，点击Send。

如果你不喜欢Postman，还有另外一个类似的软件，叫做Thunder Client。它跟Postman的功能差不多，但是更加的强大。有许多人甚至只是为了使用这一个插件特意安装了VSCode，可见这个插件有多么的好用。

下一个我要讲的类似的插件叫做REST Client。因为这个跟别的不太一样，所以我把它安装一下，重点讲一下。

REST Client跟Postman有点逻辑不太一样，它是依赖文件的。这里我们点击File，我们新建一个文本文件就开始写。首先我们写一个GET方法，请求这个地址，我们点击这个Send Request按钮，请求成功以后，它就会把Response显示到这里，包括下面的返回的值。

这里使用3个井号作为分隔符，可以再写一个。这里我又写了一个PUT方法，可以定义这个方法的Header，括号里面是方法的Request Body。我们点击Send Request，同样的也返回了结果。

也可以把这些东西导出成cURL。我们复制一下这段代码，找到上面的面板，这里敲一个 >，选择这个Copy Request as cURL，我们复制一下，这样就把我们选中的那个REST复制成了cURL。

我们再打一个分隔符，把cURL粘贴上。这个工具同样可以识别cURL格式的Request请求。这里我们点击Send Request，效果是一样的。

在命令面板里还可以找到很多与REST Client相关的功能。

数据库工具

我们在插件这里查询MySQL，这里可以下载到一个MySQL相关的插件。使用这个插件可以使用图形化界面查看你的数据库，查看表列，还有执行一些SQL查询。

同样的，爬爬虾上期讲过的SQLite，这里也有同样的插件。

我们下载这个插件，可以可视化地查看SQLite数据库。

这里还有Redis相关的可视化软件等等，这些插件都是非常全的。

前端开发插件

众所周知，VSCode在前端开发中具有统治性的地位。我们搜索插件的时候，不妨从你使用的前端框架开始搜起。

比如我使用Vue，我们可以安装这两个：一个是Vue 3 Snippets，

是一个Vue的代码片段，只需要输入几个字母就可以生成一个代码片段；还有一个叫做Vue Official，

这个可以用来代码补全，检查你的代码格式等等。

如果你使用React框架，我们搜索React，这里可以安装这个ES7 + React Snippets

这也是一个自动生成代码片段的插件，还可以帮助你进行代码检查和代码补全。

下一个前端必备插件叫做Auto Rename Tag。

它可以帮助你自动修改另一端的tag。比如这里有一个P1标签，我把它修改成P2标签，装了插件以后，它会把左边的同时改了。

下一个前端必备插件叫做JavaScript Debugger，

这也是微软官方开发的插件。这个插件可以把你从VSCode里面打的断点自动映射到你的浏览器里。

Live Server也是一个前端的必备插件。

安装完成以后，每当我们打开一个HTML网页，右下角会出现一个Go Live按钮。我们点击一下，它会自动发布一个HTML的页面，并且使用浏览器自动打开。我们修改代码的同时，这个页面也可以自动变化。

CSS Peek也是一个前端必备插件。

我们按住Ctrl键，把鼠标指向一个CSS，它会立即显示出这个CSS的有关定义。我们左键点击一下，它会连接到对应的文件。

代码格式化插件

下一个前端必备的插件叫做Prettier，我们把它安装一下。

这里有一段比较杂乱的JS代码，这里引号有单引号也有双引号，这里我故意加了一些空格，下面有一些没用的行。

我们还是进入这个命令小面板，输入一个 >，输入这个Format Document，或者使用快捷键Shift+Alt+F。我们点击一下，可以看到，它自动帮我整理了这个JS文件，将引号都统一起来了，删掉了没用的行跟没用的空格。

ESLint跟Prettier功能比较像，这也是用来格式化前端代码的。

Console Ninja也是一个前端神器，

它可以把代码里的console.log的打印直接显示在代码的右侧。这样我们就不需要来回切换软件，去浏览器里面查看console打印了。

辅助开发插件

下面我再分享一组辅助写代码的插件：

第一个非常好用的叫做Polacode。

这个插件用来生成一个很美观的代码截屏。我们还是输入一个>，执行这个命令，叫做Polacode。点击这个Polacode，然后我们把想截屏的代码拷贝到右侧这个窗口里。这里可以调整一下宽度，最后我们点击一下这个截屏小按钮，把截屏保存一下。这里代码就变成了一个很美观的图片。

下一个很有用的插件叫做Code Spell Checker，

这个用来自动检查代码中的拼写错误。比如这里的techshramp拼写错误了，它会自动产生一个蓝色的波浪线标识这个单词拼错了。我们点击这里的Quick Fix，选择一个正确的拼写。

Markdown Preview Enhanced用来帮助编写Markdown文件。

这里我有一个Markdown文件，我在键盘上点击Ctrl+K，然后再点击V键，它会自动在右边打开这个Markdown文件的预览。我修改左边的话，右边也会自动同步。

Bookmark插件用来快速地给你的代码打上书签。

这里我选中一行代码，点击右键，我们点击这个按钮即可打上书签。打上书签以后，我们可以在左侧查看所有打过的书签，帮助我们快速地定位到代码。

下一个插件叫做TODO Highlight，

它会把注释里的TODO、FIXME等等关键词高亮显示。我们浏览代码的时候，可以很清楚地看到这里的TODO标识。

AI编程插件

VSCode AI编程类的插件也是百花齐放，五花八门。我们在插件这里搜索AI，第一个最有名的当然是GitHub Copilot，

下面这个Tabnine也很好用，

PHP专用的IntelliPHP，

还有这个Blackbox AI。

感兴趣的话，都可以下载下来自己试用一下。

这就是VSCode的主要功能和一些常用插件的介绍。通过这些强大的功能和丰富的插件生态，VSCode确实称得上是一个"宇宙级IDE"，能够满足各种开发需求，提高开发效率。