VS Code新手基础教程

1. 安装与配置

1.1 下载与安装

• 官网下载：VS Code 官网

  • 支持 Windows、macOS、Linux。

  • 安装时勾选以下选项（Windows）：

    • "Add to PATH"（将 VS Code 添加到系统环境变量）。

    • "Register as code editor"（默认文件关联）。

1.2 初次配置

1. 选择语言：首次启动时，按 Ctrl+Shift+P → 输入 Configure Display Language 切换界面语言。

2. 设置同步（跨设备同步配置）：

   • 登录 Microsoft 或 GitHub 账号 → 点击左下角齿轮 → Turn on Settings Sync。

3. 基础设置：按 Ctrl+, 打开设置，调整：

   • 字体大小：Editor: Font Size

   • 自动保存：Files: Auto Save → 选择 afterDelay。

   • 缩进：Editor: Tab Size 和 Detect Indentation。

2. 界面与核心功能

2.1 界面详解

• 侧边栏（默认左侧）：

  • 资源管理器（Ctrl+Shift+E）：管理文件和文件夹。

  • 搜索（Ctrl+Shift+F）：全局文件内容搜索。

  • 源代码管理（Ctrl+Shift+G）：集成 Git 功能。

  • 运行和调试（Ctrl+Shift+D）：调试代码。

  • 扩展（Ctrl+Shift+X）：管理插件。

• 底部面板：

  • 终端（Ctrl+`）：集成终端，支持多终端标签。

  • 问题面板：显示代码错误和警告。

  • 输出面板：查看程序运行输出。

2.2 编辑器功能

• 多标签编辑：支持同时打开多个文件，拖拽标签分组。

• 代码折叠：点击行号旁的 ▶ 或按 Ctrl+Shift+[/]。

• 快速跳转：

  • 跳转到定义：F12 或 Ctrl+左键。

  • 查看引用：Shift+F12。

  • 符号跳转：Ctrl+Shift+O（文件内）或 Ctrl+T（全局）。

3. 代码编辑效率技巧

3.1 快捷键

3.2 代码片段（Snippets）

1. 使用内置片段：输入关键字（如 for、if）后按 Tab。

2. 自定义片段：

   • 按 Ctrl+Shift+P → 输入 Configure User Snippets → 选择语言。

   • 示例（Python）：

     json

     复制

     下载

     "For Loop": {
       "prefix": "for",
       "body": [
         "for ${1:item} in ${2:collection}:",
         "    ${3:pass}"
       ]
     }

4. 扩展插件生态

4.1 必装插件推荐

4.2 插件高级用法

• 配置插件：按 Ctrl+, 进入设置 → 搜索插件名修改参数。

• 快捷键绑定：按 Ctrl+K Ctrl+S → 搜索插件命令绑定快捷键。

5. 调试与运行

5.1 配置调试器

1. 点击左侧调试图标 → 创建 launch.json 文件。

2. 示例（调试 Python 程序）：

   json

   复制

   下载

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Python: Current File",
         "type": "python",
         "request": "launch",
         "program": "${file}",
         "console": "integratedTerminal"
       }
     ]
   }

5.2 调试技巧

• 条件断点：右键断点 → 设置触发条件。

• 监视变量：在调试面板的 WATCH 区域添加变量名。

• 逐行调试：F10（跳过函数）、F11（进入函数）。

6. 版本控制（Git）

6.1 基础操作

1. 初始化仓库：git init

2. 提交代码：

   • 修改文件后，点击左侧源代码管理图标 → 输入提交信息 → 点击 √。

3. 分支管理：

   • 创建分支：点击底部状态栏的 master → Create new branch。

   • 合并冲突：直接在编辑器中解决冲突标记（<<<<<<< HEAD）。

6.2 高级功能

• 查看历史：安装 GitLens 插件 → 点击行号旁的注释查看提交记录。

• 暂存修改：右键文件 → Stage Changes 或 Unstage Changes。

7. 远程开发

7.1 通过 SSH 连接远程服务器

1. 安装 Remote - SSH 插件。

2. 点击左下角 >< 图标 → Connect to Host → 输入服务器地址。

3. 直接在远程服务器上编辑文件，如同本地操作。

7.2 使用 Dev Containers

1. 安装 Dev Containers 插件。

2. 在项目根目录创建 .devcontainer/devcontainer.json。

3. 按 Ctrl+Shift+P → Reopen in Container，VS Code 将自动构建开发容器。

8. 任务与自动化

8.1 配置任务（Tasks）

1. 按 Ctrl+Shift+P → 输入 Tasks: Configure Task。

2. 示例（运行 Python 脚本）：

   json

   复制

   下载

   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Run Python",
         "type": "shell",
         "command": "python ${file}",
         "group": { "kind": "build", "isDefault": true }
       }
     ]
   }

3. 按 Ctrl+Shift+B 运行任务。

8.2 自动化脚本

• 预输入命令：在终端中按 Ctrl+Shift+P → Terminal: Run Selected Text。

9. 高级功能

9.1 代码重构

• 重命名符号：选中变量 → F2 → 输入新名称（自动更新所有引用）。

• 提取函数/变量：选中代码 → 右键 → Refactor。

9.2 性能优化

• 禁用无用插件：按 Ctrl+Shift+P → Show Running Extensions。

• 使用工作区信任：打开文件夹时选择限制插件权限，防止恶意代码。

9.3 协作开发

• Live Share：安装 Live Share 插件 → 点击左下角 Live Share → 分享会话链接。

10. 学习资源

1. 官方文档：VS Code Docs

2. 交互式教程：按 Ctrl+Shift+P → 输入 Interactive Playground。

3. 视频课程：

   • YouTube: "VS Code Masterclass" by Fireship

   • Udemy: "Visual Studio Code 终极指南"

4. 社区支持：

   • GitHub Issues: vscode GitHub

   • Stack Overflow: visual-studio-code 标签。

附：VS Code 配置文件示例

• 全局设置：%APPDATA%\Code\User\settings.json（Windows）或 ~/.config/Code/User/settings.json（Linux/macOS）。

• 工作区设置：项目根目录下的 .vscode/settings.json。