vue-doctor について
Vue Doctorは、VueとNuxtのコードベースをスキャンし、セキュリティ、パフォーマンス、正確性、アーキテクチャの問題を検出します。開発者向けに、ファイル位置を含む診断と0～100のスコアを提示します。
主な機能
- 0130以上のルールでコードを検査
- 02セキュリティリスクと正確性の問題を検出
- 03性能とバンドルサイズの懸念を指摘
- 04アーキテクチャとアクセシビリティの問題を検出
- 05ファイルパス、行番号、スコアを報告
活用シーン
- 01VueまたはNuxtプロジェクトの問題点を確認
- 02診断の重大度に基づいて修正を優先
- 03再スキャンしてスコアの改善を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vue-doctorを入力して読み込まれたか確認します。
詳細
Vue Doctor
Vue／Nuxt のコードベースをスキャンし、セキュリティ、パフォーマンス、正確性、アーキテクチャの問題を検出します。実行可能な診断結果とともに、0〜100 のスコアを出力します。
使用方法
npx -y vue-doctor@latest . --verbose
ワークフロー
- 上記のコマンドをプロジェクトのルートで実行します
- ファイルパスと行番号が記載された診断結果をすべて確認します
- エラー（最も深刻なもの）から順に問題を修正します
- 再実行して、スコアが改善したことを確認します
ルール（30 以上）
- セキュリティ：v-html による XSS のリスク、eval()、クライアントコード内のハードコードされたシークレット
- Composition API：computed としての watch、非同期の watchEffect、reactive の分割代入、computed 内の ref
- パフォーマンス：key としての index、deep watch、負荷の高いテンプレート式、v-for 内のメソッド呼び出し
- アーキテクチャ：props の変更、emits 宣言の欠落、大きすぎるコンポーネント
- 正確性：v-for を含む v-if、setup 内の this、DOM の直接操作、props の型の欠落
- Nuxt：SSR での window、SEO メタデータの欠落、クライアント内の process.env、サーバールートのエラーハンドリング
- バンドルサイズ：バレルインポート、lodash 全体、moment.js、サイズの大きいライブラリ
- アクセシビリティ：モーションライブラリ向けの prefers-reduced-motion の欠落
- デッドコード：未使用のファイル、エクスポート、型
スコア
- 75 以上：優秀
- 50〜74：要改善
- 0〜49：重大
コメント
Markdown 対応