vue单文件组件折叠失效的根本原因是sublime未将.vue文件识别为vue component语法，右下角显示plain text或html而非vue component；必须手动切换语法、确保vue syntax highlight插件正确安装并启用嵌入规则，否则等区块无法触发折叠。
Vue单文件组件的折叠为什么失效？
Sublime 默认不识别 .vue 文件中的 <script></script> 或 <template></template> 块为可折叠结构，根本原因是：它没把当前视图当“Vue Component”语法处理，而是当成 Plain Text 或 HTML —— 折叠规则压根没加载。你按 Ctrl+Shift+[ 没反应，90% 是右下角显示的是 HTML 或 Plain Text，不是 Vue Component。
必须手动切换到 Vue Component 语法
Sublime 不会自动为 .vue 文件启用 Vue 折叠逻辑，哪怕你装了 Vue 插件。关键一步是强制指定语法：
- 点击右下角语言名 → 在弹出菜单中选择
Vue Component（不是Vue、HTML或JavaScript） - 如果没看到
Vue Component，说明你没装官方 Vue 插件，或插件未正确激活；推荐安装Vue Syntax Highlight（注意：v3.x 起才支持折叠，v2.x 会破坏作用域） - 保存文件（带
.vue后缀），再重新打开，看右下角是否稳定显示Vue Component
折叠 <script></script> 块依赖内部语言识别
<script></script> 标签里的 JS/TS 代码能否折叠，取决于 Sublime 是否把它识别为 JavaScript 或 TypeScript 作用域。常见卡点：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 光标停在
function行却无法折叠？按Ctrl+Shift+P→ 输入Developer: Show Scope Name，确认输出含source.js或source.ts，而不是source.vue或text.html.vue - 若 scope 显示异常，说明 Vue 语法包未正确嵌套 JS 语法；临时解法：把
<script></script>内容复制到新文件 → 保存为temp.js→ 看能否折叠 → 若能，问题就在 Vue 语法定义 - 某些 Vue 插件（如旧版
Vue Snippets）会覆盖foldingStartMarker，导致{和function不触发折叠；建议禁用非必要 Vue 相关插件后重试
手动折叠任意区域最可靠
当 <template></template> 或 <style></style> 块始终不响应自动折叠时，别硬等语法修复 —— 直接选中后折叠：
- 鼠标拖选整段
<template>...</template>（包括标签行） - 按
Ctrl+Shift+Alt+[（Windows/Linux）或Cmd+Ctrl+Option+[（macOS） - 侧边栏立即出现独立三角图标，点击即可展开/收起，不依赖任何语法包
- 该折叠只存于当前会话，关闭文件即消失，但胜在 100% 可控，且不影响其他自动折叠块
Vue 文件的折叠本质上是三层嵌套：外层靠 Vue Component 语法识别，中层靠 <script></script> 内部语言作用域，内层才轮到括号和缩进规则。最容易被忽略的是第二层 —— 光标在 <script></script> 里，但 scope 还是 source.vue，那所有 JS 折叠快捷键都会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
