vscode是怎么安装插件的

1. 简介

Visual Studio Code,简称VS Code,是一款由微软开发的针对于Windows,Linux和macOS三个操作系统的轻量级源代码编辑器,支持很多主流编程语言,具有代码突出显示、智能感知、自动完成、代码重构、GIT 和 SVN 版本控制、代码调试、集成任务执行器、内置终端等特性。

其强大的插件扩展功能使得它成为一个强大而又高效的代码编写工具。接下来将详细讲解如何在VS Code中安装插件。

2. 安装插件的两种方式

2.1 在线安装

VS Code提供了直接在编辑器中在线安装插件的功能,操作方式如下:

在左侧的侧边栏中选择“扩展(Extensions)”选项。

在搜索栏中输入您需要安装的插件名称,并在列表中找到您需要使用的插件,如下图所示。

╭───────────────────────────────────────────────────────────╮

│ Extensions: Marketplace │

├───────────────────────────────────────────────────┬───┤

│ Name │ Ins │

├───────────────────────────────────────────────────┼───┤

│ Azure CLI │ +

│ ESLint │ +

│ GitLens - Git supercharged │ +

│ Import Cost │ +

│ npm │ +

│ One Dark Pro │ +

│ Prettier - Code formatter │ +

│ Remote Development │ +

│ Visual Studio IntelliCode │ +

┌───────────────────────────────────────────────────┴───┐

│ Installed Extensions │

│ │

└───────────────────────────────────────────────────────┘

点击插件卡片后会跳转到插件详情页,点击“安装”按钮。VS Code将在您的计算机上下载并安装插件。

当插件安装完成后,您需要重新启动编辑器使插件生效。

2.2 手动安装

手动安装插件意味着您需要下载扩展的压缩文件,并将其解压到VS Code的扩展目录中。下面是手动安装流程:

从Visual Studio Code官网的扩展市场中选择您需要手动安装的插件,并下载扩展的压缩文件。

https://marketplace.visualstudio.com/

在本地文件系统中,找到VS Code的插件目录。根据不同的操作系统,插件目录的路径会有所不同:

Windows: %USERPROFILE%\.vscode\extensions

macOS / Linux: $HOME/.vscode/extensions

解压插件文件到上一步中找到的扩展目录中,插件文件解压完成后即可在VS Code的扩展栏中看到该插件。

如果插件没有自动生效,您可以尝试重启VS Code来使其生效。

3. 管理已安装的插件

一旦您有了可用的扩展,您可以通过VS Code的“扩展”面板管理它们。在扩展面板中,您可以管理已安装的扩展。您可以启用或禁用扩展,查看它们的详细信息,卸载不再需要的扩展,并根据需要更新扩展。

下面介绍扩展管理的主要功能:

3.1 禁用和启用插件

禁用插件时,它会被暂时取消加载,但是它仍然会在编辑器列表中出现。当您启用插件时,它会再次加载并在编辑器中生效。

在左侧的侧边栏中选择“扩展(Extensions)”选项。

选择需要禁用 / 启用的扩展,鼠标悬停在其卡片上后会出现两个按钮:启用和禁用。

╭───────────────────────────────────────────────────────────╮

│ Extensions: Marketplace │

├───────────────────────────────────────────────────┬───┤

│ Name │ Ins │

├───────────────────────────────────────────────────┼───┤

│ Azure CLI │ +

│ ESLint │ +

│ GitLens - Git supercharged │ X │

│ Import Cost │ +

│ npm │ +

│ One Dark Pro │ +

│ Prettier - Code formatter │ +

│ Remote Development │ +

│ Visual Studio IntelliCode │ +

┌───────────────────────────────────────────────────┴───┐

│ Installed Extensions │

│ │

└───────────────────────────────────────────────────────┘

点击即可禁用 / 启用该插件。

3.2 卸载插件

如果您不再需要某个扩展,可以卸载它。当您卸载扩展时,VS Code会删除其文件并从编辑器中移除该扩展。

在左侧的侧边栏中选择“扩展(Extensions)”选项。

找到您要卸载的插件,并点击其卡片下的“卸载”按钮。

╭───────────────────────────────────────────────────────────╮

│ Extensions: Marketplace │

├───────────────────────────────────────────────────┬───┤

│ Name │ Ins │

├───────────────────────────────────────────────────┼───┤

│ Azure CLI │ │

│ ESLint │ │

│ GitLens - Git supercharged │ X │

│ Import Cost │ │

│ npm │ │

│ One Dark Pro │ │

│ Prettier - Code formatter │ │

│ Remote Development │ │

│ Visual Studio IntelliCode │ │

┌───────────────────────────────────────────────────┴───┐

│ Installed Extensions │

│ │

└───────────────────────────────────────────────────────┘

卸载插件后,您需要重新启动编辑器来让它生效。

3.3 更新插件

如果您的扩展有新版本可用,编辑器将在其卡片上显示一个更新图标。您可以单击扩展卡片下的“更新”按钮来更新扩展。

在左侧的侧边栏中选择“扩展(Extensions)”选项。

找到您需要更新的插件,如果它有新版本,则其卡片下会有一个更新图标。

╭───────────────────────────────────────────────────────────╮

│ Extensions: Marketplace │

├───────────────────────────────────────────────────┬───┤

│ Name │ Ins │

├───────────────────────────────────────────────────┼───┤

│ Azure CLI │ │

│ ESLint │ │

│ GitLens - Git supercharged │ │

│ Import Cost │ │

│ npm │ ↑ │

│ One Dark Pro │ │

│ Prettier - Code formatter │ │

│ Remote Development │ │

│ Visual Studio IntelliCode │ │

┌───────────────────────────────────────────────────┴───┐

│ Installed Extensions │

│ │

└───────────────────────────────────────────────────────┘

点击更新图标进行更新。

4. 结论

本文详细介绍了在VS Code中安装插件的两种方式、管理已安装插件的方法以及扩展管理的主要功能。通过插件的安装和使用,您可以满足不同语言或框架的需求,以及提高开发效率和代码质量。如果您想在编写代码时获得最佳体验,建议使用VS Code并充分利用其支持的各类插件。