Typescript errors appears on IDE but are not catched in CLI

[theRenard]

Checklist

• [ x] I have tried restarting my IDE and the issue persists.
• [ x] I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 8.57.0
• eslint-plugin-vue version: 9.27.0
• Vue version: 2.7.16
• Node version: v18.20.3
• Operating System: Sonoma 14.5 (23F79)

Please show your full configuration:

module.exports = {
  // for vue-macros https://github.com/vue-macros/vue-macros/issues/74#issuecomment-1481001869
  globals: {
    // Reactivity Transform
    $: 'readonly',
    $$: 'readonly',
    $ref: 'readonly',
    $shallowRef: 'readonly',
    $computed: 'readonly',
    $customRef: 'readonly',
    $toRef: 'readonly',
    $defineModels: 'readonly',
  },
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    '@vue/typescript/recommended',
    'plugin:vue/recommended',
    'plugin:vue-pug/vue3-recommended',
    'plugin:@intlify/vue-i18n/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    'no-console': (() => {
      if (typeof process.env.NODE_ENV === 'undefined') {
        return 'off';
      }

      if (process.env.NODE_ENV === 'development') {
        return 'off';
      }
      return 'error';
    })(),
    'class-methods-use-this': 'off',
    'import/no-cycle': 'off',
    'max-len': 'off',
    'no-alert': 'off',
    'no-underscore-dangle': 'off',
    // i18n
    '@intlify/vue-i18n/no-raw-text': [
      'warn',
      {
        attributes: {
          '/.+/': [
            'title',
            'aria-label',
            'aria-placeholder',
            'aria-roledescription',
            'aria-valuetext',
          ],
          input: ['placeholder'],
          img: ['alt'],
        },
        ignoreNodes: ['md-icon', 'v-icon'],
        // ignores icon names like icon-* and special characters like -#:()&.
        ignorePattern: '^icon-*[a-z]+|[-#:()&]+$',
      },
    ],
    '@intlify/vue-i18n/no-missing-keys': 'error',
    // amend airbnb rules
    'vue/valid-v-slot': 'off',
    'vue/no-v-html': 'error',
    'vue/multi-word-component-names': 'off',
    'no-unused-expressions': 'off', // we can remove this once we remove those ugly window.confirm dialogs
    'no-restricted-syntax': 'off',
    'no-return-assign': 'off',
    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
    '@typescript-eslint/no-this-alias': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    // turn off airbnb rules for TS ones
    indent: 'off',
    '@typescript-eslint/indent': 'off',
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],
    // Vue linting
    '@intlify/vue-i18n/no-v-html': 'error',
    'vuejs-accessibility/click-events-have-key-events': 'off',
    'vuejs-accessibility/mouse-events-have-key-events': 'off',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
    {
      files: ['*.vue'],
      globals: {
        // script setup
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly',

        // RFC: https://github.com/vuejs/rfcs/discussions/430
        defineOptions: 'readonly',
      },
      rules: {
        'no-undef': 'off',
      },
    },
    // exclude files in public/next/fonts/ folder
    {
      files: ['public/next/fonts/**/*'],
      rules: {
        camelcase: 'off',
      },
    },
  ],
  ignorePatterns: ['**/*.css', '**/*.scss'],
  settings: {
    'vue-i18n': {
      localeDir: './src/locales/*.{json,json5,yaml,yml}', // extension is glob formatting!
      messageSyntaxVersion: '^8.28.2',
    },
  },
};

What did you do?
I have a codebase with a mix of class components and composition api. For class components and typescript files I can see errors in both VSC and in CLI, but when using composition api I see errors only in VSC, I can write the most wrong code in my .vue. files without any complain from the builder. Only typescript errors are not catched, those who correspond to the plugin are catched.

In class components ✅

In CLI

In typescript ✅

In composition api ❌

(there are two errors here, first is vue/no-ref-as-operand semi and is in both VSC and CLI and the other on which is a typescript error

This condition will always return 'false' since JavaScript compares objects by reference, not value.ts(2839)
This comparison appears to be unintentional because the types 'string' and '{}' have no overlap.ts(2367)

that safely passes the CLI check.

What did you expect to happen?

Catch any typescript error ever in <script setup>

What actually happened?

Repository to reproduce this issue Can't share the whole codebase

[FloEdelmann]

TypeScript errors are reported by vue-tsc (which is used by the "Vue - Official" VS Code plugin aka. Volar). They have nothing to do with ESLint or eslint-plugin-vue, so they are not reported in the ESLint CLI.

[theRenard]

Ok thank you for you quick answer!