VS Code 安装与配置：常用扩展和使用指南

VS Code 完整使用指南

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

VS Code 主界面

一、安装 VS Code

安装 VS Code 非常简单：

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

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

小技巧：安装完成后，建议在终端中启用 code 命令：

按 Cmd + Shift + P 打开命令面板
输入 “Shell Command: Install ‘code’ command in PATH”
之后就可以在终端中使用 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 配置文件：

按 Cmd + Shift + P 打开命令面板
输入 “Preferences: Open User Settings (JSON)”
在打开的 settings.json 文件中添加或修改配置

命令面板

三、必备插件推荐

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

扩展市场

1. Remote - SSH

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

安装方式：

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

Remote SSH

使用方法：

按 Cmd + Shift + P 打开命令面板
输入 “Remote-SSH: Connect to Host”
输入 SSH 连接信息，如 user@hostname
输入密码后即可连接

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

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

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

症状：

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

解决方案 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

在本地下载 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

上传到远程服务器：

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

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

# 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

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

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

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

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

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

使配置生效：
```
source ~/.bashrc
```
重新连接

解决方案 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

使用方法：

需要 GitHub 账号并订阅 Copilot（学生和开源维护者可免费使用）
安装 “GitHub Copilot” 插件
登录 GitHub 账号授权
开始编码时，Copilot 会自动提供建议（灰色文字）
按 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

创建自定义代码片段

按 Cmd + Shift + P 打开命令面板
输入 “Snippets: Configure User Snippets”
选择语言或创建全局代码片段
在打开的 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|}：下拉选择选项

使用代码片段

在编辑器中输入 prefix 定义的关键字
按 Tab 或 Enter 键触发代码片段
按 Tab 键在各个占位符之间跳转
填写完毕后按 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 还支持工作区设置，这对于不同项目有不同配置需求很有用。

工作区设置的优势：

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

创建工作区设置：

在项目根目录创建 .vscode 文件夹
在其中创建 settings.json 文件
添加项目特定的配置

示例配置：

{
  "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

五、主题与美化

文件图标主题

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

推荐的图标主题：

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

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

总结

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

学习建议：

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

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

有用的资源：

祝你使用愉快！🚀

VS Code 完整使用指南

一、安装 VS Code

二、基础配置

打开设置

常用配置项

1. 缩进长度设置

2. 字体设置

3. 其他实用配置

编辑配置文件

三、必备插件推荐

1. Remote - SSH

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

2. Markdown Preview Enhanced

3. GitHub Copilot（Codex）

4. Python

5. GitLens

四、进阶技巧

快捷键大全（macOS）

通用操作

编辑相关

多光标编辑

搜索和导航

视图控制

终端操作

代码片段（Code Snippets）

创建自定义代码片段

代码片段语法示例

JavaScript/TypeScript 示例

代码片段语法说明

使用代码片段

常用变量

工作区设置

Zen 模式与专注模式

五、主题与美化

推荐主题

文件图标主题

总结

相关文章