VS Code 完整使用指南

Visual Studio Code（简称 VS Code）是目前最受欢迎的代码编辑器之一，以其轻量、快速、功能强大而著称。本文将带你快速上手 VS Code，从安装到配置，再到必备插件的使用。

VS Code 主界面

一、安装 VS Code

安装 VS Code 非常简单：

  1. 访问 VS Code 官网
  2. 点击下载按钮，网站会自动识别你的操作系统（macOS、Windows 或 Linux）
  3. 对于 macOS 用户： - 下载 .dmg 文件 - 双击打开，将 Visual Studio Code 拖拽到 Applications 文件夹 - 首次打开时可能需要在"系统偏好设置 > 安全性与隐私"中允许运行
  4. 首次启动时，VS Code 会自动检测系统语言并推荐相应的语言包

VS Code 下载页面

整个安装过程通常只需要几分钟，安装完成后即可立即使用。

小技巧：安装完成后，建议在终端中启用 code 命令： 1. 按 Cmd + Shift + P 打开命令面板 2. 输入 "Shell Command: Install 'code' command in PATH" 3. 之后就可以在终端中使用 code . 快速打开当前目录

二、基础配置

VS Code 的配置非常灵活，可以通过图形界面或直接编辑配置文件来自定义。

打开设置

有两种方式打开设置： - 点击左下角齿轮图标 ⚙️，选择"Settings" - 使用快捷键：Cmd + ,

设置界面

常用配置项

1. 缩进长度设置

在设置中搜索 "indent"，可以找到以下选项：

{
  "editor.tabSize": 4,  // Tab 键的空格数
  "editor.insertSpaces": true,  // 使用空格而非 Tab
  "editor.detectIndentation": true  // 自动检测文件缩进
}

如果你喜欢 2 空格缩进（常见于前端开发），可以设置：

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

缩进设置

2. 字体设置

搜索 "font" 可以自定义字体相关配置：

{
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontWeight": "normal",
  "editor.lineHeight": 22,
  "editor.fontLigatures": true  // 启用连字特性
}

推荐几款适合编程的字体： - Fira Code：支持连字特性，让代码更美观 - JetBrains Mono：专为开发者设计 - Cascadia Code：微软开发的编程字体 - SF Mono：macOS 系统自带，简洁优雅

字体连字效果

3. 其他实用配置

{
  "editor.wordWrap": "on",  // 自动换行
  "editor.minimap.enabled": true,  // 显示代码缩略图
  "editor.renderWhitespace": "selection",  // 显示空格
  "files.autoSave": "afterDelay",  // 自动保存
  "files.autoSaveDelay": 1000,  // 自动保存延迟（毫秒）
  "editor.cursorBlinking": "smooth",  // 光标平滑闪烁
  "editor.cursorSmoothCaretAnimation": "on",  // 光标平滑移动
  "workbench.colorTheme": "Dark+ (default dark)"  // 主题
}

编辑配置文件

如果你更喜欢直接编辑 JSON 配置文件： 1. 按 Cmd + Shift + P 打开命令面板 2. 输入 "Preferences: Open User Settings (JSON)" 3. 在打开的 settings.json 文件中添加或修改配置

命令面板

三、必备插件推荐

VS Code 的强大之处在于其丰富的插件生态。点击左侧活动栏的扩展图标（或按 Cmd + Shift + X）即可打开扩展市场。

扩展市场

1. Remote - SSH

功能：通过 SSH 连接到远程服务器，在本地编辑远程文件。

安装方式： - 在扩展商店搜索 "Remote - SSH" - 或者直接安装 "Remote Development" 扩展包（包含 SSH、Containers、WSL）

Remote SSH

使用方法： 1. 按 Cmd + Shift + P 打开命令面板 2. 输入 "Remote-SSH: Connect to Host" 3. 输入 SSH 连接信息，如 user@hostname 4. 输入密码后即可连接

连接成功后，你可以像操作本地文件一样编辑远程服务器上的代码，终端也会自动连接到远程环境。

常见问题：VS Code Server 下载失败

在某些网络环境下（如国内服务器、防火墙限制等），VS Code 可能无法自动下载 VS Code Server 到远程服务器，导致连接失败。

症状： - 连接时卡在 "Installing VS Code Server" 步骤 - 提示下载超时或连接失败 - 日志中显示无法访问 https://update.code.visualstudio.com/

解决方案 1：手动下载并上传

  1. 首先查看本地 VS Code 的 commit ID： - 打开命令面板（Cmd + Shift + P） - 输入 "Remote-SSH: Show Log" - 在日志中找到类似 Downloading VS Code server... commit:xxxxx 的信息 - 或者在 VS Code 中选择 "Code" -> "About Visual Studio Code"，查看 Commit ID

  2. 在本地下载 VS Code Server： 

    # 替换 {commit_id} 为实际的 commit ID
# 替换 {platform} 为服务器平台：linux-x64, linux-arm64, alpine-x64 等
https://update.code.visualstudio.com/commit:{commit_id}/server-{platform}/stable

  3. 上传到远程服务器： 

    # 将下载的文件上传到服务器临时目录
scp vscode-server-linux-x64.tar.gz user@hostname:~/

  4. 在服务器上解压到指定目录： 

    # SSH 连接到服务器
ssh user@hostname

# 创建 VS Code Server 目录
mkdir -p ~/.vscode-server/bin/{commit_id}

# 解压文件
tar -xzf ~/vscode-server-linux-x64.tar.gz -C ~/.vscode-server/bin/{commit_id} --strip-components 1

# 设置执行权限
chmod +x ~/.vscode-server/bin/{commit_id}/node
chmod +x ~/.vscode-server/bin/{commit_id}/bin/code-server

  5. 重新在 VS Code 中连接远程服务器

解决方案 2：使用国内镜像源

可以通过配置环境变量使用国内镜像加速下载：

  1. 在远程服务器上编辑 .bashrc 或 .zshrc： 

    export VSCODE_SERVER_DOWNLOAD_URL="https://vscode.cdn.azure.cn"

  2. 使配置生效： 

    source ~/.bashrc

  3. 重新连接

解决方案 3：配置 SSH Config 使用代理

如果有可用的代理，可以在本地 SSH 配置中设置：

编辑本地的 ~/.ssh/config 文件：

Host your-server
    HostName hostname
    User username
    # 使用 HTTP 代理
    ProxyCommand nc -X connect -x proxy_host:proxy_port %h %p
    # 或使用 SOCKS5 代理
    # ProxyCommand nc -X 5 -x proxy_host:proxy_port %h %p

解决方案 4：离线安装脚本

创建一个自动化脚本简化安装过程：

#!/bin/bash
# download-vscode-server.sh

COMMIT_ID="$1"
PLATFORM="${2:-linux-x64}"

if [ -z "$COMMIT_ID" ]; then
    echo "Usage: $0 <commit_id> [platform]"
    echo "Example: $0 abc123def456 linux-x64"
    exit 1
fi

# 下载
echo "Downloading VS Code Server..."
wget "https://update.code.visualstudio.com/commit:${COMMIT_ID}/server-${PLATFORM}/stable" \
    -O vscode-server.tar.gz

# 创建目录
mkdir -p ~/.vscode-server/bin/${COMMIT_ID}

# 解压
echo "Extracting..."
tar -xzf vscode-server.tar.gz -C ~/.vscode-server/bin/${COMMIT_ID} --strip-components 1

# 设置权限
chmod +x ~/.vscode-server/bin/${COMMIT_ID}/node
chmod +x ~/.vscode-server/bin/${COMMIT_ID}/bin/code-server

echo "Installation complete!"
rm vscode-server.tar.gz

使用方法： 

./download-vscode-server.sh abc123def456 linux-x64

2. Markdown Preview Enhanced

功能：实时预览 Markdown 文件，支持数学公式、流程图等高级特性。

Markdown Preview

使用方法： - 打开 Markdown 文件后，点击右上角的预览图标 📖 - 或使用快捷键 Cmd + K V（先按 Cmd + K，松开后按 V） - 也可以使用 Cmd + Shift + V 在当前编辑器中预览

特色功能： - 支持 LaTeX 数学公式 - 支持 Mermaid 流程图 - 可导出为 PDF、HTML 等格式 - 支持自定义 CSS 样式 - 实时同步滚动

示例： 

# 支持数学公式
$$E = mc^2$$

# 支持流程图
​```mermaid
graph LR
    A[开始] --> B[处理]
    B --> C[结束]
​```

3. GitHub Copilot（Codex）

功能：AI 代码助手，提供智能代码补全和建议。

说明：GitHub Copilot 基于 OpenAI Codex 模型，能够根据上下文生成代码片段。

GitHub Copilot

使用方法： 1. 需要 GitHub 账号并订阅 Copilot（学生和开源维护者可免费使用） 2. 安装 "GitHub Copilot" 插件 3. 登录 GitHub 账号授权 4. 开始编码时，Copilot 会自动提供建议（灰色文字） 5. 按 Tab 键接受建议，或按 Esc 忽略

使用技巧： - 写详细的注释，Copilot 会根据注释生成相应代码 - 使用 Option + ] 查看下一个建议 - 使用 Option + [ 查看上一个建议 - 使用 Option + \ 查看所有建议

4. Python

功能：提供 Python 语言支持，包括智能提示、调试、测试等。

Python Extension

主要特性： - IntelliSense 代码补全 - 代码格式化（支持 Black、autopep8 等） - 代码检查（Pylint、Flake8 等） - 强大的调试器 - Jupyter Notebook 支持 - 虚拟环境管理

配置示例： 

{
  "python.defaultInterpreterPath": "/usr/local/bin/python3",
  "python.formatting.provider": "black",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.analysis.typeCheckingMode": "basic"
}

调试功能： - 按 F5 开始调试 - 按 Cmd + Shift + D 打开调试视图 - 点击行号左侧设置断点 - 使用调试控制台执行表达式

Python Debugging

5. GitLens

功能：增强 Git 功能，可视化代码历史和提交信息。

GitLens

核心功能： - Blame 注释：在每行代码旁显示最后修改者和时间 - 代码作者信息：鼠标悬停查看详细的提交历史 - 文件历史：快速浏览文件的所有修改记录 - 分支比较：对比不同分支的差异 - 提交搜索：强大的提交历史搜索功能 - 可视化提交图：图形化展示分支和合并历史

使用技巧： - 点击状态栏的 GitLens 图标可以快速切换功能 - 使用侧边栏的 GitLens 视图查看仓库、文件历史等 - 在 Blame 注释中点击提交信息可以查看完整的提交详情 - 使用 Cmd + Shift + G 打开源代码管理视图

GitLens Blame

四、进阶技巧

快捷键大全（macOS）

掌握快捷键可以大大提升效率。以下是最常用的快捷键：

通用操作

  • Cmd + P：快速打开文件
  • Cmd + Shift + P：命令面板（最重要的快捷键！）
  • Cmd + ,：打开设置
  • Cmd + W：关闭当前标签页
  • Cmd + K Cmd + S：打开快捷键设置

编辑相关

  • Cmd + /：注释/取消注释
  • Option + ↑/↓：向上/向下移动当前行
  • Shift + Option + ↑/↓：向上/向下复制当前行
  • Cmd + D：选择下一个相同的词
  • Cmd + Shift + L：选择所有相同的词
  • Cmd + [：减少缩进
  • Cmd + ]：增加缩进
  • Cmd + Enter：在下方插入新行
  • Cmd + Shift + Enter：在上方插入新行

多光标编辑

  • Option + Click：添加光标
  • Cmd + Option + ↑/↓：在上方/下方添加光标
  • Cmd + U：撤销最后一次光标操作

多光标编辑

搜索和导航

  • Cmd + F：在当前文件中查找
  • Cmd + Shift + F：在整个项目中查找
  • Cmd + G：查找下一个
  • Cmd + Shift + G：查找上一个
  • Cmd + Option + F：查找并替换
  • Ctrl + G：跳转到指定行
  • Cmd + Shift + O：跳转到文件中的符号
  • Cmd + T：跳转到工作区中的符号

视图控制

  • Cmd + B：切换侧边栏显示
  • Cmd + J：切换面板显示
  • Cmd + \：拆分编辑器
  • Cmd + 1/2/3：聚焦到第 1/2/3 个编辑器组
  • `Ctrl + ``：打开/关闭集成终端
  • Cmd + Shift + E：显示资源管理器
  • Cmd + Shift + F：显示搜索
  • Cmd + Shift + D：显示调试
  • Cmd + Shift + X：显示扩展

终端操作

  • `Ctrl + ``：打开/关闭终端
  • `Cmd + Shift + ``：创建新终端
  • Cmd + \：在终端间切换

集成终端

小技巧：可以按 Cmd + K Cmd + S 打开快捷键设置，搜索任何命令并自定义快捷键。

代码片段（Code Snippets）

代码片段（Code Snippets）是一种强大的功能，可以快速插入预定义的代码模板，大大提升编码效率。

Code Snippets

创建自定义代码片段

  1. 按 Cmd + Shift + P 打开命令面板
  2. 输入 "Snippets: Configure User Snippets"
  3. 选择语言或创建全局代码片段
  4. 在打开的 JSON 文件中定义代码片段

代码片段语法示例

以 Python 为例，创建一个函数模板：

{
  "Python Function": {
    "prefix": "deff",
    "body": [
      "def ${1:function_name}(${2:parameters}):",
      "    \"\"\"${3:Description}",
      "    ",
      "    Args:",
      "        ${2:parameters}: ${4:parameter description}",
      "    ",
      "    Returns:",
      "        ${5:return description}",
      "    \"\"\"",
      "    ${6:pass}",
      "$0"
    ],
    "description": "Create a Python function with docstring"
  },
  "Python Main": {
    "prefix": "main",
    "body": [
      "if __name__ == '__main__':",
      "    ${1:main()}"
    ],
    "description": "Main entry point"
  }
}

JavaScript/TypeScript 示例

{
  "Console Log": {
    "prefix": "clg",
    "body": [
      "console.log('${1:message}:', $2);"
    ],
    "description": "Log to console"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": [
      "const ${1:functionName} = (${2:params}) => {",
      "    ${3:// body}",
      "};"
    ],
    "description": "Create arrow function"
  },
  "React Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "    return (",
      "        <div>",
      "            ${2:content}",
      "        </div>",
      "    );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create React functional component"
  }
}

代码片段语法说明

  • prefix：触发代码片段的关键字
  • body：代码片段内容（数组形式，每个元素是一行）
  • description：代码片段描述（在补全提示中显示）
  • $1, $2, $3：Tab 停靠点，按 Tab 键可以依次跳转
  • ${1:default}：带默认值的占位符
  • $0：最终光标位置
  • ${1|option1,option2,option3|}：下拉选择选项

使用代码片段

  1. 在编辑器中输入 prefix 定义的关键字
  2. 按 Tab 或 Enter 键触发代码片段
  3. 按 Tab 键在各个占位符之间跳转
  4. 填写完毕后按 Esc 退出代码片段模式

常用变量

代码片段还支持使用预定义变量：

{
  "File Header": {
    "prefix": "header",
    "body": [
      "/**",
      " * @file $TM_FILENAME",
      " * @author ${1:Your Name}",
      " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " * @description ${2:File description}",
      " */",
      "",
      "$0"
    ],
    "description": "File header comment"
  }
}

常用变量包括： - $TM_FILENAME：当前文件名 - $TM_FILENAME_BASE：不含扩展名的文件名 - $TM_DIRECTORY：当前目录 - $TM_FILEPATH：完整文件路径 - $CURRENT_YEAR：当前年份（4位数） - $CURRENT_MONTH：当前月份（2位数） - $CURRENT_DATE：当前日期（2位数） - $CURRENT_HOUR：当前小时（24小时制） - $CLIPBOARD：剪贴板内容 - $WORKSPACE_NAME：工作区名称

工作区设置

除了用户设置，VS Code 还支持工作区设置，这对于不同项目有不同配置需求很有用。

工作区设置的优势： - 可以为每个项目定制不同的配置 - 配置可以提交到版本控制，团队共享 - 工作区设置优先级高于用户设置

创建工作区设置： 1. 在项目根目录创建 .vscode 文件夹 2. 在其中创建 settings.json 文件 3. 添加项目特定的配置

示例配置： 

{
  "editor.tabSize": 2,
  "python.defaultInterpreterPath": "./venv/bin/python",
  "files.exclude": {
    "**/__pycache__": true,
    "**/*.pyc": true
  }
}

Zen 模式与专注模式

VS Code 提供了多种专注模式，帮助你集中注意力编码：

Zen 模式： - 快捷键：Cmd + K Z - 隐藏所有 UI 元素，只显示编辑器 - 按 Esc Esc 退出

居中布局： - 命令面板搜索 "Toggle Centered Layout" - 将编辑器内容居中显示

Zen Mode

五、主题与美化

推荐主题

VS Code 有丰富的主题可供选择：

流行的暗色主题： - One Dark Pro：基于 Atom 的经典主题 - Dracula Official：温和的紫色调 - Material Theme：Material Design 风格 - Night Owl：为夜猫子优化的配色 - Tokyo Night：受 Tokyo Night 终端主题启发

流行的亮色主题： - GitHub Theme：GitHub 风格 - One Light：清爽明亮 - Material Theme Lighter：Material 亮色版

安装主题： 1. 按 Cmd + K Cmd + T 打开主题选择器 2. 或在扩展市场搜索主题名称 3. 点击安装并应用

主题选择器

文件图标主题

除了颜色主题，还可以自定义文件图标：

推荐的图标主题： - Material Icon Theme：最流行的图标主题 - vscode-icons：详细的文件类型图标 - Monokai Pro Icons：简洁现代

安装方法：在扩展市场搜索并安装，然后通过命令面板选择 "File Icon Theme"。

总结

VS Code 是一款功能强大且高度可定制的编辑器。通过合理配置和安装适合的插件，你可以打造一个完全符合个人习惯的开发环境。

学习建议： 1. 先熟悉基础功能和常用快捷键 2. 逐步添加必要的插件，不要一次性装太多 3. 定期查看官方文档和更新日志，发现新功能 4. 自定义代码片段，提升编码效率 5. 加入 VS Code 社区，学习他人的配置和技巧

记住，最好的配置就是最适合你的配置。不要盲目追求插件数量，选择真正能提升你工作效率的工具即可。

有用的资源： - VS Code 官方文档 - 快捷键速查表（PDF） - VS Code Can Do That? - 实用技巧集合

祝你使用愉快！🚀