安装 Visual Studio Code 及其插件用于前端开发

安装 Visual Studio Code

Visual Studio Code（下文统一称为 VS Code）是一款轻量级、免费的代码编辑器，能够在 macOS、Linux 和 Windows 系统上运行，需要自行在 VS Code 的官网https://code.visualstudio.com/下载符合自己系统的 VS Code。VS Code 是具有丰富特性的编辑器，其特性包括支持数百种语言，内置支持 git 及许多其它源码管理服务商，不离开编辑器的情况下对代码进行调试，运行自动化测试并查看测试覆盖率已验证代码，使用容器、远程机器或 WSL 作为开发环境。除此之外，VS Code 还具有顶级的扩展，启用更多语言、主题、调试器、命令等功能。

在下载 VS Code 之后，对代码编辑器 VS Code 进行安装，具体的操作如下所示。

1. 安装 VS Code，首先找到 VS Code 文件的下载路径，本文的 VS Code 软件包存放在目录H:\solftware\exe备份文件下，软件版本为VSCodeUserSetup-x64-1.96.2.exe。

   

2. 双击文件VSCodeUserSetup-x64-1.96.2.exe，弹出如下界面，选择"我同意此协议（A）"，然后点击下一步，具体操作步骤如下所示。

   

3. 然后勾选下图所示的三个选项，接着点击下一步。具体操作步骤如下所示。

   

4. 点击"安装"按钮，对代码编辑器 VS Code 进行安装。具体操作步骤如下所示。

   

   至此，代码编辑器 VS Code 安装完成。

5. 本文主要使用 VS Code 代码编辑器编写前端代码，在安装完成代码编辑器 VS Code 之后，需要安装如下所示的插件，以下插件用于后台管理系统的前端开发，具体操作如下所示。

   • Vue Language features(Volar)，在搜索框内输入你要安装的扩展插件，找到对应的插件并点击"确定"按钮安装产检，安装成功后一定要启用插件，才能生效。具体操作如下所示。

     

   • 安装简体中文插件：Chinese (Simplified) (简体中文) Language Pack f，按照插件安装示例操作安装插件并启用，插件控制台显示如下所示的图标。

     

   • vue-helper，按照插件安装示例操作安装插件并启用，插件控制台显示如下所示的图标。

     

   • Vetur，按照插件安装示例操作安装插件并启用，插件控制台显示如下所示的图标。

     

   • Live-Server，按照插件安装示例操作安装插件并启用，插件控制台显示如下所示的图标。

     

至此，VS Code 的下载安装及插件的安装就完成了。