Cloudflare AI 文档

Appearance

VS Code 小技巧 ​

VS Code 是一款强大的代码编辑器，这里分享一些实用技巧和快捷键。

核心快捷键 ​

基础导航 ​

快捷键功能
Ctrl+P快速打开文件
Ctrl+Shift+P命令面板
Ctrl+B切换侧边栏
Ctrl+Shift+E资源管理器
Ctrl+Shift+F全局搜索
Ctrl+Shift+G源代码管理
Ctrl+Shift+D调试
Ctrl+Shift+X扩展

编辑操作 ​

快捷键功能
Alt+↑/↓移动行
Alt+Shift+↑/↓复制行
Ctrl+Enter在下方插入新行
Ctrl+Shift+Enter在上方插入新行
Ctrl+/切换注释
Ctrl+Shift+/块注释
Ctrl+Shift+K删除行
Ctrl+D选择下一个相同词
Ctrl+Shift+L选择所有相同词
Ctrl+U撤销选择
Ctrl+K Ctrl+0折叠所有
Ctrl+K Ctrl+J展开所有

多光标编辑 ​

快捷键功能
Alt+Click添加光标
Ctrl+Alt+↑/↓在上/下方添加光标
Ctrl+L选择当前行
Ctrl+Shift+Alt+↑/↓在上/下方插入光标
Ctrl+I在当前光标上方插入光标

搜索替换 ​

快捷键功能
Ctrl+F查找
Ctrl+H替换
Ctrl+Shift+H文件中替换
Ctrl+Shift+F在所有文件中查找
Ctrl+Shift+H在所有文件中替换
Alt+Enter选择所有查找结果

高级技巧 ​

1. 快速打开文件 ​

Ctrl+P → 输入文件名
支持模糊搜索:
- 输入 "fci" 可以找到 "file-component.tsx"
- 输入 "@function" 跳转到函数
- 输入 ":10" 跳转到第 10 行
- 输入 "#error" 搜索符号

2. 命令面板 ​

Ctrl+Shift+P

常用命令:
- "Format Document" - 格式化文档
- "Change Language Mode" - 更改语言模式
- "Toggle Terminal" - 切换终端
- "Git: Clone" - 克隆仓库
- "Preferences: Color Theme" - 更改主题

3. 代码片段 (Snippets) ​

创建自定义代码片段：

json
// 文件 → 首选项 → 用户代码片段
{
  "React Component": {
    "prefix": "rc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "  return (",
      "    <div>",
      "      ${0}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create React Component"
  },

  "Console Log": {
    "prefix": "cl",
    "body": "console.log('$1', $1);$0",
    "description": "Console Log"
  }
}

4. 多文件夹工作区 ​

文件 → 将文件夹添加到工作区

好处:
- 同时编辑多个项目
- 跨项目文件搜索
- 统一管理多个项目

5. 设置同步 ​

设置 → 登录账户 → 启用设置同步

同步内容:
- 用户设置
- 键盘快捷键
- 扩展
- 用户代码片段
- UI 状态

6. 任务自动化 ​

创建 .vscode/tasks.json：

json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Dev",
      "type": "shell",
      "command": "npm run dev",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "group": "build"
    },
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm test",
      "group": {
        "kind": "test",
        "isDefault": true
      }
    }
  ]
}

运行任务：Ctrl+Shift+B 或 F1 → "Tasks: Run Task"

7. 调试配置 ​

创建 .vscode/launch.json：

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach to Process",
      "type": "node",
      "request": "attach",
      "port": 9229
    }
  ]
}

8. 代码格式化 ​

自动格式化：

json
// settings.json
{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

格式化快捷键：

  • Shift+Alt+F - 格式化文档
  • Ctrl+K Ctrl+F - 格式化选择

9. 代码折叠 ​

Ctrl+K Ctrl+0 - 折叠所有
Ctrl+K Ctrl+1 - 折叠 1 级
Ctrl+K Ctrl+2 - 折叠 2 级
Ctrl+K Ctrl+J - 展开所有
Ctrl+K Ctrl+[ - 折叠当前
Ctrl+K Ctrl+] - 展开当前

10. 分屏编辑 ​

Ctrl+\ - 拆分编辑器
Ctrl+1/2/3 - 切换到第 1/2/3 个编辑器
Ctrl+Alt+←/→ - 在编辑器组之间移动
Ctrl+Alt+↑/↓ - 在编辑器组之间移动

终端技巧 ​

终端快捷键 ​

快捷键功能
`Ctrl+``切换终端
`Ctrl+Shift+``创建新终端
Ctrl+Shift+C - 复制
Ctrl+Shift+V粘贴
Ctrl+↑/↓滚动
Shift+PgUp/PgDn滚动页面

多终端管理 ​

1. Ctrl+Shift+` 打开终端
2. 点击终端右上角的 "+" 添加新终端
3. 点击终端右上角的下拉图标切换终端
4. 右键终端 → "Split Terminal" 拆分终端

Git 集成 ​

Git 快捷键 ​

快捷键功能
Ctrl+Shift+G打开源代码管理
Alt+←/→上一个/下一个更改
Ctrl+Enter提交
Ctrl+Shift+Enter推送

Git 操作 ​

源代码管理面板:
- 点击文件查看差异
- 右键文件 → "Stage Changes" 暂存
- 右键文件 → "Unstage Changes" 取消暂存
- 右键文件 → "Discard Changes" 丢弃更改
- 输入消息 → Ctrl+Enter 提交

搜索技巧 ​

高级搜索 ​

Ctrl+Shift+F 打开全局搜索

搜索语法:
- hello world        # 包含两个词
- hello OR world     # 包含任一词
- "hello world"      # 完全匹配
- hello.*world       # 正则表达式
- path:src           # 在 src 目录中搜索
- file:*.js          # 只在 .js 文件中搜索
- hello -world       # 包含 hello 但不包含 world

搜索过滤 ​

点击搜索框旁的过滤图标:
- Include: 包含的文件模式
- Exclude: 排除的文件模式

编辑器技巧 ​

1. 智能移动 ​

Ctrl+Alt+←/→ - 后退/前进
Ctrl+Home/End - 跳转到文件开头/结尾
Ctrl+G - 跳转到行
Ctrl+T - 跳转到符号

2. 智能选择 ​

Ctrl+Shift+←/→ - 选择到单词边界
Ctrl+Shift+Home/End - 选择到文件开头/结尾
Ctrl+Shift+↑/↓ - 向上/下选择

3. 重构代码 ​

F2 - 重命名符号
Shift+F12 - 查找引用
F12 - 转到定义
Alt+F12 - 查看定义（侧边栏）
Ctrl+F12 - 查看实现

4. 代码操作 ​

右键或:
- 提取函数
- 提取变量
- 移动到新文件
- 转换为 const/let
- 添加导入
- 组织导入 (Ctrl+Shift+O)
- 排序导入

5. 错误和警告 ​

F8 - 跳转到下一个错误/警告
Shift+F8 - 跳转到上一个错误/警告
Ctrl+Shift+M - 显示问题面板

6. 代码导航 ​

Ctrl+T - 查找符号
Ctrl+Shift+O - 跳转到文件中的符号
Ctrl+Alt+O - 跳转到工作区中的符号

自定义配置 ​

推荐设置 ​

json
// settings.json
{
  // 编辑器
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // 文件
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true
  },

  // 终端
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.shell.osx": "/bin/zsh",

  // 主题
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "vs-seti",

  // 字体
  "editor.fontFamily": "Fira Code, 'Courier New', monospace",
  "editor.fontLigatures": true,

  // 自动导入
  "typescript.suggest.autoImports": true,
  "javascript.suggest.autoImports": true,

  // 性能
  "typescript.tsserver.maxTsServerMemory": 8192,

  // 其他
  "telemetry.telemetryLevel": "off",
  "workbench.startupEditor": "none"
}

推荐快捷键 ​

json
// keybindings.json
[
  {
    "key": "ctrl+d",
    "command": "editor.action.duplicateSelection"
  },
  {
    "key": "ctrl+shift+k",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+up",
    "command": "editor.action.moveLinesUpAction",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+down",
    "command": "editor.action.moveLinesDownAction",
    "when": "editorTextFocus"
  }
]

实用扩展 ​

必备扩展 ​

开发相关：

  • ESLint - JavaScript/TypeScript 代码检查
  • Prettier - 代码格式化
  • GitLens - Git 超强功能
  • Live Server - 实时预览
  • Thunder Client - API 测试（轻量级 Postman）

主题相关：

  • One Dark Pro - Atom One Dark 主题
  • Dracula Official - Dracula 主题
  • Material Icon Theme - 文件图标
  • Material Theme - Material 设计主题

语言支持：

  • Vetur - Vue 支持
  • Vue Language Features (Volar) - Vue 3 支持
  • TypeScript Vue Plugin (Volar) - TypeScript + Vue
  • ES7+ React/Redux/React-Native snippets - React 代码片段
  • Auto Rename Tag - 自动重命名标签
  • Auto Close Tag - 自动闭合标签

生产力：

  • Code Runner - 运行代码片段
  • Todo Tree - TODO 注释高亮
  • Bracket Pair Colorizer - 括号颜色（内置）
  • Indent-Rainbow - 缩进彩虹色
  • Error Lens - 内联显示错误
  • TODO Highlight - TODO 高亮

AI 辅助：

  • GitHub Copilot - AI 代码补全
  • CodeGeeX - 免费 AI 代码助手
  • Tabnine - AI 自动补全

实用技巧 ​

1. 快速查看定义 ​

Alt+F12 - 在侧边栏查看定义
Ctrl+Click - 跳转到定义
Ctrl+Shift+Click - 在新列打开定义

2. 查找所有引用 ​

Shift+F12 - 查找所有引用
Ctrl+Shift+F12 - 在搜索面板显示引用

3. 参数提示 ​

Ctrl+Shift+Space - 显示参数提示

4. 触发建议 ​

Ctrl+Space - 触发代码建议
Ctrl+Shift+Space - 触发参数建议

5. 快速修复 ​

Ctrl+. - 显示快速修复

6. 转换大小写 ​

Ctrl+Shift+P → "Transform to"
- Transform to Uppercase
- Transform to Lowercase
- Transform to Title Case

7. 排序列 ​

选择多行 → Ctrl+Shift+P → "Sort Lines Ascending/Descending"

8. 删除所有空行 ​

Ctrl+H - 打开替换
- 查找: ^\s*\n
- 替换: (留空)
- 启用正则表达式
- 全部替换

9. 多文件搜索和替换 ​

Ctrl+Shift+H - 在所有文件中替换
- 输入查找内容
- 输入替换内容
- 点击 "Replace All"

10. 保存时自动格式化 ​

json
// settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

鼠标操作 ​

鼠标快捷操作 ​

操作功能
中键点击在新列打开文件
Ctrl+点击跳转到定义
Alt+点击添加光标
双击选择单词
三击选择行
滚轮点击水平滚动
Ctrl+滚轮缩放编辑器

侧边栏操作 ​

- 拖拽文件/文件夹 - 移动
- 右键 - 上下文菜单
- 中键点击 - 关闭标签页
- Ctrl+点击 - 在新组打开

性能优化 ​

提升性能的设置 ​

json
{
  // 禁用自动更新
  "update.mode": "manual",

  // 禁用文件监视
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/.git/**": true
  },

  // 限制 TypeScript 内存
  "typescript.tsserver.maxTsServerMemory": 4096,

  // 禁用不需要的语言
  "javascript.validate.enable": false,

  // 减少动画
  "workbench.list.smoothScrolling": false,

  // 禁用 telemetry
  "telemetry.telemetryLevel": "off"
}

排除文件 ​

json
{
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/*.lock": true
  }
}

快捷键参考表 ​

Windows/Linux ​

分类快捷键
命令Ctrl+Shift+P
快速打开Ctrl+P
新建文件Ctrl+N
保存Ctrl+S
全部保存Ctrl+K S
关闭Ctrl+W
全部关闭Ctrl+K W
切换侧边栏Ctrl+B
切换终端`Ctrl+``
切换面板Ctrl+J
命令面板Ctrl+Shift+P
查找Ctrl+F
替换Ctrl+H
全局搜索Ctrl+Shift+F
跳转行Ctrl+G

Mac ​

分类快捷键
命令Cmd+Shift+P
快速打开Cmd+P
新建文件Cmd+N
保存Cmd+S
全部保存Cmd+K S
关闭Cmd+W
全部关闭Cmd+K W
切换侧边栏Cmd+B
切换终端`Cmd+``
切换面板Cmd+J

小技巧总结 ​

  1. 使用命令面板 (Ctrl+Shift+P) 可以快速访问所有功能
  2. 多光标编辑 大幅提高编辑效率
  3. 自定义代码片段 减少重复输入
  4. Git 集成 让版本控制更便捷
  5. 扩展生态 丰富编辑器功能
  6. 设置同步 在不同设备保持一致体验
  7. 任务和调试配置 简化开发流程
  8. 键盘快捷键 熟练使用大幅提升效率
  9. 多文件夹工作区 同时处理多个项目
  10. 搜索和替换 强大的全局搜索功能

基于 MIT 许可证发布。

Copyright © 2025-present