Missing eslint output with errors from vue template

Edit

For now it seems to be a lost cause. Everything I've seen and tested so far points towards that eslint + typescript is not eligible with vue template. As far as I can see the issue remains that there are some broken links between typescript and vue. Unfortunately I don't know where to ask my questions in this case.

I've created a new project with vue + typescript + prettier + eslint, every thing is set up and is working as intended except for one single issue (at least so far)

If I make a type error in a propertyreference in my template, it provides me with a visual que that something went wrong and gives the following error on hover: Property 'myTes' does not exist on type

When running the lint command eslint --ext .ts,vue --ignore-path .gitignore . nothing gets printed in the terminal

The same misspelling inside the script element gives an output

Does any one have a clue to why this happens?

Bonus info:

This issue also happens with misspelled class instance property references in the vue template

I've tried the setup with

• Vue CLI 4 + Vetur
• Vue CLI 4 + Volar
• Vite 2 + Vetur
• Vite 2 + Volor

Vue Component

<!-- prettier-ignore -->
<template>
  <div>
    {{ myTes }} <-- no lint output in terminal
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  data() {
    const myTest = 'testing'

    console.log(myTes) <-- lint output in terminal: '"myTes" is not defined'

    return {
      myTest,
    }
  },
})
</script>

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  plugins: ['vue'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: {
      // Script parser for `<script>`
      js: 'espree',

      // Script parser for `<script lang="ts">`
      ts: '@typescript-eslint/parser',

      // Script parser for vue directives (e.g. `v-if=` or `:attribute=`)
      // and vue interpolations (e.g. `{{variable}}`).
      // If not specified, the parser determined by `<script lang ="...">` is used.
      '<template>': 'espree',
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: [ ... my customized rules]
}

tsconfig.json

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