VSCode Setup - langningchen/miniapp GitHub Wiki

VSCode 开发环境配置

本指南帮助您安装和配置 Visual Studio Code，这是一个强大的免费代码编辑器，支持多种编程语言和扩展。

🎯 为什么选择 VSCode？

  • 🆓 完全免费 - 微软开源产品
  • 🔌 丰富扩展 - 海量插件支持各种开发需求
  • 🔄 跨平台 - Windows、macOS、Linux 都支持
  • 🔗 WSL 集成 - 与 WSL2 无缝结合
  • 💡 智能提示 - 强大的代码智能感知

📋 安装 VSCode

Windows 用户

  1. 访问 VSCode 官网
  2. 点击 "Download for Windows"
  3. 下载完成后双击安装包
  4. 安装时建议勾选：
    • ✅ 添加到 PATH
    • ✅ 注册代码编辑器的文件关联
    • ✅ 添加"通过 Code 打开"到文件夹上下文菜单

Ubuntu 用户

方法一：使用 .deb 包安装（推荐）

# 下载并安装 VSCode
curl -L https://go.microsoft.com/fwlink/?LinkID=760868 -o vscode.deb
sudo dpkg -i vscode.deb

# 如果有依赖问题，运行：
sudo apt install -f

方法二：使用 Snap 包管理器

sudo snap install --classic code

方法三：使用官方 APT 仓库

# 导入 Microsoft GPG 密钥
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'

# 更新包列表并安装
sudo apt update
sudo apt install code

🔧 基本配置

首次启动

打开 VSCode：

  • Windows: 开始菜单搜索 "Visual Studio Code"
  • Ubuntu: 在终端输入 code 或从应用程序菜单启动

配置中文界面（可选）

  1. 按 Ctrl + Shift + P 打开命令面板
  2. 输入 "Configure Display Language"
  3. 选择 "Install additional languages..."
  4. 搜索并安装 "Chinese (Simplified)"
  5. 重启 VSCode

🔌 必需扩展安装

WSL 扩展（WSL 用户必装）

  1. 打开扩展视图：Ctrl + Shift + X
  2. 搜索 "WSL"
  3. 安装 "WSL" 扩展（由 Microsoft 提供）

安装后可以：

# 在 WSL 中使用 VSCode 打开当前目录
code .

# 打开特定文件
code filename.txt

C/C++ 开发扩展

搜索并安装以下扩展：

  1. C/C++ (Microsoft) - C++ 语言支持
  2. C/C++ Extension Pack (Microsoft) - C++ 扩展包
  3. CMake Tools (Microsoft) - CMake 项目支持
  4. CMake (twxs) - CMake 语法高亮

JavaScript/Node.js 开发扩展

  1. JavaScript (ES6) code snippets - JS 代码片段
  2. npm Intellisense - npm 包智能提示
  3. Path Intellisense - 路径智能提示

通用开发扩展

  1. GitLens - 增强 Git 功能
  2. Bracket Pair Colorizer - 括号配对着色
  3. Auto Rename Tag - 自动重命名标签
  4. Prettier - 代码格式化
  5. Error Lens - 错误提示增强

⚙️ 推荐设置

按 Ctrl + , 打开设置，或按 Ctrl + Shift + P 输入 "Preferences: Open Settings (JSON)"

添加以下配置：

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "editor.fontSize": 14,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.renderWhitespace": "boundary",
    "editor.rulers": [80, 120],
    "terminal.integrated.shell.linux": "/bin/bash",
    "git.autofetch": true,
    "extensions.autoUpdate": true,
    "workbench.colorTheme": "Dark+ (default dark)",
    "cmake.configureOnOpen": true
}

🔗 WSL 集成配置

连接到 WSL

  1. 确保安装了 WSL 扩展
  2. 按 Ctrl + Shift + P
  3. 输入 "WSL: Connect to WSL"
  4. 或点击左下角的绿色按钮选择 "New WSL Window"

在 WSL 中打开项目

# 在 WSL 终端中导航到项目目录
cd ~/development
git clone https://github.com/langningchen/miniapp.git
cd miniapp

# 用 VSCode 打开项目
code .

📁 工作区配置

创建工作区文件

在项目根目录创建 .vscode/settings.json：

{
    "cmake.buildDirectory": "${workspaceFolder}/jsapi/build",
    "cmake.sourceDirectory": "${workspaceFolder}/jsapi",
    "files.associations": {
        "*.hpp": "cpp",
        "*.cpp": "cpp"
    },
    "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools"
}

创建任务配置

创建 .vscode/tasks.json：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build Project",
            "type": "shell",
            "command": "./tools/build.sh",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            },
            "problemMatcher": ["$gcc"]
        }
    ]
}

🔍 调试配置

创建 .vscode/launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug C++ Program",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/jsapi/build/jsapi_langningchen",
            "args": [],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}",
            "environment": [],
            "externalConsole": false,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ]
        }
    ]
}

✅ 验证配置

测试 C++ 支持

  1. 创建测试文件 test.cpp：
#include <iostream>
int main() {
    std::cout << "Hello, World!" << std::endl;
    return 0;
}
  1. 按 Ctrl + Shift + P
  2. 输入 "C/C++: Edit Configurations"
  3. 确保能看到配置界面

测试 CMake 支持

  1. 按 Ctrl + Shift + P
  2. 输入 "CMake: Configure"
  3. 查看是否能正确识别 CMake 项目

测试终端集成

  1. 按 Ctrl + `` (反引号) 打开终端
  2. 确保终端路径正确
  3. 运行基本命令测试

📱 移动端访问（高级）

使用 GitHub Codespaces

  1. 在 GitHub 仓库页面点击 "Code" → "Codespaces"
  2. 创建新的 Codespace
  3. 在浏览器中使用 VSCode

使用 VSCode Server

# 安装 code-server
curl -fsSL https://code-server.dev/install.sh | sh

# 启动服务
code-server --bind-addr 0.0.0.0:8080

🚀 下一步

VSCode 配置完成后，请继续：

❗ 常见问题

问题1：VSCode 无法连接到 WSL

解决方案：

# 重启 WSL
wsl --shutdown
wsl

问题2：C++ 智能提示不工作

解决方案：

  1. 确保安装了 C/C++ 扩展
  2. 按 Ctrl + Shift + P，选择 "C/C++: Reset IntelliSense Database"
  3. 重新加载窗口

问题3：CMake 工具无法找到编译器

解决方案：

# 确保安装了 build-essential
sudo apt install build-essential

# 检查编译器路径
which gcc
which g++

问题4：终端无法打开

解决方案：

  • 检查 VSCode 设置中的终端配置
  • 尝试重新安装 VSCode
  • 检查系统环境变量

需要帮助？ 查看 常见问题解决 获取更多解决方案。

⚠️ **GitHub.com Fallback** ⚠️