typescript - vue şablonundan eslint hatalarıyla ilgili eksik çıktı

Düzenle

Şimdilik bu kaybolmuş bir dava gibi görünüyor. Şimdiye kadar gördüğüm ve test ettiğim her şey, eslint + typescript'in vue şablonuyla uyumlu olmadığını gösteriyor. Gördüğüm kadarıyla sorun, typescript ile vue arasında bazı kırık bağlantıların olmasıdır. Ne yazık ki bu durumda sorularımı nerede soracağımı bilmiyorum.

Vue + TypeScript + Prettier + ESLint ile yeni bir proje oluşturdum, her şey kuruldu ve amaçlandığı gibi çalışıyor, sadece tek bir sorun var (şimdilik en azından)

Şablonumdaki bir property reference'da tür hatası yaparsam, bir şeylerin yanlış gittiğine dair bana görsel bir ipucu sağlar ve üzerine gelindiğinde şu hatayı verir: Property 'myTes' does not exist on type

Lint komutunu eslint --ext .ts,vue --ignore-path .gitignore . çalıştırırken terminalde hiçbir şey yazdırılmıyor

script öğesi içindeki aynı yazım hatası bir çıktı verir

Bunun neden olduğunu bilen var mı?

Bonus bilgi:

Bu sorun, Vue şablonunda yanlış yazılmış sınıf örneği özellik başvurularında da meydana gelir

Kurulumla denedim

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

Vue Bileşeni

<!-- 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" }]
}