Visual Studio Code使用指南

VS Code 简介

VS Code 是什么？

• 免费开源代码编辑器：由微软开发，支持 Windows/macOS/Linux。
• 轻量级但功能强大：启动快、占用资源少，可通过扩展无限增强功能。
• 现代化开发工具：集代码编辑、调试、版本控制、终端于一体，是学习编程的高效起点。

核心优点

• 免费开源 & 跨平台
  • 完全免费，支持Windows/macOS/Linux系统，无需破解。
  • 开源社区持续更新，安全可靠。
• 轻量级 & 启动快
  • 安装包仅80MB左右，启动速度秒级（比传统IDE快3-5倍）。
  • 内存占用低（基础使用约300MB），老旧电脑也能流畅运行。
• 海量扩展生态（核心竞争力）
  • 超5万款免费扩展，按需安装（如Python、Java、GitLens等）。
  • 新手贴士：通过”扩展商店”（左侧方块图标）一键安装语言支持包，免除配置烦恼。
• 开箱即用的核心功能
  • 智能代码补全（IntelliSense）：输入时自动提示变量/函数（对新手极其友好）。
  • 集成终端：直接运行命令（Ctrl+“ 快速开关）。
  • 内置Git可视化：图形化操作提交/拉取代码，降低Git学习门槛。
  • 调试工具：设置断点+逐行调试（F5启动）。
• 高度可定制
  • 主题、快捷键、布局均可自由调整（设置入口Ctrl+,）。
  • 中文支持：搜索安装扩展Chinese (Simplified) 即可汉化界面。

主要缺点

复杂项目性能可能下降

• 当同时打开大量文件（如50+）或大型项目（10万行+代码）时：
  • 内存占用可能升至1GB+。
  • 语法检查、代码提示响应变慢。
• 解决方案：关闭不用的文件/文件夹，安装性能优化扩展（如Project Manager）。

深度功能需手动配置

• 高级调试、自定义构建任务需编辑配置文件（如json），新手可能畏难。
• 建议：优先使用扩展自动生成配置（如Python扩展会提供默认调试设置）。

部分语言支持不如专业IDE

• 对Java/C++等重度语言：
  • 项目依赖管理（如Maven）不如IntelliJ/Eclipse智能。
  • 重构功能（批量重命名）较弱。
• 替代方案：安装扩展包（如Java Extension Pack）可改善体验。

扩展质量参差不齐

• 部分扩展可能：
  • 存在安全漏洞（需警惕来源不明的扩展）。
  • 更新频繁导致兼容问题。
• 避坑指南：优先选择微软官方发布、下载量>10万的扩展（查看发布者认证标识）。

新手选择建议

新手如何扬长避短

• 优点最大化：
  • 利用”扩展商店”快速获得语言支持（搜索Python/Java等关键字）。
  • 多用图形化Git操作（左侧源代码管理图标）代替命令行。
• 缺点规避：
  • 避免安装过多扩展（刚需优先），定期清理不用的插件。
  • 大型项目拆分模块，用工作区分目录打开。
• 关键提示：新手黄金法则：遇到配置问题 → Ctrl+Shift+P打开命令面板 → 搜索关键词（如”Python调试”）→ 官方文档链接通常出现在结果顶部！

安装与环境配置

下载与安装：前往 Visual Studio Code 官网 下载对应操作系统 (Windows, macOS, Linux) 的安装包并完成安装。

推荐的插件

新手安装指南

• 打开扩展商店：左侧栏点击「方块」图标或按Ctrl+Shift+X
• 搜索插件名：输入英文名（如GitLens）→ 点击「Install」
• 管理插件：
• 禁用/卸载：右键插件 → Disable或 Uninstall
• 更新：点击扩展视图右上角… → Update All

避坑提醒

• 警惕来源不明插件：优先选择 微软发布 或 下载量 > 100万+ 的插件
• 避免功能重复：如安装了 Prettier 后，无需再装类似格式化工具
• 性能优化：插件过多可能导致卡顿（建议控制在 15 个内），定期清理不常用插件
• 查看文档：复杂插件（如 Copilot）安装后需阅读说明配置认证

通用效率工具

前端开发神器

后端/全栈开发

学习/协作辅助

高颜值个性化

Python开发推荐插件

核心工具（必装）

注意：微软官方三件套（Python + Pylance + Jupyter）是开发基石，缺一不可。

效率增强（强力推荐）

代码质量与格式化

配置技巧：在项目根目录创建 .vscode/settings.json 添加：

{
  "python.formatting.provider": "black",
  "python.linting.flake8Enabled": true,
  "editor.formatOnSave": true
}

调试/测试进阶

项目/部署工具

前端开发推荐插件

核心效率工具（必装）

实时预览与热更新

框架专项支持

CSS/样式增强

调试与构建优化

高颜值增效

避坑指南

ESLint 与 Prettier 冲突：

安装依赖：npm install eslint-config-prettier –save-dev

在 .eslintrc 中添加：{ “extends”: [“其他配置”, “prettier”] }

数据库操作插件推荐

核心效率工具

高级查询与可视化

安全与版本控制

智能辅助

文档编写插件推荐

核心写作工具

排版与规范

技术文档增强

大型文档管理

主题与写作体验

嵌入式开发插件推荐

核心开发工具链

硬件接口与监控

工程与依赖管理

烧录与量产工具

扩展工具包

配置项的设置

学会打开设置 (Ctrl+, 或 Cmd+,)。了解如何搜索设置项（这是最常用的方式）。

• 字体大小 (Editor: Font Size)
• 主题 (Workbench: Color Theme) – 选择喜欢的亮色/暗色主题。
• 自动保存 (Files: Auto Save)
• 缩进 (Editor: Tab Size,Editor: Insert Spaces) – 建议设置为 2 或 4 个空格。

VS Code界面概览

活动栏 (Activity Bar)

• 位置：最左侧竖排图标栏
• 核心图标：
  • 📁 资源管理器：管理项目文件（Ctrl+Shift+E）
  • 🔍 搜索：全局搜索代码（Ctrl+Shift+F）
  • 🐙 源代码管理：Git 版本控制（Ctrl+Shift+G）
  • 🐞 运行和调试：断点调试功能（Ctrl+Shift+D）
  • 🧩 扩展商店：安装插件（Ctrl+Shift+X）

侧边栏 (Side Bar)

• 作用：点击活动栏图标后显示对应内容
• 典型视图：
  • 文件列表（资源管理器激活时）
  • 搜索框+结果（搜索激活时）
  • Git 变更文件（源代码管理激活时）

编辑器区域 (Editor Area)

• 核心功能：
  • 多标签页同时编辑文件（支持拖拽分栏）
  • 语法高亮 / 代码补全 / 错误波浪线提示
• 快捷键：
  • 新建文件Ctrl+N
  • 切换标签页Ctrl+Tab

面板区域 (Panel)

• 位置：底部可展开区域
• 主要面板：
  • 💻 终端：运行命令（Ctrl+`开关）
  • ⚠️ 问题：显示代码错误/警告
  • 🐞 调试控制台：查看程序输出
  • 🔍 输出：扩展/编译日志

状态栏 (Status Bar)

• 位置：编辑器最底部
• 关键信息：
  • Ln 10, Col 3：光标位置（行号/列号）
  • UTF-8/ LF：文件编码和换行符
  • main：当前 Git 分支
  • 🐞 0 | ⚠️ 2：错误/警告数量

效率快捷键

工作空间相关技能

提升效率的编辑功能

• 多光标编辑：
  • Alt+Click：在点击位置添加新光标。
  • Ctrl+Alt+↑/↓ (Cmd+Option+↑/↓)：在上方/下方添加光标。
  • Ctrl+D(Cmd+D)：选中当前单词，再次按选中下一个相同单词（添加光标）。
• 代码折叠：点击行号旁的> 或使用快捷键 Ctrl+Shift+[ / Ctrl+Shift+] (Cmd+Option+[ / Cmd+Option+])。
• 自动补全 (IntelliSense)： 输入时 VS Code 会根据上下文提供建议。按Tab 或 Enter 接受建议。这是最重要的功能之一！
• 代码片段： 输入特定前缀 (如for in JavaScript) 并按 Tab，会自动生成代码结构。了解如何查看和使用语言内置的片段。

集成终端

• 打开终端：Ctrl+` (反引号键，通常在 Tab键上方) 或Ctrl+Shift+ (`Cmd+on Mac)。
• 理解终端的作用：执行命令、运行脚本、使用 Git 命令行等。
• 切换终端类型：点击终端面板右上角的+ 号或下拉菜单，选择 Command Prompt (Windows), PowerShell, bash (Linux/macOS) 等。
• 多开终端：点击+ 号。
• 在特定项目目录打开终端：在资源管理器中右键文件夹 ->在集成终端中打开。

VS Code常用快捷键

文件与项目管理

高效代码编辑

智能导航与搜索

高级编辑技巧

界面操作

调试与运行

参考链接：

• Documentation for Visual Studio Code

VS Code版本控制

安装准备

安装 Git

• 下载地址：https://git-scm.com
• 安装后，打开终端输入：

git --version

在 VS Code 中集成 Git

VS Code 会自动识别系统中的 Git。

如果未识别，打开 VS Code，按 Ctrl+Shift+P 输入：

Git: Show Git Output

查看是否有错误提示。

项目初始化与 Git 操作

新建或打开项目文件夹

在 VS Code 中打开你的项目文件夹。

初始化 Git 仓库

• 打开终端或点击左侧【源代码管理 Source Control】图标。
• 如果未初始化，点击“Initialize Repository”。
• 或在终端输入：

git init

配置用户信息（首次使用）

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

基础操作

添加文件并提交

• 所有更改会显示在【源代码管理】视图中。
• 点击文件旁的 + 添加到暂存区（staging）。
• 或者使用命令：

git add .

输入提交信息并提交：

git commit -m "你的提交说明"

查看历史提交

• 使用 VS Code 插件：Git Graph 可视化查看历史。
• 或在终端中使用：

git log

分支管理

创建分支

git branch 新分支名

或点击左下角当前分支名 ➜ 创建新分支。

切换分支

git checkout 分支名

合并分支

git checkout main
git merge feature-branch

远程仓库操作（GitHub等）

添加远程仓库

git remote add origin https://github.com/用户名/仓库名.git

推送代码

git push -u origin main

以后：

git push

拉取远程代码

git pull

冲突解决

• 冲突时，VS Code 会高亮冲突区域。
• 你可以选择：
  • Accept Current Change
  • Accept Incoming Change
  • Accept Both Changes
• 解决后：

git add .
git commit -m "解决冲突"

忽略文件：.gitignore

新建 .gitignore 文件示例：

node_modules/
*.log
.env
.DS_Store

推荐插件

GitLens — Git supercharged

• 功能最强大的 Git 插件之一
• 显示每一行代码的最后修改者（blame）。
• 轻松查看提交历史、分支、对比。
• 右键直接打开 GitHub 页面。
• 支持 commit 搜索、annotate、cherry-pick 等。
• 适合所有使用 Git 的用户

Git Graph

• 可视化 Git 历史图谱
• 分支图像清晰可视化
• 直观支持 rebase、merge、push、pull、checkout 等操作
• 可视对比 commit 内容
• 适合需要查看分支结构的用户

GitHub Pull Requests and Issues

• GitHub 官方插件
• 在 VS Code 中直接：
  • 管理 Pull Request
  • 审核、评论代码
  • 关联 Issue
• 支持 Fork 仓库协作
• 适合 GitHub 平台用户

GitHub Copilot

• AI 编程助手（GitHub 出品）
• 根据上下文智能补全代码
• 适合配合 GitLens 使用，提升效率
• 付费订阅，但学生可免费试用
• 适合编程效率提升者

Project Manager

• 多项目切换助手
• 支持多个 Git 项目快速切换
• 自动识别 Git 项目路径
• 可为每个项目设置启动配置
• 适合管理多个 Git 仓库的用户

gitignore

• 一键生成 .gitignore 文件
• 支持 500+ 项目的 .gitignore 模板
• 可以为多语言项目组合模板（如 Node + Python）
• 支持覆盖已存在的 .gitignore 文件
• 提供语法高亮和补全

常见问题排查

VS Code 调试基础

快速开始：调试一个 Python/JS 程序（例）

创建一个简单程序

def greet(name):
    return f"Hello, {name}!"

print(greet("VS Code"))

JavaScript 示例（hello.js）

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("VS Code"));

启动调试

方法一：点击左侧菜单的【运行与调试】▶️图标

方法二：快捷键启动调试

创建和编辑 launch.json

自动生成

点击“运行与调试” ➜ “创建一个 launch.json 文件”，VS Code 会自动识别项目语言并生成模板。

示例（Python）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: 当前文件",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

示例（Node.js）

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "运行当前文件",
      "program": "${file}"
    }
  ]
}

调试技巧与功能详解

调试控制台（Debug Console）

• 输入表达式查看结果
• 可在调试过程中执行临时代码片段
• 类似 Python 的交互式 shell / JavaScript 的 DevTools 控制台

多文件/多项目调试

Python 示例（使用 program 指定入口文件）：

"program": "${workspaceFolder}/main.py"

多配置调试（Compound Launch）：

"compounds": [
  {
    "name": "前后端同时调试",
    "configurations": ["前端", "后端"]
  }
]

调试常见框架/环境指南

浏览器调试支持

插件推荐：

远程调试与 Docker 调试

远程调试（通过 SSH 或容器）

• 安装插件：Remote – SSH、Remote – Containers
• 支持调试远程服务器上的代码

Docker 容器内调试：

• 安装 Remote – Containers 插件
• 使用 .devcontainer 目录配置调试环境

自定义代码片段

快速入口：创建代码片段

方法一：使用命令面板

• 打开 VS Code，按下 Ctrl + Shift + P（macOS：Cmd + Shift + P）
• 输入并选择：Preferences: Configure User Snippets
• 选择：
  • 新建全局片段文件（New Global Snippets file）：适用于所有语言
  • 为特定语言创建片段（New Snippets file for…）：例如 Python、JavaScript 等
  • 或编辑现有片段文件

示例结构（Python 代码片段）

以下是一个自定义 Python 代码片段的完整示例：

{
  "Print with variable": {
    "prefix": "pvar",                    // 触发关键词
    "body": [
      "print(f\"${1:变量名} = {${1:变量名}}\")"
    ],
    "description": "打印变量及其值"
  },
  "Function template": {
    "prefix": "defn",
    "body": [
      "def ${1:function_name}(${2:args}):",
      "    \"\"\"${3:Docstring}\"\"\"",
      "    ${4:pass}"
    ],
    "description": "函数定义模板"
  }
}

字段说明

片段文件存储位置

• Windows:C:\Users\<用户名>\AppData\Roaming\Code\User\snippets
• macOS:~/Library/Application Support/Code/User/snippets
• Linux:~/.config/Code/User/snippets

使用自定义代码片段

在你编辑代码时，输入 prefix（如 pvar），VS Code 会自动弹出提示，按下 Tab 即可快速插入代码模板。

常见用途示例

Bonus：推荐插件支持

• Snippet Creator：用所选代码一键生成片段模板

自动化任务配置

任务配置文件位置

任务配置文件保存在你的工作区内：

.vscode/tasks.json

创建任务文件的方式

• 打开命令面板 Ctrl + Shift + P（macOS：Cmd + Shift + P）
• 输入并选择：Tasks: Configure Task
• 选择 Create tasks.json file from template
• 选择适合的模板（如 Others、Shell、Python 等）

示例：常见语言/任务配置

示例 1：运行 Python 脚本

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

示例 2：运行 Bash 脚本或命令

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Backup Project",
      "type": "shell",
      "command": "./backup.sh"
    }
  ]
}

示例 3：自动格式化代码（使用 black）

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Format Python with Black",
      "type": "shell",
      "command": "black ${file}",
      "problemMatcher": []
    }
  ]
}

例 4：编译 C 程序

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build C Program",
      "type": "shell",
      "command": "gcc",
      "args": [
        "-g",
        "${file}",
        "-o",
        "${fileDirname}/${fileBasenameNoExtension}.out"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

字段说明

运行任务方式

• 命令面板运行： Ctrl + Shift + P → Tasks: Run Task
• 快捷键绑定任务： 可为某个任务设置快捷键（如 F9）
• 自动执行默认任务： 使用 Run Build Task（快捷键 Ctrl + Shift + B）

提示与建议

• 支持通过 ${file}、${workspaceFolder} 等变量插入路径参数。
• 支持配置多个任务，可组合运行（compound tasks）。
• 可以与 json 联动，实现 调试前自动执行任务。

launch.json 联动示例

调试 Python 前自动格式化代码：

“preLaunchTask”: “Format Python with Black”

附：常用 VS Code 变量

参考链接：

• Documentation for Visual Studio Code