高级技巧 #

┌─────────────────────────────────────────────────────────────┐
│                     高级功能                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  工作区管理  │  │  任务自动化  │  │  设置同步    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  多项目操作  │  │  命令行工具  │  │  性能优化    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

工作区文件（.code-workspace）包含：
• 文件夹路径
• 工作区设置
• 扩展推荐
• 任务配置

1. 打开文件夹
2. 文件 → 将工作区另存为
3. 保存 .code-workspace 文件

添加多个文件夹到工作区：

1. 文件 → 将文件夹添加到工作区
2. 选择要添加的文件夹
3. 保存工作区

{
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "files.exclude": {
        "**/node_modules": true,
        "**/dist": true
    }
}

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "npm",
            "script": "build",
            "problemMatcher": []
        },
        {
            "label": "test",
            "type": "npm",
            "script": "test",
            "problemMatcher": []
        }
    ]
}

1. 按 ⌘⇧P / Ctrl+Shift+P
2. 输入 "Tasks: Run Task"
3. 选择要运行的任务

// 在 keybindings.json 中添加
{
    "key": "cmd+shift+b",
    "command": "workbench.action.tasks.runTask",
    "args": "build"
}

1. 点击左下角账户图标
2. 选择 "打开设置同步"
3. 选择要同步的内容
4. 登录 GitHub 或 Microsoft 账号

可以同步的内容：
• 用户设置
• 键盘快捷键
• 代码片段
• 扩展列表
• UI 状态
• 语言服务器设置

在账户菜单中：
• 查看同步状态
• 手动同步
• 停止同步
• 重置同步

多根工作区允许同时打开多个项目：

1. 文件 → 将文件夹添加到工作区
2. 每个文件夹显示在文件资源管理器中
3. 可以分别配置设置

在多根工作区中：

• 使用 ⌘P / Ctrl+P 快速打开文件
• 文件路径显示项目名
• 可以搜索所有项目

# Mac/Linux
sudo ln -s "/path/to/VS Code.app/Contents/Resources/app/bin/code" /usr/local/bin/code

# 或在 VSCode 中
# ⌘⇧P → "Shell Command: Install 'code' command in PATH"

# 打开文件
code file.txt

# 打开文件夹
code /path/to/folder

# 打开工作区
code workspace.code-workspace

# 比较文件
code --diff file1.txt file2.txt

# 新窗口打开
code -n file.txt

1. ⌘⇧P / Ctrl+Shift+P
2. 输入 "Developer: Show Running Extensions"
3. 查看扩展启动时间

提升性能的方法：

• 禁用不常用的扩展
• 排除不需要的文件夹
• 减少文件监视数量
• 使用轻量级主题
• 定期清理工作区

{
    "files.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/.git": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true
    }
}

输入 Emmet 缩写快速生成代码：

HTML:
• div.container → <div class="container"></div>
• ul>li*3 → 创建 3 个列表项

CSS:
• m10 → margin: 10px;
• p20 → padding: 20px;

使用 Live Share 进行实时协作：

1. 安装 Live Share 扩展
2. 点击状态栏的 "Live Share"
3. 选择 "开始协作会话"
4. 分享链接给协作者

Live Share 支持：
• 实时编辑
• 共享终端
• 共享服务器
• 调试会话
• 聊天功能

场景：管理多个相关项目

步骤：
1. 打开第一个项目文件夹
2. 文件 → 将文件夹添加到工作区
3. 添加其他项目文件夹
4. 保存工作区文件

场景：自动化构建和测试

步骤：
1. 创建 .vscode/tasks.json
2. 定义 build 和 test 任务
3. 配置快捷键
4. 测试任务运行

场景：统一团队开发配置

步骤：
1. 创建 .vscode/settings.json
2. 创建 .vscode/extensions.json
3. 创建 .vscode/tasks.json
4. 提交到版本控制

┌─────────────────────────────────────────────────────────────┐
│                     高级功能使用流程                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  项目开发                                                    │
│     │                                                       │
│     ├─────▶ 创建工作区                                       │
│     │        │                                              │
│     │        └─▶ 保存 .code-workspace 文件                  │
│     │                                                       │
│     ├─────▶ 配置任务                                         │
│     │        │                                              │
│     │        └─▶ 创建 tasks.json                            │
│     │                                                       │
│     ├─────▶ 配置扩展                                         │
│     │        │                                              │
│     │        └─▶ 创建 extensions.json                       │
│     │                                                       │
│     └─────▶ 启用同步                                         │
│                │                                            │
│                └─▶ 登录账号同步设置                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

1. 打开多个项目文件夹
2. 创建工作区文件
3. 配置工作区设置
4. 保存工作区

1. 创建 tasks.json
2. 定义 npm 脚本任务
3. 运行任务
4. 检查输出

1. 登录 GitHub 账号
2. 启用设置同步
3. 在另一台机器同步设置