@shikijs/vitepress-twoslash: Use twoslash in the case of using imported code snippets.

[Zhang-Wei-666]

Clear and concise description of the problem

希望可以在使用导入代码片段的情况下, 使用 twoslash

---

I hope to use twoslash when using imported code snippets.

Suggested solution

<<< ./src/types.ts twoslash
<<< ./src/types.ts#snippet twoslash

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• If this feature request is accepted, I am willing to submit a PR to fix this issue

[Thy3634]

issuse of vitepress

我有同样的需求，但是我认为应当是如下格式，因为 #snippet 已被用作表示区域。

<<< @/components/App.vue{vue twoslash}

debug 发现是 vitepress 的 snippetPlugin 未提供 meta。我已向 vitepress 提pr解决此问题。

[Zhang-Wei-666]

@Thy3634 是的, 我就是需要使用 #snippet 来引用部分区域而不是整个文件, 而只需要对引用的区域能使 twoslash 生效就行了

[Zhang-Wei-666]

@Thy3634 就像我现在的文档的 这个位置 的部分, 这是生成后的样子, 这几个地方引用的都是同一个文件的不同区域

[Thy3634]

所以不能用#snippet语法代表twoslash

两者需要同时或分别使用，这样使用

<<< @/components/App.vue#snipaste{vue twoslash}

<!-- #region snipaste -->
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello world!')
</script>
<!-- #endregion snipaste -->

<template>
    <input v-model="message" />
    <p>{{ message }}</p>
</template>

效果如下：

[Zhang-Wei-666]

是的, 我的意思也是这样的, 只是当时想的定义方式不一样 😁 你这样是没问题的