VSCode安装与配置

本教程由沈阳农业大学 大学生网络信息中心运行部提供，适用于校园网站开发

一、前言

Visual Studio Code 是一个轻量级但功能强大的源代码编辑器，可以在桌面上运行，并且适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并拥有针对其他语言和运行时（例如 C++、C#、Java、Python、PHP、Go、.NET）的丰富扩展生态系统。

二、安装步骤

首先，打开浏览器访问VSCode官网。

https://code.visualstudio.com/

1. 点击右上角"Download",进入下载页面。

2. 选择适合你操作系统的版本进行下载。

3. 下载完成后，打开安装包进行安装。

勾选用户协议，点击下一步。

4. 选择安装路径，点击下一步。

5. 默认，点击下一步

6. 将选项都选中，尤其注意添加到PATH。然后点击下一步

7. 点击安装。

8. 进入安装页面，等待安装完毕。

9. 安装完成，点击完成并打开VSCode。

三、中文语言包的安装

VSCode默认是英文界面，如果需要切换为中文，需要安装中文语言包。

1. 点击左侧侧边栏最下端的"Extensions"图标，打开扩展。

2. 在扩展中搜索"Chinese"并选择"Chinese (Simplified)"语言包，点击install安装。

3. 安装完成后，页面右下角回弹出提示，切换语言并重启应用，对其进行选择

4. 重启完成后，VSCode界面切换为中文。

四、完成开始向导(可选)

VSCode安装完成并且切换为中文后，我们根据官方的开始向导对其进行一些基础配置和学习。

1. 启用Copilot

GitHub Copilot，一款由 GitHub 和 OpenAI 联合开发的 AI 编程助手，可以在 Visual Studio Code 等编辑器中为你智能补全代码、生成注释、解释代码逻辑，并协助解决编程相关的问题。

目前，VSCode默认内置了GitHub Copilot，登录GitHub账号便可以使用Copilot。

2. 选择主题

根据您的个人喜好选择适合的主题。

3. 对所有语言的丰富支持

此处先跳过，根据后续教程来安装对应语言扩展。

4. 优化设置

打开设置，可以对其进行浏览，自己个性化设置。

其中，建议打开自动保存功能，防止代码丢失。

方法：点击打开设置->搜索框中输入 "Auto Save" -> 找到自动保存选项 -> 选择"afterdelay"（默认选项为"Off"，可以选择其他的，本教程采用"afterdelay"）

5. 使用命令面板解锁工作效率

跳过，自行研究。

6. 观看视频教程

跳过，自行观看。

7. 了解基础知识

跳过，自行了解。

五、面板介绍

VSCode的面板分为四个部分：

1. 资源管理器：用于浏览文件系统。
2. 编辑器：用于编写代码。
3. 集成终端：用于运行命令行命令。
4. 调试器：用于调试代码。

六、本课程开发推荐插件

介绍本课程开发推荐的插件。大家自行选择安装即可

点击左侧扩展，搜索对应名称，进行安装。

HTML/CSS/JS开发插件

工具类插件