typescript always report an error

[earthaYan]

I create a vue3 project as docs said,with TypeScript and vue-router，but everytime I create a new *.vue file under views foler and add it to routes which defined in src/router/index.ts,the vscode alaways report an error in src/router/index.ts and disappeared after restarting vscode

File 'd:/private/frontend/resume-generator/src/views/TestView.vue' is not listed within the file list of project 'd:/private/frontend/resume-generator/tsconfig.vitest.json'. Projects must list all files or use an 'include' pattern.ts(6307)

here are my files

//tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

//tsconfig.node.json
{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

//tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "isolatedModules": true
  }
}

//tsconfig.vitest.json
{
  "extends": "./tsconfig.app.json",
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "lib": [],
    "types": ["node", "jsdom"]
  }
}

//router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import RegisterLoginView from '../views/RegisterLoginView.vue'

export const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/sign',
    name: 'sign',
    component: RegisterLoginView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }
]
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

[earthaYan]

I found one solution to this :open the takeover mode

[sodatea]

It could be a bug in either VS Code or https://github.com/vuejs/language-tools.
Or, according to the error log, could be a path casing issue (d:\ vs D:\).

Considering takeover mode works as expected, I think the setup in this scaffold is fine. So I'm closing this issue.

[sodatea]

Maybe related: vuejs/language-tools#2271 Please make sure your Volar extension version is up-to-date.