Some rules enforced in .ts but not .vue?

[sbmw]

My eslintrc.json:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 2021,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": ["vue", "@typescript-eslint", "prettier"],
    "root": true,
    "rules": {
        "prettier/prettier": "error"
    }
}

I add the following to both a .ts and .vue file (with script lang set to ts):

let foo = "";
var boo = "";

In both files @typescript-eslint/no-unused-vars raises a warning as expected.

However, prefer-const and no-var are only detected (as errors) in the .ts file. These two rules are activated in the extended config https://github.com/typescript-eslint/typescript-eslint/blob/498f397ff3898dde631f37311615b555f38a414e/packages/eslint-plugin/src/configs/eslint-recommended.ts#L27

Why do these rules not kick in within .vue? Sorry if I'm missing something!

[sbmw]

Also, if I manually include the rules from typescript-eslint within eslintrc, the rules are enforced in .vue files as expected.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 2021,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": ["vue", "@typescript-eslint", "prettier"],
    "root": true,
    "rules": {
        "prettier/prettier": "error",
        "constructor-super": "off", // ts(2335) & ts(2377)
        "getter-return": "off", // ts(2378)
        "no-const-assign": "off", // ts(2588)
        "no-dupe-args": "off", // ts(2300)
        "no-dupe-class-members": "off", // ts(2393) & ts(2300)
        "no-dupe-keys": "off", // ts(1117)
        "no-func-assign": "off", // ts(2539)
        "no-import-assign": "off", // ts(2539) & ts(2540)
        "no-new-symbol": "off", // ts(2588)
        "no-obj-calls": "off", // ts(2349)
        "no-redeclare": "off", // ts(2451)
        "no-setter-return": "off", // ts(2408)
        "no-this-before-super": "off", // ts(2376)
        "no-undef": "off", // ts(2304)
        "no-unreachable": "off", // ts(7027)
        "no-unsafe-negation": "off", // ts(2365) & ts(2360) & ts(2358)
        "no-var": "error", // ts transpiles let/const to var, so no need for vars any more
        "prefer-const": "error", // ts provides better types with const
        "prefer-rest-params": "error", // ts provides better types with rest args over arguments
        "prefer-spread": "error", // ts transpiles spread to apply, so no need for manual apply
        "valid-typeof": "off" // ts(2367)
    }
}

[colgin]

I got the same issue, eslint can't detect the ts part in .vue. I don't think turn off the no-undef rule is a good way, especially in js,ts mixed project.