Pug template type checking seems to be broken despite consistent tooling setup

[Threebow]

Vue - Official extension or vue-tsc version

2.1.4 (VSCode extension, vue-tsc, AND @vue/language-plugin-pug)

VSCode version

1.92.2

Vue version

3.4.29

TypeScript version

5.4.0

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 44.22 GB / 63.92 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

package.json dependencies

{
  "dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/language-plugin-pug": "^2.1.4",
    "@vue/language-server": "^2.1.4",
    "@vue/tsconfig": "^0.5.1",
    "npm-run-all2": "^6.2.0",
    "pug": "^3.0.3",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vue-tsc": "^2.1.4"
  }
}

Steps to reproduce

I have a reproduction repo here with additional steps: https://github.com/Threebow/vue-tsc-pug-repro

This reproduction repo is very simple and is thoroughly commented, start at src/App.vue and go from there

In general, as an alternative to cloning the repo, this issue may be reproduced by:

1. Getting your hands on a freshly-created Vue app (pnpm create vue@latest)
2. Adding some type logic
3. Creating a pug component that uses this type logic in its template
4. Attempting typecheck with pnpm type-check, notice the lack of compile time errors
5. Attempting to serve the app with pnpm dev, notice the runtime errors in the browser console
6. Attempting to build the app with pnpm build, notice the lack of compile time errors

What is expected?

1. Typecheck should return errors from the src/components/PugListUser.vue file. Problematic code was deliberately left uncommented, with equivalent HTML code in the src/components/HtmlListUser.vue file remaining commented. Uncommenting identical code in the HTML template fails as expected.
2. Serving the app with pnpm dev should not report build errors in the console
3. Building the app with pnpm build should not return type errors

What is actually happening?

1. Typecheck does not return any errors whatsoever, as if the pug file does not exist
2. Pug file actually does get one IDE error -- unexpected indent. This was fixed a while ago but appears to be regressing here.
3. Build completes without failure, despite many failures existing within the build

Link to minimal reproduction

https://github.com/Threebow/vue-tsc-pug-repro

Any additional comments?

Been working with Pug+Vue for a while with varying degrees of consistency.

Note that tsconfig.json has the correct

 "vueCompilerOptions": {
    "plugins": [
      "@vue/language-plugin-pug"
    ]
  }

And all tools versions are matching. Using VSCode with the matching official plugin version as well. All are on the v2.1.4 release that came out a few hours ago, and this can be confirmed by looking at the package.json within the reproduction repository.

Please let me know if there is any further information I can provide.

[johnsoncodehk]

The fix of vuejs/core@6345197 does not affect language tools, and this problem has never been fixed in language tools, so the editor reports unexpected token "indent" and vue-tsc does not recognize the initial Indented pug templates are expected.

[Threebow]

Thank you for your quick reply. When I tested it without the indent, there was no error reported from the template, but the type inference was still not present. Does this also affect the type checking?

[johnsoncodehk]

You need to set @vue/language-plugin-pug to tsconfig.app.json instead of tsconfig.json.

[Threebow]

That seems to have fixed the problem. Thank you so much!

[hiperiumlw]

I know this is already closed, but, I'n my vsCode I'm not able to make it work. My template "pug" files are not recognizing HTML tag or elements neither TailwindCSS classes...When I change that back to "html" then yes.
I have the installation made like it should be. Installing the plugin under "devDependencies" and also putting that plugin inside the vueCompilerOptions.