- name
- vue-best-practices
- description
- Vue 3 / Vue.js 在 TypeScript、vue-tsc、Volar 下的最佳实践。用于编写、审查或重构 Vue 组件时确保正确类型模式。触发场景：Vue 组件、props 提取、包装组件、模板类型检查、Volar 配置等。
- license
- MIT
Vue 最佳实践
Vue 3 与 Vue.js 在 TypeScript、vue-tsc、Volar 下的最佳实践，用于编写、审查或重构 Vue 组件时保证正确的类型与工具链用法。
能力规则
| 规则 | 关键词 | 说明 |
|---|---|---|
| extract-component-props | get props type、wrapper component、extend props、inherit props、ComponentProps | 从 .vue 组件提取类型 |
| vue-tsc-strict-templates | undefined component、template error、strictTemplates | 在模板中捕获未定义组件 |
| fallthrough-attributes | fallthrough、$attrs、wrapper component | 透传属性的类型检查 |
| strict-css-modules | css modules、$style、typo | 捕获 CSS 模块类名拼写错误 |
| data-attributes-config | data-*、strictTemplates、attribute | 允许 data-* 属性 |
| volar-3-breaking-changes | volar、vue-language-server、editor | 修复 Volar 3.0 升级问题 |
| module-resolution-bundler | cannot find module、@vue/tsconfig、moduleResolution | 修复模块解析错误 |
| define-model-update-event | defineModel、update event、undefined | 修复 model 更新错误 |
| with-defaults-union-types | withDefaults、union type、default | 修复联合类型默认值 |
| deep-watch-numeric | watch、deep、array、Vue 3.5 | 高效数组监听 |
| vue-directive-comments | @vue-ignore、@vue-skip、template | 控制模板类型检查 |
| vue-router-typed-params | route params、typed router、unplugin | 修复路由参数类型 |
效率规则
| 规则 | 关键词 | 说明 |
|---|---|---|
| hmr-vue-ssr | hmr、ssr、hot reload | 修复 SSR 应用中的 HMR |
| pinia-store-mocking | pinia、mock、vitest、store | 模拟 Pinia store |