详细介绍WebStorm之Vue代码重命名重构（全自动）-webstorm-PHP中文网

vue组件名重命名不能仅改函数名，因组件名在jsx标签、、路由配置、第三方库等多处形成弱引用，webstorm的shift+f6仅分析ast不解析字符串，故需手动同步更新所有引用及注册名。

详细介绍webstorm之vue代码重命名重构（全自动）

Vue组件名重命名为什么不能只改<script>里的函数名</script>

因为 Vue 组件名在多个地方形成弱引用：JSX 标签、<component :is=""></component>、defineAsyncComponent、router.addRoute 路由配置、甚至第三方库（如 ElementPlus 的 component-name 属性）里都可能出现。WebStorm 的 Shift+F6 只分析 AST 中的声明与导入/导出关系，不解析字符串拼接或动态 key，所以仅重命名 export default defineComponent({ name: 'OldName' }) 或 export default { name: 'OldName' } 里的 name 字段，不会自动更新 <old-name></old-name> 标签。

常见错误现象：Shift+F6 改完组件名后，模板里仍报 Unknown custom element: <old-name></old-name>；或者路由跳转失败，但控制台无报错——说明路径或组件注册名没同步。

必须手动检查所有 <old-name></old-name>、<oldname></oldname>、<old-name></old-name>（大小写敏感）形式的标签使用
router/index.ts 或 src/router/routes.ts 中 component: OldName 或 component: () => import('./OldName.vue') 必须人工更新
如果用了 app.component('old-name', OldName) 全局注册，也要同步改字符串参数

`<script setup></script>` 中的 `const` 变量重命名要停在哪

光标必须落在变量名**完整字符范围内**，且不能选中任何文本。比如 const count = ref(0)，光标停在 c、o、u、n、t 任意一个字母上都有效；停在 =、空格、ref 或括号内，就会误触发对 ref 函数的重命名，而不是 count 变量本身。

状态栏右下角必须显示 TypeScript 或 Vue，不能是 Plain Text —— 否则 Shift+F6 会灰掉或退化为全文本替换。

若变量是 defineProps 或 defineEmits 的形参（如 defineProps()），Shift+F6 对 msg 无效：它不是运行时变量，而是类型参数，需手动改类型定义
defineModel 的绑定名（如 const model = defineModel()）也不参与语义重命名，value 是字符串字面量，得用 Find → Replace in Path 手动处理
响应式对象解构（如 const { name, age } = user）中的 name 无法被 Shift+F6 安全重命名，因为它没有独立声明，只是属性访问

Vue SFC 文件名重命名后 import 路径不更新？

文件名重命名必须用 F6（不是 Shift+F6），且必须在项目视图中右键点击文件，或选中文件后按 F6。如果在编辑区打开文件后按 F6，而光标停在 <template></template> 或 <style></style> 里，F6 会失效或触发其他操作。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

关键勾选项只有两个：Search for text occurrences 必须勾选，否则所有 import、require、defineAsyncComponent 引用都不会更新；Search in comments and strings 默认不勾，除非你真需要把 "./OldName.vue" 这种字符串也一并替换（通常不该开）。

如果项目用了 tsconfig.json 的 paths 别名（如 @/components/OldName.vue），Search for text occurrences 勾了才能识别并更新别名路径
动态导入（如 import(`./${name}.vue`)）永远无法被 WebStorm 自动识别，重构后必须人工 grep 验证
验证是否生效：在任意 import 行按 Ctrl+B（macOS Cmd+B），看能否跳转到新文件名；跳不到，说明路径没更新成功

为什么重命名 Vue 组件后 TypeScript 报 `Cannot find name`

这不是重命名失败，而是类型系统未同步。Vue 组件导出的类型（如 defineComponent 返回值、ComponentPublicInstance 接口）可能被其他文件通过 declare module 或 types.d.ts 显式声明，而这些声明不会被 Shift+F6 触及。

例如你重命名了 MyButton.vue 为 PrimaryButton.vue，但 shims-vue.d.ts 里还有 declare module '*.vue' { ... export default MyButton }，TS Server 就会继续找 MyButton。