🚀 使用 VS Code 与 Windows Subsystem for Linux (WSL) 的终极指南👩‍💻👨‍💻

最初发表在我的博客网站ajeet.dev

别忘了订阅我的每周新闻通讯📧

我是技术新手。我已经同时使用 Linux 和 Windows 一段时间了。对于那些因为某些原因不想切换到 Linux 的人来说，微软的 Windows Subsystem for Linux 是一款强大的工具。这篇博文基于我的个人经验。欢迎反馈。非常感谢你抽出时间🙏

在本博客中，我们将学习如何在 Windows Subsystem for Linux (WSL) 中使用Visual Studio Code。如果您之前没有听说过 WSL，请阅读我之前的博客文章——什么是 Windows Subsystem for Linux 以及如何在 Windows 上运行 Linux。

这是我的 WSL 系列文章（共 5 部分）的第五部分。完整系列文章可在此处查看：

1. Linux 与 Windows 对比——为什么 Linux 更适合编程和 Web 开发
2. 从 Windows 切换到 Linux？请先阅读此文
3. 适用于 Linux 的 Windows 子系统 - 在 Windows 上运行 Linux（速度很快）
4. Windows Subsystem for Linux 新手使用指南
5. 如何将 Visual Studio Code 与 Windows Subsystem for Linux (WSL) 结合使用

这篇博文是为想要进入编程或 Web 开发的初学者撰写的。

目录

• 💻 入门
• ✅ 安装适用于 Linux 的 Windows 子系统 (WSL)
• ⬇️ 下载适用于 Windows 的 Visual Studio Code
• ⚙️ 安装远程开发扩展包
• 🛠️ 设置 VS Code 服务器
• 📂 使用 VS Code 在 WSL 中创建文件夹
• 💘 连接 WSL 的方法 - 远程窗口
• 🖹 使用 VS Code 在 WSL 中创建文件
• 🧰 管理扩展
• 💡 下一步

💻 入门

Visual Studio Code（也称为 VS Code）是 Microsoft 推出的代码编辑器。它具有多种代码编辑功能，例如代码补全、参数信息、代码检查、调试支持、代码片段和单元测试。对于 Windows 中的 Web 开发而言，VS Code 与 Windows Subsystem for Linux (WSL) 的集成非常出色，原因有二：

• 它内置终端，可在 VS Code 和命令行之间创建流畅的工作流程。我们可以轻松地在不同位置创建多个终端。了解更多关于VS Code 集成终端的信息。
• VS Code 支持使用 Git 进行版本控制。您可以从其 UI 本身运行 Git 命令。

✅ 安装适用于 Linux 的 Windows 子系统 (WSL)

我编写了一份分步指南，帮助您开始使用 WSL。请按照本指南使用 WSL

⬇️ 下载适用于 Windows 的 Visual Studio Code

下载适用于 Windows 的Visual Studio Code。安装该软件。这与在 Windows PC 上安装软件相同。在安装 VS Code 的过程中，它会要求您“选择其他任务”。请确保勾选“添加到 PATH”选项。这样，您只需使用code命令即可在 WSL 中打开文件夹。

⚙️ 安装远程开发扩展包

远程开发扩展包允许您使用 WSL 作为基于 Linux 的全职开发环境，而无需离开 VS Code。您无需离开 Windows 计算机即可使用基于 Linux 的实用程序、运行应用程序等等。

打开 VS Code，安装远程开发扩展包。如果您之前从未安装过扩展，请同时按下键盘上的 CNTRL+SHIFT+X 键。这将在代码编辑器的左侧/右侧打开“扩展”视图。搜索“远程开发”。点击第一个搜索结果，然后点击“安装”。

🛠️ 设置 VS Code 服务器

安装扩展后，您将在 VS Code 编辑器的左下角看到远程开发扩展图标。

点击图标，你将看到一个包含选项列表的弹出窗口。对于默认发行版，单击第一个选项“ Remote-WSL: New Window ”，对于特定发行版，选择“ Remote-WSL: New Window using Distro ”。

您将看到一条通知“在 WSL 中启动 VS Code...”。

这意味着 VS Code 首次在 WSL 内部设置服务器。安装完成后，Windows 计算机/桌面上的 VS Code 将与 Linux 端的 VS Code 服务器进行通信。

此服务器的主要用途是在 WSL 中安装和托管扩展。这意味着扩展（例如 Python）将针对 WSL 中安装的 Python 运行。Python 扩展不会针对您在 Windows 端安装的 Python 运行。

完成后，您将看到以下视图。

这意味着我们已经在 WSL 中打开了一个终端。现在，每当你通过转到终端 > 新建终端来在此 VS Code 中打开一个终端窗口时，它都会自动在 WSL 中运行。这意味着每次我们在 VS Code 中打开一个新终端时，我们都会从 Windows 上运行的 VS Code 编辑器（而不是在 WSL 内部）在 WSL 中启动一个新的 Bash Shell 实例。

让我们在终端中运行一个命令。在“ajeet@Ajeet-Lenovo:~$ ”后面输入，code --help然后按 Enter。您将看到以下输出。

📂 使用 VS Code 在 WSL 中创建文件夹

让我们再运行一​​些命令来确认我们已连接到 Linux 子系统。在我之前的博客文章中，我通过在 WSL 终端中运行命令，在 Linux（或 WSL）的主目录中创建了一个文件夹。现在，让我们使用 VS Code 创建一个项目目录，而无需在 WSL 终端中运行任何命令。

如果已打开 WSL 终端，请将其关闭。在已打开的 VS Code 终端中，运行ls命令查看所有文件和文件夹。目前没有文件和文件夹。现在，在“ajeet@Ajeet-Lenovo:~$ ”之后，输入mkdir ajeet并按 Enter。这将在 WSL 中创建一个文件夹“ajeet”。ls再次运行命令，您将看到新创建的文件夹“ajeet”。

现在，通过在 VS Code 终端中运行此命令打开 Linux 的主目录时，您就可以看到此文件夹“ajeet”：explorer.exe .不要忘记 explorer 一词后面的空格和点。

因此，我们可以看到 Ubuntu 命令也在 VS Code 中运行。以后我们将使用 VS Code 集成的 WSL 终端，而不是 Ubuntu/WSL 终端。

💘 连接 WSL 的方法 - 远程窗口

连接 VS Code 服务器的方法有很多种。让我们来探索几种打开远程 WSL 的方法。首先，关闭 WSL 终端和 VS Code 编辑器。

首先，正如我们在上一节中了解到的，我们可以通过点击 VS Code 的“远程开发”扩展图标来打开“远程 - WSL：新窗口”code . 。这样做之后，我们就能在另一个 VS Code 编辑器中连接到 WSL 了。在 VS Code 终端中，运行以下命令：（点“.”参数指示 VS Code 编辑器打开当前文件夹）。这将打开另一个 VS Code 编辑器。我们将看到文件和文件夹。您将看到新创建的文件夹“ajeet”。

这种方法的一个小问题是我们现在打开了 3 个 VS Code 编辑器。

其次，第二种方法更快。关闭所有 VS Code 编辑器。打开 WSL 终端。运行以下命令在 VS Code 中打开项目文件夹：code .点“.”指示编辑器打开当前文件夹。

这将自动打开 VS Code 编辑器，并连接到远程 WSL。现在，您可以关闭 WSL 终端，并使用 VS Code 集成终端照常运行所有命令。

我更喜欢第二种方法。我们可以通过在 VS Code 终端中运行命令来轻松创建文件夹（就像上一节中所做的那样）。

请注意，我们可以通过转到终端 > 新建终端来打开另一个 VS Code 终端。或者，使用键盘按 CNTRL+` （使用反引号）。

🖹 使用 VS Code 在 WSL 中创建文件

在 Linux 子系统的主目录中创建文件非常简单。请确保您已连接到 Linux 子系统并使用集成终端。要创建新文件，请转到“文件”>“新建文件”。或者，点击终端上方的编辑器部分，然后使用键盘同时按下 CNTRL+N 键。在其中输入一些内容，然后同时按下 CNTRL+S 键保存新文件。您将看到一个选项，用于重命名新创建的文件。将其重命名为“demo”，然后单击“确定”。

您将在 VS Code UI 的左侧边栏中看到“演示”文件。

让我们在新项目目录“python”中创建一个新文件“python_file”。在已打开的 VS Code 终端中，运行以下命令mkdir python创建一个新项目目录“python”，cd python然后转到该目录，并运行ls以查看此文件夹中的文件。目前没有文件。右键单击 VS Code UI 左侧边栏中的“python”文件夹。

您将看到一个重命名文件的选项。将其重命名为“python_file”。ls在终端中再次运行命令即可查看该文件。

在其中写入一些内容，然后同时按下 CNTRL+S 按钮保存新文件。

🧰 管理扩展

让我们看看扩展程序在 WSL 和本地是如何工作的。打开 VS Code，然后同时按下键盘上的 CNTRL+SHIFT+X 键，调出扩展程序视图。如果您从这里安装扩展程序，您可以看到该扩展程序的安装位置。在左侧边栏中，您将看到两个类别：本地 - 已安装和WSL:Ubuntu-18.04 - 已安装。

在“本地 - 已安装”类别中，你还会看到一些标记为“在 WSL:Ubuntu-18.04 中安装”的扩展。这些扩展可以安装在远程主机 (WSL) 上运行。选择“安装”即可安装这些扩展。

💡 下一步

在我的下一篇博客中，我还将撰写有关如何在 WSL 中将 Python 与 VS Code 结合使用的文章。敬请期待！

祝你编程愉快！🤓

致谢🙏：
微软官方文档中关于 WSL
Emojis 的内容取自Emojipedia
封面图片由Undraw 提供