支持对自定义块的 typescript 识别和校验？

[linpengteng]

我在 Vue 单文件定义了自定义块 <setup-starter lang="ts"> ，在VSCODE中，我如何让它进行等同于 <script lang="ts"> 的 TypeScript 的识别和校验？

[linpengteng]

[so1ve]

Use a language plugin.

For reference, see #3761

[linpengteng]

I tried, but it didn't work.

./src/views/PartIndex.vue

<template>
  <div />
</template>

<script setup lang="ts">
</script>

<starter lang="ts">
const message = ref('message')

export default {
  message
}
</starter>

./pluginer.ts

import type { VueLanguagePlugin } from "@vue/language-core"

const plugin: VueLanguagePlugin = () => {
  return {
    name: "sfc-starter-volar",
    version: 1,
    resolveEmbeddedFile(fileName, sfc, embeddedFile) {
      if (embeddedFile.fileName.replace(fileName, "").match(/^\.(js|ts|jsx|tsx)$/)) {
        for (const block of sfc.customBlocks) {
          const content = embeddedFile.content
          if (block.type === "starter") {
            content.push([
              block.content, // text to add
              block.name, // source
              0, // content offset in source
              {
                // language capabilities to enable in this segment
                hover: true,
                references: true,
                definition: true,
                diagnostic: true,
                rename: true,
                completion: true,
                semanticTokens: true
              }
            ])
          }
        }
      }
    }
  }
}

export default plugin

./tsconfig.json

{
  "vueCompilerOptions": {
    "plugins": [
      "./pluginer.ts"
    ]
  },
  "compilerOptions": {
    "baseUrl": "./",
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "strict": true,
    "allowJs": false,
    "sourceMap": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "useDefineForClassFields": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ]
  },
  "include": [
    "**/*.ts",
    "**/*.js",
    "**/*.tsx",
    "**/*.jsx",
    "**/*.mjs",
    "**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

result: (image)

[linpengteng]

Which step am I missing? Help!

[so1ve]

Could you please provide a repo? Thanks!

[linpengteng]

Sorry, there are currently no available projects available.

[sonofmagic]

I am also looking for a similar solution at the moment, and I will continue to follow this closely. @linpengteng