syapi
    • 操作指南
    • Visual Studio Code (VS Code) 详细安装与使用教程
    • claude code接入教程
    • opencode接入教程
    • Codex接入教程
    • OpenClaw接入教程
    • cherry studio教程
    • 创建DeepSeek分组以及秘钥
    • claude code接入DeepSeek教程
    • Codex接入DeepSeek教程

    Visual Studio Code (VS Code) 详细安装与使用教程

    适用于 Windows / macOS / Linux 平台
    最后更新:2026 年 6 月

    目录#

    一、VS Code 简介
    二、下载与安装
    Windows 安装
    macOS 安装
    Linux 安装
    三、初次启动与界面介绍
    四、基础设置
    设置中文界面
    修改主题
    常用设置项
    五、快捷键大全
    六、扩展(插件)管理
    七、推荐插件列表
    八、使用技巧
    九、常见问题

    一、VS Code 简介#

    Visual Studio Code(简称 VS Code)是微软开发的一款 免费、开源 的代码编辑器,支持 Windows、macOS 和 Linux 三大平台。

    核心特点#

    特性说明
    🆓 完全免费无任何功能限制
    🔌 海量扩展插件市场有数万款扩展
    🚀 轻量快速启动迅速,内存占用低
    💻 跨平台Windows / macOS / Linux
    🐙 Git 集成内置版本控制支持
    🔍 智能提示IntelliSense 代码补全
    🐞 调试工具内置断点调试器
    🎨 高度可定制主题、设置、快捷键均可自定义

    二、下载与安装#

    下载地址#

    官方下载:https://code.visualstudio.com/Download
    官方下载页面
    官网会根据你的操作系统自动推荐对应的安装包。你也可以手动选择:
    平台版本选择
    WindowsUser Installer(推荐)、System Installer、Portable
    macOSIntel 芯片 / Apple Silicon(M1/M2/M3/M4)
    Linux.deb(Ubuntu/Debian)、.rpm(Fedora/CentOS)、.snap

    Windows 安装#

    方式一:图形化安装(推荐)#

    1.
    下载安装包:访问官网下载 VSCodeUserSetup-x64-最新版本.exe
    2.
    运行安装程序:双击安装包,会弹出安装向导
    3.
    同意协议 → 点击 「下一步」
    4.
    选择安装路径(建议默认)→ 点击 「下一步」
    5.
    选择附加任务(重要! 建议勾选以下选项):
    ☑ 创建桌面快捷方式
    ☑ 将"通过 Code 打开"操作添加到 Windows 资源管理器文件上下文菜单
    ☑ 将"通过 Code 打开"操作添加到 Windows 资源管理器目录上下文菜单
    ☑ 将 Code 注册为受支持的文件类型的编辑器
    ☑ 添加到 PATH(添加环境变量)
    6.
    点击 「安装」,等待进度条走完
    7.
    点击 「完成」,VS Code 自动启动

    方式二:便携版安装(无需管理员权限)#

    1.
    下载 Portable 版本(ZIP 包)
    2.
    解压到任意目录(如 D:\VSCode)
    3.
    在该目录下新建 data 文件夹(用于存放配置和插件)
    4.
    运行 Code.exe 即可
    推荐💡:普通用户选择方式一即可;如果你需要在 U 盘或公司电脑(无管理员权限)上使用,选择方式二。

    方式三:使用 winget(命令行安装)#

    # 打开 PowerShell 或 cmd,运行:
    winget install Microsoft.VisualStudioCode

    macOS 安装#

    方式一:手动安装#

    1.
    下载 macOS 版安装包(.zip 文件)
    2.
    双击解压,得到 Visual Studio Code.app
    3.
    将其拖入 「应用程序」 文件夹
    4.
    首次打开时,系统可能提示「无法验证开发者」,前往:
    系统设置 → 隐私与安全性 → 点击 「仍要打开」
    5.
    打开 VS Code 后,点击菜单栏 View → Command Palette,输入 shell command,选择 Install 'code' command in PATH

    方式二:使用 Homebrew 安装#


    Linux 安装#

    Ubuntu / Debian(.deb 包)#

    Fedora / CentOS / RHEL(.rpm 包)#

    Arch Linux#


    三、初次启动与界面介绍#

    启动 VS Code#

    安装完成后打开 VS Code,你会看到如下界面:
    ┌─────────────────────────────────────────────────┐
    │ 🔍 文件(F)  编辑(E)  选择(S)  查看(V)  帮助(H)   │
    ├────┬────────────────────────────────────────────┤
    │    │                                            │
    │ 活 │  欢迎页面                                   │
    │ 动 │  ┌──── 开始 ────┐                          │
    │ 栏 │  │ 新建文件      │                          │
    │    │  │ 打开文件夹    │                          │
    │    │  │ 克隆仓库      │                          │
    │    │  └──────────────┘                          │
    │    │                                            │
    │    │  ┌──── 最近 ────┐                          │
    │    │  │ 最近打开项目   │                          │
    │    │  └──────────────┘                          │
    │    │                                            │
    ├────┴────────────────────────────────────────────┤
    │ 状态栏: 行:1  列:1  空格:4  UTF-8  LF            │
    └─────────────────────────────────────────────────┘

    界面组成#

    区域名称说明
    1️⃣活动栏最左侧竖排图标:资源管理器、搜索、源代码管理、运行与调试、扩展
    2️⃣侧边栏显示活动栏选中项的内容,如文件列表、搜索面板等
    3️⃣编辑器区域中间主要区域,用于编辑代码
    4️⃣面板区域下方区域:终端、输出、调试控制台、问题面板
    5️⃣状态栏底部蓝色条,显示当前文件信息、编码、Git 分支等
    6️⃣菜单栏顶部菜单:文件、编辑、选择、查看、运行、帮助等

    活动栏图标速查#

    图标快捷键功能
    📁Ctrl+Shift+E资源管理器(文件列表)
    🔍Ctrl+Shift+F搜索(全局搜索文件内容)
    🌿Ctrl+Shift+G源代码管理(Git)
    ▶️Ctrl+Shift+D运行和调试
    🧩Ctrl+Shift+X扩展商店
    👤-帐户管理(登录同步设置)
    ⚙️Ctrl+,设置齿轮(管理)

    四、基础设置#

    设置中文界面#

    VS Code 默认是英文界面,安装中文语言包即可切换:
    1.
    点击活动栏的 扩展 图标(或按 Ctrl+Shift+X)
    2.
    搜索框输入 Chinese
    3.
    找到 「Chinese (Simplified) 简体中文」 插件
    4.
    点击 「安装」
    5.
    安装完成后,右下角弹出提示,点击 「Restart Now」 重启
    6.
    重启后界面变为中文
    如果想切回英文,按 Ctrl+Shift+P 打开命令面板,输入 Display Language,选择 en,重启即可。

    修改主题#

    1.
    按 Ctrl+K 再按 Ctrl+T(或:菜单 文件 → 首选项 → 主题 → 颜色主题)
    2.
    用上下键选择喜欢的主题,回车确认
    推荐主题:
    主题名称类型特点
    Dark+ (默认深色)深色默认,护眼
    Light+ (默认浅色)浅色光线好时使用
    One Dark Pro深色Atom 风格,颜值高
    GitHub Theme深/浅GitHub 风格
    Dracula Official深色色彩丰富
    Material Theme多种材质设计风格
    Monokai深色经典配色
    图标主题也建议安装:搜索 「Material Icon Theme」 插件,安装后文件会显示不同类型的图标,一目了然。

    常用设置项#

    按 Ctrl+,(或:文件 → 首选项 → 设置)打开设置。
    推荐调整的设置(点击右上角 {} 图标切换到 settings.json 模式):
    {
      // 编辑器
      "editor.fontSize": 16,                // 字体大小
      "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
      "editor.fontLigatures": true,         // 连字(需要支持连字的字体)
      "editor.tabSize": 2,                  // 缩进空格数
      "editor.wordWrap": "on",              // 自动换行
      "editor.minimap.enabled": true,       // 显示缩略图
      "editor.renderWhitespace": "boundary",// 显示空白字符
      "editor.bracketPairColorization.enabled": true, // 括号颜色配对
      "editor.guides.indentation": true,    // 缩进参考线
      "editor.formatOnSave": true,          // 保存时自动格式化
      
      // 终端
      "terminal.integrated.fontSize": 15,   // 终端字体大小
      "terminal.integrated.defaultProfile.windows": "Git Bash",
      
      // 工作台
      "workbench.colorTheme": "One Dark Pro",
      "workbench.iconTheme": "material-icon-theme",
      "workbench.startupEditor": "none",    // 启动时不显示欢迎页
      
      // 文件
      "files.autoSave": "afterDelay",       // 自动保存(延迟1秒)
      "files.autoSaveDelay": 1000,
      "files.exclude": {                    // 隐藏文件
        "**/node_modules": true,
        "**/.git": true
      },
      
      // Git
      "git.enableSmartCommit": true,        // 智能提交
      "git.confirmSync": false,             // 同步前不确认
      
      // 窗口
      "window.titleBarStyle": "custom",     // 自定义标题栏
    }

    五、快捷键大全#

    最常用快捷键(必记)#

    操作Windows/LinuxmacOS
    打开命令面板Ctrl+Shift+PCmd+Shift+P
    快速打开文件Ctrl+PCmd+P
    打开设置Ctrl+,Cmd+,
    搜索文件内容Ctrl+Shift+FCmd+Shift+F
    打开终端Ctrl+`Cmd+`
    保存文件Ctrl+SCmd+S

    编辑快捷键#

    操作Windows/LinuxmacOS
    复制当前行Ctrl+C(未选中时)Cmd+C(未选中时)
    移动当前行Alt+↑/↓Option+↑/↓
    复制当前行Alt+Shift+↑/↓Option+Shift+↑/↓
    注释/取消注释Ctrl+/Cmd+/
    块注释Shift+Alt+AShift+Option+A
    缩进/取消缩进Tab / Shift+TabTab / Shift+Tab
    格式化文档Shift+Alt+FShift+Option+F
    撤销Ctrl+ZCmd+Z
    多光标Alt+点击Option+点击

    多光标编辑(超级实用)#

    # 在多个位置同时编辑
    Alt + 鼠标点击          → 在点击处添加光标
    Ctrl + Alt + ↑/↓       → 在上/下行添加光标
    Ctrl + D               → 选中下一个相同单词
    Ctrl + Shift + L       → 选中所有相同单词
    Alt + Shift + 拖动鼠标  → 列选择模式

    导航快捷键#

    操作Windows/Linux说明
    Ctrl+P输入文件名快速跳转到文件
    Ctrl+P → :输入行号跳转到指定行
    Ctrl+P → @输入符号名跳转到函数/变量
    Ctrl+Tab切换标签页在打开的文件间切换
    `Ctrl+``分割编辑器分屏显示
    Ctrl+B切换侧边栏显示/隐藏文件列表

    六、扩展(插件)管理#

    打开扩展面板#

    点击活动栏的 扩展图标(四个方块)
    或按快捷键 Ctrl+Shift+X

    安装插件#

    1. 打开扩展面板
    2. 在搜索框输入插件名称
    3. 点击搜索结果中的插件
    4. 点击「安装」按钮
    5. 部分插件安装后需要重启或重新加载

    管理已安装的插件#

    ┌─ 扩展 ──────────────────────────┐
    │                                  │
    │ 🔍 搜索扩展...                    │
    │                                  │
    ├─ 已安装 ─────────────────────────┤
    │ ✅ 中文语言包                     │
    │    [禁用] [卸载]                  │
    │ ✅ Python                        │
    │    [禁用] [卸载]                  │
    │ ...                              │
    ├─ 推荐 ───────────────────────────┤
    │ 📌 基于你打开的文件推荐插件        │
    │                                  │
    └──────────────────────────────────┘

    插件同步#

    登录微软账号或 GitHub 账号后,可以同步所有设置和插件:
    1.
    点击活动栏底部的 「帐户」 图标
    2.
    选择 「登录」,使用 GitHub 或微软账号登录
    3.
    登录后点击左下角 ⚙️ → 设置同步已启用
    4.
    选择要同步的内容(设置、快捷键、插件等)
    换电脑时,登录同一账号即可自动同步。

    七、推荐插件列表#

    🌐 中文用户必备#

    插件名称用途
    Chinese (Simplified)简体中文语言包
    Settings Sync设置同步(已内置,无需额外安装)

    🧩 通用增强#

    插件名称用途推荐指数
    Material Icon Theme文件图标主题,美化文件列表⭐⭐⭐⭐⭐
    One Dark ProAtom 经典主题⭐⭐⭐⭐⭐
    Prettier代码格式化工具⭐⭐⭐⭐⭐
    ESLintJavaScript 代码检查⭐⭐⭐⭐⭐
    Live Server启动本地 Web 服务器,实时刷新⭐⭐⭐⭐⭐
    Color Highlight颜色代码高亮显示⭐⭐⭐⭐
    Bracket Pair Colorizer 2括号配对颜色(功能已内置到 VS Code)⭐⭐⭐⭐
    indent-rainbow缩进层次用颜色区分⭐⭐⭐⭐
    Path Intellisense路径自动补全⭐⭐⭐⭐
    GitLens增强的 Git 功能⭐⭐⭐⭐⭐
    Git GraphGit 分支图形化展示⭐⭐⭐⭐
    Error Lens行内显示错误信息⭐⭐⭐⭐

    ⌨️ 按语言分类#

    Python 开发#

    插件名称用途
    Python (微软官方)Python 语言支持(代码补全、调试等)
    PylancePython 语言服务器
    JupyterJupyter Notebook 支持
    autoDocstringPython 文档字符串自动生成

    JavaScript / TypeScript / Web 开发#

    插件名称用途
    ES7+ React/Redux/React-Native snippetsReact 代码片段
    Vue Language Features (Volar)Vue 3 支持
    Tailwind CSS IntelliSenseTailwind CSS 智能提示
    CSS PeekCSS 类名跳转

    Java 开发#

    插件名称用途
    Extension Pack for JavaJava 开发全家桶
    Spring Boot Extension PackSpring Boot 支持
    Lombok Annotations SupportLombok 注解支持

    C/C++ 开发#

    插件名称用途
    C/C++ (微软官方)C/C++ 语言支持
    C++ IntellisenseC++ 智能提示
    Code Runner一键运行代码片段

    Go 开发#

    插件名称用途
    Go (微软官方)Go 语言支持

    Rust 开发#

    插件名称用途
    rust-analyzerRust 语言支持
    cratesCrate 版本管理
    Even Better TOMLTOML 文件支持

    🛠️ 效率工具#

    插件名称用途
    Todo Tree管理代码中的 TODO 注释
    Bookmarks代码书签,方便跳转
    Markdown Preview Enhanced增强的 Markdown 预览
    Code Spell Checker拼写检查
    REST Client直接在 VS Code 中发送 HTTP 请求
    Thunder ClientAPI 测试客户端(类似 Postman)
    Draw.io Integration画流程图/思维导图
    Remote - SSH远程连接服务器开发
    Remote - WSLWSL 远程开发
    Remote - ContainersDocker 容器开发
    vscode-pets养一只宠物陪你写代码 😄

    八、使用技巧#

    1️⃣ 命令面板(万能入口)#

    按 Ctrl+Shift+P 打开命令面板,输入关键词即可快速执行操作:
    > 输入 "git"     → 所有 Git 相关操作
    > 输入 "> "      → 所有可用命令
    > 输入 "?"       → 帮助
    > 直接输入文件名  → 快速打开文件
    > 输入 ":行号"    → 跳转到某行
    > 输入 "@符号名"  → 跳转到函数/变量

    2️⃣ 内置终端#

    按 Ctrl+` 打开内置终端:
    可以同时打开多个终端标签页
    点击终端右侧 + 号新建终端
    下拉选择不同 Shell(PowerShell、cmd、Git Bash、WSL 等)
    拖拽终端窗口可以调整大小或移到侧边

    3️⃣ 分屏编辑#

    # 打开多个编辑器并排
    拖拽标签页到右侧 → 自动分屏
    Ctrl+\           → 向右分屏
    Ctrl+1/2/3       → 切换到第 1/2/3 个编辑器
    
    # 也可以把终端拖到右侧

    4️⃣ 智能代码补全(IntelliSense)#

    输入代码时自动弹出建议列表
    按 Tab 或 Enter 补全
    按 Ctrl+Space 手动触发补全
    按 Ctrl+Shift+Space 查看函数参数提示

    5️⃣ 代码片段(Snippets)#

    输入特定缩写后按 Tab 快速生成代码模板:
    常见语言的内置片段很多,也可以自定义(文件 → 首选项 → 用户片段)。

    6️⃣ Git 集成#

    1.
    打开侧边栏的 源代码管理(Ctrl+Shift+G)
    2.
    可以看到所有更改的文件
    3.
    在输入框写提交信息,按 Ctrl+Enter 提交
    4.
    更多 Git 操作:右下角状态栏显示当前分支

    7️⃣ 搜索和替换#

    全局搜索(Ctrl+Shift+F):
    ┌─ 搜索: function ──────┐
    │ 📁 src/                │
    │   app.js:15: function  │
    │   utils.js:42: function│
    │ 📁 test/               │
    │   test.js:8: function  │
    ├────────────────────────┤
    │ 🔍 包含的文件: *.ts     │
    │ 🚫 排除的文件: node_modules│
    │  ⚙️ 正则表达式         │
    └────────────────────────┘
    支持正则表达式
    可指定搜索范围(包含/排除文件)
    点击搜索结果直接跳转到文件

    8️⃣ 调试代码#

    1.
    点击活动栏的 运行和调试 图标(Ctrl+Shift+D)
    2.
    点击 「运行和调试」 按钮
    3.
    选择调试环境(Node.js、Python、Chrome 等)
    4.
    在代码行号左侧点击设置断点(红点)
    5.
    按 F5 开始调试
    调试快捷键:
    快捷键功能
    F5继续 / 启动调试
    F10单步跳过
    F11单步进入
    Shift+F11单步跳出
    Ctrl+Shift+F5重新启动
    Shift+F5停止调试

    9️⃣ 工作区(Workspace)#

    如果你同时开发多个相关项目,可以创建工作区:
    1.
    文件 → 将文件夹添加到工作区
    2.
    添加多个项目文件夹
    3.
    文件 → 保存工作区为... 保存 .code-workspace 文件
    工作区可以:
    同时管理多个项目
    每个项目使用不同配置
    保存后随时打开,恢复上次的文件布局

    🔟 Markdown 预览#

    VS Code 对 Markdown 有极好的支持:
    1.
    新建 .md 文件开始写作
    2.
    按 Ctrl+Shift+V 打开预览
    3.
    按 Ctrl+K V 将预览拖到侧边
    4.
    支持数学公式(LaTeX)、流程图等扩展

    1️⃣1️⃣ 远程开发(高级)#

    VS Code 支持远程开发,代码在远程服务器运行,本地编辑:
    Remote - SSH   → 通过 SSH 连接远程服务器
    Remote - WSL   → 连接 WSL(Windows Subsystem for Linux)
    Remote - Containers → 连接 Docker 容器
    Dev Containers → 在 Docker 容器中开发
    配置好 Remote-SSH 后,可以直接在 VS Code 中编辑服务器文件、使用终端、调试,就像本地一样。

    1️⃣2️⃣ 其他实用技巧#

    💡 Ctrl+P → 输入文件名后按空格,可以比较两个文件
    💡 Ctrl+Shift+P → 输入 "Screenshot" 可截图当前代码
    💡 Alt+选中区域 → 列编辑模式
    💡 Ctrl+Shift+O → 跳转到文件中的符号(函数、变量等)
    💡 Ctrl+G → 跳转到指定行
    💡 Ctrl+K Ctrl+C → 批量添加注释
    💡 Ctrl+K Ctrl+U → 批量取消注释
    💡 选中代码后拖动 → 移动代码
    💡 Alt+Shift+拖动 → 矩形选择
    💡 按住 Ctrl 滚动鼠标滚轮 → 缩放字体

    九、常见问题#

    Q1: VS Code 启动很慢?#

    解决方法:
    1.
    禁用不必要的插件(扩展面板 → 已安装 → 逐个禁用)
    2.
    关闭未使用的大文件标签页
    3.
    在设置中添加 "files.exclude" 排除大文件夹(如 node_modules)
    4.
    更新到最新版本
    5.
    如果使用 Windows,考虑禁用 Windows Defender 对项目文件夹的实时扫描

    Q2: 中文乱码怎么办?#

    解决方法:
    // 在 settings.json 中添加:
    "files.autoGuessEncoding": true
    或者手动切换编码:点击状态栏右下角的编码(如 UTF-8)→ 选择 「通过编码重新打开」 → 选择 GBK/GB2312。

    Q3: 终端不显示中文?#

    1.
    确认 VS Code 设置中 "terminal.integrated.fontFamily" 设置为支持中文的字体
    2.
    在 Windows 使用 PowerShell 或 Git Bash 替代 cmd

    Q4: 如何重置所有设置?#

    按 Ctrl+Shift+P → 输入 「Reset」 → 选择 「重置所有设置」。
    或者手动删除配置文件:
    Windows:删除 %APPDATA%\Code
    macOS:删除 ~/Library/Application Support/Code
    Linux:删除 ~/.config/Code

    Q5: 如何卸载 VS Code?#

    Windows#

    1.
    设置 → 应用 → 应用和功能
    2.
    找到 Visual Studio Code,点击卸载
    3.
    如果之前安装了便携版,直接删除整个文件夹

    macOS#

    Linux#

    Q6: VS Code 和 Visual Studio 有什么区别?#

    对比项VS CodeVisual Studio
    类型轻量级代码编辑器重量级集成开发环境(IDE)
    大小~200MB~10GB+
    启动速度秒开较慢
    主要用途Web 开发、Python、通用编程.NET、C++、大型企业应用
    价格免费社区版免费,专业版收费
    平台Windows/macOS/Linux仅 Windows(Mac 有不同版本)
    插件生态丰富丰富但不如 VS Code 灵活
    简单选择: 写前端、Python、Go、Rust 等 → VS Code;写 .NET/C++ 大型项目 → Visual Studio

    Q7: 如何在 VS Code 中运行 Python 代码?#

    1.
    安装 Python 插件
    2.
    确保本机已安装 Python 解释器
    3.
    打开 .py 文件
    4.
    按 Ctrl+F5 运行,或点击右上角的 ▶️ 按钮
    5.
    或右键点击 → 「在终端中运行 Python 文件」

    Q8: 如何设置默认终端为 Git Bash(Windows)?#

    // settings.json 中配置:
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.profiles.windows": {
      "Git Bash": {
        "path": "C:\\Program Files\\Git\\bin\\bash.exe"
      }
    }

    附录:常用命令行速查#

    在终端中使用 code 命令#

    安装时如勾选了「添加到 PATH」,可以在终端直接使用 code:

    常用系统操作#


    💡 最后提示:VS Code 的学习曲线很平缓,先熟悉常用快捷键和命令面板,然后根据你的编程语言安装必要的插件,边用边学,很快就能上手!
    如果遇到具体问题,欢迎随时问我!
    修改于 2026-06-30 07:48:26
    上一页
    操作指南
    下一页
    claude code接入教程
    Built with