1. 为什么区域选中总让人抓狂写代码时最烦的操作之一就是选中一整块代码。比如你想把某个函数体整体复制走或者把if判断里的整段逻辑删掉重写用鼠标拖拽要么选多了要么选少了尤其是嵌套层级一深拖半天还选不准。VSCode 自带的CtrlW虽然能按语法结构逐层扩展选中但它默认绑定在「扩展选区」命令上和很多人的操作习惯冲突而且遇到 HTML 标签、JSON 双引号、括号嵌套这些场景时逐层扩展的粒度并不总是符合直觉。expand region 这个插件就是来解决这个问题的。它的核心能力是把光标放在某个括号、引号或标签内部按一下快捷键直接选中这一层的内容再按一下向外扩一层。对于经常处理 HTML 模板、JSON 配置、JS 对象字面量的开发者来说这个操作能省掉大量拖拽时间。我试过在写 Vue 单文件组件时用它选中整个template块比手动拖快很多。这篇内容聚焦两件事一是把 expand region 的快捷键配置成顺手的方案二是给出一套可复制的settings.json骨架让你在 VSCode 里快速完成区域选中。适合前端、Node.js 后端以及任何需要频繁编辑结构化文本的人。下面从环境准备开始一步步配到能验证效果为止。2. TaoToken 前置把模型能力接进编辑器工作流expand region 本身是纯本地插件不依赖任何网络服务。但如果你在写代码时习惯让 AI 帮忙补全或解释选中的代码块就需要一个稳定的模型接入点。TaoToken 在这里的角色是提供统一的 API 入口让你在 VSCode 里通过插件或脚本调用模型时不用到处切换配置。它的官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。你可以先在控制台创建一个 API Key后面如果要在 VSCode 里做「选中代码 → 发给模型 → 返回解释」这类操作会用到这个 Key。具体操作路径打开控制台页面 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 登录后进入 API Keys 管理页 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 新建一个 Key 并复制保存。这个 Key 只在创建时完整显示一次建议先存到本地密码管理器里。如果你只是想先验证模型对话效果可以直接用模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 测试。而如果你打算长期在 VSCode 里做编码辅助比如配合 Claude Code 或自定义脚本可以了解 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合高频调用场景。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有完整的请求格式说明。注意expand region 的选中操作完全离线TaoToken 只在你需要调用模型时才参与。两者配合的逻辑是先用 expand region 精准选中代码块再把选中内容交给模型处理减少无关上下文干扰。3. 可复制配置settings.json 骨架与快捷键绑定3.1 安装 expand region 插件在 VSCode 扩展面板搜索expand-region作者是letrieu。安装完成后不需要重启但建议重载一次窗口确保命令注册生效。安装后你会得到两个核心命令命令 ID作用expand-region.subword按子词粒度扩展选中expand-region.region按语法区域扩展选中实际使用中expand-region.region更常用它能识别括号、引号、HTML 标签等结构。3.2 修改默认快捷键插件默认绑定的是CtrlW但这个组合在 VSCode 里通常被「扩展选区」占用容易冲突。我把它改成了CtrlQ左手小指和无名指操作比较顺手也不和常用命令打架。打开settings.json快捷键设置加入以下配置[ { key: ctrlq, command: expand-region.region, when: editorTextFocus }, { key: ctrlshiftq, command: expand-region.subword, when: editorTextFocus } ]如果你更习惯用AltQ或Ctrl;把key字段换掉即可。when条件保持editorTextFocus确保只在编辑器获得焦点时生效避免在终端或搜索框里误触。3.3 settings.json 补充配置除了快捷键还可以在用户设置里加一些辅助项让选中行为更符合预期{ editor.suggestSelection: first, editor.wordSeparators: ~!#$%^*()-[{]}\\|;:\,./?, expand-region.autoSelect: true, expand-region.showStatusBar: true }expand-region.autoSelect设为true时光标放在括号内按快捷键会直接选中内容不需要先手动定位到括号边缘。showStatusBar会在状态栏显示当前扩展层级方便你判断选到了第几层。提示如果你用的是 VSCode 的便携版或远程开发模式快捷键配置要写在对应环境的keybindings.json里而不是工作区的settings.json。两者作用范围不同别搞混。4. 验证请求选中效果实操与结果确认配置完成后用几个典型场景验证是否生效。4.1 JS 对象字面量选中新建一个.js文件写入const config { api: https://taotoken.net/api, model: gpt-4, options: { temperature: 0.7, maxTokens: 2048 } };把光标放在options后面的{和}之间任意位置按CtrlQ。第一次按应该选中temperature: 0.7, maxTokens: 2048这一整段再按一次选中整个options: { ... }属性继续按会扩展到整个config对象。状态栏会显示当前层级确认选中范围符合预期。4.2 HTML 双引号内容选中在.html文件里写div classcontainer>function calc(a, b) { return (a b) * (a - b); }光标放在a b中间按CtrlQ会先选中a b再按选中(a b)继续按选中(a b) * (a - b)最后选中整个return语句。每一层都有明确边界不会跳层。如果你在验证过程中想确认模型对选中代码的理解可以把选中的内容复制到模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 里提问看看返回结果是否准确。这一步不是必须的但能帮你判断选中范围是否合理。5. 本篇常见错排查5.1 快捷键按了没反应先检查keybindings.json里是否有其他命令占用了CtrlQ。在 VSCode 里按CtrlK CtrlS打开快捷键面板搜索ctrlq看是否有冲突项。如果有把冲突项改掉或禁用。另外确认when条件没有写成editorFocus之外的值否则在编辑器里不生效。5.2 选中范围不对总是多选或少选这通常和文件的语言模式有关。expand region 依赖语法解析如果文件没有被正确识别为 JavaScript、HTML 或 JSON选中逻辑会退化。检查 VSCode 右下角的语言标识手动切换成对应语言。比如.vue文件如果被识别成纯文本括号选中就会失效。5.3 安装后命令面板搜不到 expand region插件安装后需要重载窗口。按CtrlShiftP输入Reload Window执行一次。如果还是搜不到检查插件是否被禁用或者是否安装到了错误的 VSCode 版本比如把桌面版插件装到了网页版。5.4 和 Vim 插件冲突如果你装了 VSCodeVimCtrlQ可能被 Vim 的正常模式占用。解决办法是在 Vim 配置里加一行unmap C-q或者把 expand region 的快捷键改成AltQ这类 Vim 不常用的组合。5.5 选中后想取消当前层expand region 没有内置的「收缩选区」命令。如果选多了按Esc取消全部选中重新定位光标再按。或者用 VSCode 自带的ShiftAltLeft收缩选区两者可以配合使用。6. 把选中能力和模型调用串起来expand region 解决的是「精准选中」这一步而选中之后做什么取决于你的工作流。如果你只是本地编辑那配好快捷键就够用了。如果你想让选中的代码块直接进入模型处理流程就需要一个稳定的 API 入口。TaoToken 的 API 地址是 https://taotoken.net/api 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。你可以用选中的代码块构造请求比如把expand-region.region选中的内容作为messages里的content发给模型让它解释或重构。API Key 在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 管理新建后复制到环境变量里不要硬编码在脚本中。如果你打算长期在 VSCode 里做编码辅助比如配合 Claude Code 或自定义 AgentCoding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 比按次调用更划算。Claude Code 的接入说明在 https://taotoken.net/claudecode?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 里面有环境变量配置示例。最后说一个实际踩过的坑expand region 在超大文件超过 5000 行里响应会变慢因为语法树解析需要时间。遇到这种情况可以先用 VSCode 的代码折叠把无关区域折起来再按快捷键选中速度会明显提升。另外如果你同时开了多个编辑器窗口快捷键只在当前焦点窗口生效切换窗口后需要重新点击编辑器区域再按。
