vscode本身不提供自动重构能力，所谓“自动”实为语言服务器（lsp）在正确配置下触发的语义级编辑操作；vue项目中需确保volar与typescript服务协同工作，依赖tsconfig.json中"types": ["vue"]、"include"路径及experimentaldecorators等配置生效，且所有文件须先保存再执行f2重命名或extract to function等操作。
VSCode 本身不提供“自动重构”能力，所谓“自动”其实是语言服务器（LSP）在正确配置下触发的语义级编辑操作；Vue 项目里想用好它，关键不是装插件，而是让 Volar + TypeScript 服务真正跑起来。
为什么 Vue 文件里按 F2 只改当前文件？
根本不是插件没装对，而是 TypeScript 语言服务压根没识别出整个项目结构。Volar 的重命名、跳转、提取函数等功能全依赖 tsconfig.json 中的 "include" 和 "compilerOptions.types" 配置是否生效。
- 检查项目根目录是否存在
tsconfig.json，且内容包含"types": ["vue"]和"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"] - 若用
<script setup lang="ts"></script>，确认"experimentalDecorators": true已启用 - 右下角状态栏看到 “TypeScript initializing…” 就别急着按 F2，等它消失再试
- 按完 F2 没反应？先执行命令面板里的
Volar: Restart Server，再保存所有文件
Extract to Function 在 .vue 里失效的常见原因
VSCode 原生的“提取函数”只看语法树，不理解 Vue 的响应式上下文——它不会自动把 ref 或 computed 当作依赖传入参数，也不会处理 onMounted 这类副作用钩子。
- 必须选中**连续、无中断的表达式块**：不能跨
<template></template>和<script></script>，不能含半个v-if，也不能以return开头（顶层 return 会被忽略） - 选中
count.value++后提取，新函数参数里不会自动带count——得手动加，否则运行时报undefined - 如果模板里用了
{{ someComputed }}，而someComputed是computed(() => ...)，提取时它不会被识别为可提取项 - 推荐做法：先在
<script setup></script>里写纯函数逻辑，再调用，这样 Extract 才可靠
Ctrl+.（快速修复）在 Vue 文件里不弹出？
这个快捷键只响应当前行的诊断信息（Diagnostic），不是重构入口。它是否出现，取决于 ESLint 或 TypeScript 是否真正在该行报了错，以及对应扩展是否实现了 CodeAction。
- 确保已安装
ESLint扩展，并在settings.json中启用了"eslint.enable": true - 检查
.eslintrc.cjs的extends数组是否按顺序写了@vue/eslint-config-typescript和@vue/eslint-config-prettier - 如果当前行只是普通 JS 逻辑（比如
const a = 1），但没配jsconfig.json，TS 服务不接管，ESLint 也不报错，Ctrl+.就是空的 - 在
<template></template>里写错v-model:value拼写？只有开启Volar: Enable Template Interpolation Service并重启服务后，才可能触发修复建议
最常被忽略的一点：所有 LSP 驱动的操作（F2、Extract、Ctrl+.）都默认跳过未保存的文件。改了一半就去重命名？引用只会更新到已保存的部分，导致组件里还留着旧名。务必 Ctrl+S 全局保存后再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
