Compétences vue-best-practices
📦
Vue 3 專案經常面臨類型檢查問題、儲存時間過長和配置問題。本技能提供針對 Vue 元件類型定義、Volar 配置和常見 Vue 3 開發問題的精選解決方案。
Prend en charge: Claude Codex Code(CC)
1
Télécharger le ZIP du skill
2
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
3
Activez et commencez à utiliser
Tester
Utilisation de "vue-best-practices". How do I enable strict template checking in Vue?
Résultat attendu:
- To enable strict template checking in vue-tsc, add vueCompilerOptions to your tsconfig.app.json:
- ```json
- {
- "compilerOptions": {
- "strict": true,
- "skipLibCheck": true
- },
- "vueCompilerOptions": {
- "strictTemplates": true,
- "checkUnknownComponents": true
- }
- }
- ```
- This will catch:
- - Undefined components used in templates
- - Props not declared in defineProps
- - Unknown events emitted by components
- - Unregistered custom directives
Utilisation de "vue-best-practices". Vue file saves are very slow
Résultat attendu:
- Save delays in Vue projects are often caused by VSCode code actions triggering TypeScript synchronization. Fix this by:
- 1. Disable code actions in .vscode/settings.json:
- ```json
- { "vue.codeActions.enabled": false }
- ```
- 2. Or limit code action timeout:
- ```json
- { "vue.codeActions.savingTimeLimit": 1000 }
- ```
- 3. Upgrade to VSCode 1.81.0+ which includes performance fixes
- This reduces save time from 30-60 seconds to under 2 seconds.
Audit de sécurité
Sûrv1 • 1/30/2026
All static findings are false positives. This skill contains only markdown documentation files with code examples for Vue 3 best practices. The detected patterns (shell commands, cryptographic references, URLs) appear in code blocks and documentation links, not executable code. No security risks present.
20
Fichiers analysés
1,542
Lignes analysées
6
résultats
1
Total des audits
Problèmes à risque élevé (3)
rules/codeactions-save-performance.md:32-75rules/data-attributes-config.md:13-70rules/vue-tsc-strict-templates.md:17-64
Static Pattern False Positive: Shell Command Detection
The static analyzer detected 'Ruby/shell backtick execution' patterns in 247 locations across markdown files. These are JSON/TypeScript code examples in documentation, not actual shell commands. The backtick-like patterns are code fences and configuration snippets.
Static Pattern False Positive: Weak Cryptographic Algorithm
The static analyzer flagged 'weak cryptographic algorithm' in 45 locations. These detections are false positives triggered by the word 'md5' in documentation or by JSON structural patterns. No actual cryptographic code exists in this skill.
Static Pattern False Positive: Path Traversal
The static analyzer detected 'path traversal sequence' in 2 locations. These are relative path references in code examples for file configuration, not actual path traversal vulnerabilities.
Problèmes à risque moyen (2)
Static Pattern False Positive: Hardcoded URLs
The static analyzer detected 'hardcoded URL' in 33 locations. These are legitimate documentation links to Vue.js official resources, GitHub repositories, and discussion threads. URLs are expected content in documentation skills.
Static Pattern False Positive: Hidden File Access
The static analyzer detected 'hidden file access' in 1 location. This is a VSCode settings configuration showing how to configure Vue extension settings, not actual file access.
Problèmes à risque faible (1)
Static Pattern False Positive: System Reconnaissance
The static analyzer detected 'system reconnaissance' in 6 locations. These are command names like 'ls', 'cat' appearing in documentation examples for file operations or git commands.
Audité par: claude
Score de qualité
38
Architecture
100
Maintenabilité
87
Contenu
24
Communauté
63
Sécurité
91
Conformité aux spécifications
Ce que vous pouvez construire
修復 Vue 模板類型錯誤
開發人員在 Vue 模板中遇到「未定義的元件」錯誤。本技能提供 tsconfig 配置以啟用嚴格模板檢查並解決這些問題。
優化大型專案儲存時間
開發人員在 Vue 專案中遇到 30-60 秒的儲存延遲。本技能說明如何配置 VSCode 程式碼動作設定來修復儲存效能問題。
類型安全的元件 Props
開發人員需要從 Vue 元件提取 prop 類型以用於包裝元件。本技能提供 TypeScript 輔助模式和 vue-component-type-helpers 的使用方法。
Essayez ces prompts
Vue 模板類型檢查
How do I enable strict template checking in vue-tsc to catch undefined components? My tsconfig is not catching component name typos.
修復儲存時間過長問題
My Vue project takes 30+ seconds to save files in VSCode. How do I fix slow save performance caused by code actions?
包裝元件 Prop 類型
How do I extract prop types from a Vue component to use in a wrapper component? I need to type my Higher-Order Component correctly.
Vue Router 參數類型定義
How do I properly type Vue Router route params with typed-router? My route params are not type-safe.
Bonnes pratiques
- Enable strictTemplates in vueCompilerOptions to catch template errors at compile time rather than runtime
- Use vue-component-type-helpers package for type-safe wrapper components and HOCs
- Configure tsconfig.app.json (not root tsconfig) for Vue source files in create-vue projects
Éviter
- Adding vueCompilerOptions to the root tsconfig.json instead of the app-specific tsconfig
- Not upgrading to VSCode 1.81.0+ when experiencing slow save times
- Using loose template checking in production codebases where type safety matters
Foire aux questions
What is the difference between vue-tsc and tsc?
vue-tsc is a wrapper around tsc that adds Vue template type checking. It validates Vue SFC templates using the same TypeScript compiler, catching template errors before runtime.
Which tsconfig should I add vueCompilerOptions to?
Add vueCompilerOptions to the tsconfig that includes your Vue source files. In create-vue projects, this is tsconfig.app.json, not the root tsconfig.json or tsconfig.node.json.
Why are my Vue file saves so slow?
Save delays are caused by VSCode code actions triggering TypeScript state synchronization. Disable code actions or limit their timeout in VSCode settings to fix this.
How do I extract prop types from a Vue component?
Use the ComponentProps type helper from vue-component-type-helpers. Import it as: import type { ComponentProps } from 'vue-component-type-helpers'. Then use ComponentProps<typeof YourComponent>.
What does strictTemplates check?
strictTemplates enables multiple checks: unknown components, unknown props, unknown events, and unknown directives. Each can be enabled individually if strictTemplates is too strict.
How do I fix Vue plugin duplicate registration in Vite?
If using Vite JavaScript API, ensure the Vue plugin is not loaded in both vite.config.js and inlineConfig. Use configFile: false when providing plugins inline.
Détails du développeur
Structure de fichiers