vue3 template 使用 pug 语法

vue2.6时代，已经熟悉了pug的语法写模板，所以想在vue3上也这么使用，搜了很多内外网，包括chatGPT都很难得到完美的答案。

我的预期是：

1. template上使用pug<template lang="pug"></template>
2. script上使用setup, ts，<script lang="ts" setup></script>
3. 点击template的变量可以跳转到script定义的地方

关键文件

• package.json，devDependencies新增pug,"@volar/vue-language-plugin-pug": "^1.4.4",,"eslint-plugin-vue-pug": "^0.6.0"

• tsconfig.json,

"vueCompilerOptions": {

"plugins": ["@volar/vue-language-plugin-pug"]

}

• eslintrc.cjs

extends: [

'plugin:vue-pug/vue3-recommended'

]

具体内容可以查看这边github

ps: how to use pug in vue3