智能感知在.vue文件中无法工作

Question

我在Visual Studio Code中使用Vue和Typescript，以及Vetur扩展程序。问题是：当我更新任何代码时，在.vue文件中工作时，智能感知无法识别更改。但在.ts文件中，智能感知是有效的！ 我使用这个定义文件使typescript认识.vue文件扩展名：

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

例子

test.ts刚刚被修改了

export default class Test {
    // testFunction() {}    // just removed this
    dummyFunction() {}      // added this
}

app.vue智能提示无法工作

在任何.vue文件中，智能提示始终建议testFunction，并且无法识别dummyFunction：

import Test from "./test"
export default class App extends Vue {
    created() {
        const t = new Test()
        t.testFunction()        // allowed - but it doesn't exist
        t.dummyFunction()       // not allowed - but it does exist
    }
}

somefile.ts 的代码提示功能正在工作

在普通的 .ts 文件中，代码提示功能是有效的。

import Test from "./test"
const t = new Test()
t.testFunction()        // here it works - this is not allowed
t.dummyFunction()       // here it works - this is allowed

如果我关闭 VS Code 并重新打开，那么新的更改就会被更新。这是 Vetur 的故障吗？我需要修改我的 tsconfig 或定义文件吗？

- Kokodoko

---

我在Vue和ts的组合方面经验不是很丰富，但也许你可以在微软的TypeScript Vue Starter guide中找到一些帮助。 - David Artmann

我正在经历完全相同的事情。我要么忽略错误消息，要么重新启动 VSCode 如果它们开始困扰我。Webpack 仍然可以编译所有内容，所以我知道问题出在 VSCode/Vetur 上，而不是代码上。 - neilsimp1

仍未解决。Vetur 无法实时检测 .ts 文件和 types.d.ts 文件中的更改！我在 Vetur 的 Github 上发布了一个问题，但由于某种原因，他们将其标记为已解决... - Kokodoko

你的tsconfig是什么样子的？我们使用SFC vue文件和ts文件，没有出现任何问题。可能是设置问题。 - Tim

Answer 1

我相信你需要在tsconfig中添加类似以下的内容：

{
  "include": ["src/**/*.vue"]
}

根据文档："如果glob模式不包括文件扩展名，则仅包括支持的扩展名的文件（例如，默认情况下为.ts、.tsx和.d.ts，如果allowJs设置为true，则为.js和.jsx）。

我不确定Vetur的行为如何，但从TS的角度来看，这应该能解决问题。

- Brandon Lee Detty