2917脚本设置Jsdoc25a04253

tools-only2026-10-25查看 114复制 1302

**影响：中等** - 为组合式 API 组件启用适当的文档记录，`<script setup>` 没有明显的位置来为组件本身附加 JSDoc 注释。使用双脚本模式。

📘如何使用这个技能

1
复制技能内容·点击上方「Copy SKILL.md」复制全部内容，或 Download 下载到本地
2
打开你的 AI 客户端·支持 Claude Code、Trae、Cursor、ChatGPT、DeepSeek、Kimi 等任意 AI 助手
3
粘贴为系统提示/知识文件·Claude Code：放入 .claude/skills/ 目录；普通对话：作为首条消息发送并说「请严格按这份技能文档执行」
4
直接提出你的需求·AI 会按技能定义的工作流、格式和约束来处理，无需再解释背景

💡 提示：技能生效后，每次对话只需一句需求，AI 会按 SKILL.md 的流程执行。

SKILL.md1979 chars

---
title: JSDoc Documentation for Script Setup Components
impact: MEDIUM
impactDescription: enables proper documentation for composition API components
type: capability
tags: jsdoc, script-setup, documentation, composition-api, component
---

# JSDoc Documentation for Script Setup Components

**Impact: MEDIUM** - enables proper documentation for composition API components

`<script setup>` doesn't have an obvious place to attach JSDoc comments for the component itself. Use a dual-script pattern.

## Problem

**Incorrect:**
```vue
<script setup lang="ts">
/**
 * This comment doesn't appear in IDE hover or docs
 * @component
 */
import { ref } from 'vue'

const count = ref(0)
</script>
```

JSDoc comments inside `<script setup>` don't attach to the component export because there's no explicit export statement.

## Solution

Use both `<script>` and `<script setup>` blocks:

**Correct:**
```vue
<script lang="ts">
/**
 * A counter component that displays and increments a value.
 *
 * @example
 * ```vue
 * <Counter :initial="5" @update="handleUpdate" />
 * ```
 *
 * @component
 */
export default {}
</script>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  /** Starting value for the counter */
  initial?: number
}>()

const emit = defineEmits<{
  /** Emitted when counter value changes */
  update: [value: number]
}>()

const count = ref(props.initial ?? 0)
</script>
```

## How It Works

- The regular `<script>` block's default export is merged with `<script setup>`
- JSDoc on `export default {}` attaches to the component
- Props and emits JSDoc in `<script setup>` still work normally

## What Gets Documented

| Location | Shows In |
|----------|----------|
| `export default {}` JSDoc | Component import hover |
| `defineProps` JSDoc | Prop hover in templates |
| `defineEmits` JSDoc | Event handler hover |

## Reference

- [Vue Language Tools Discussion #5932](https://github.com/vuejs/language-tools/discussions/5932)

来源：skillsdirectory

2917脚本设置Jsdoc25a04253

📘如何使用这个技能

评论0