Some rules enforced in .ts but not .vue?

[keizure]

Checklist

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

Tell us about your environment

• ESLint version: 8.49.0
• eslint-plugin-vue version: 9.17.0
• Node version: 18.16.0
• Operating System: os x

Please show your full configuration:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue-pug/vue3-recommended',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  rules: {
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'],
      },
    ],
  },
}

What did you do?

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

<script setup lang="ts">
let foo = ""
var boo = ""
// prefer-const, no-var not work
</script>

<template>
  <div></div>
</template>

let foo = "";
var boo = "";
// prefer-const, no-var works here

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

What did you expect to happen?
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

What actually happened?

npx eslint . --quiet --ext .vue,.js,.jsx,.cjs,.mjs,.ts --fix --ignore-path .gitignore

Eslint with CLI did not detected in the .vue file
Repository to reproduce this issue

bug repository

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

[FloEdelmann]

See https://github.com/typescript-eslint/typescript-eslint/blob/v6.7.0/packages/eslint-plugin/src/configs/eslint-recommended.ts#L9:
The rules are indeed only enabled in .ts, .tsx, .mts, .cts files.

But this is not a problem in eslint-plugin-vue (we can't enable TypeScript-related rules for anybody), so I think you have to enable the rules manually.

[keizure]

Thanks a lot @FloEdelmann

[FloEdelmann]

If you use a JS/TS ESLint config, you can add this section to your overrides section:

{
    // enable @typescript-eslint/recommended preset in Vue files
    files: '**/*.vue',
    rules: require('@typescript-eslint/eslint-plugin').configs['eslint-recommended'].overrides[0].rules,
}