`vue-tsc` throws unused variable error while `tsc` does not

[vincerubinetti]

Vue - Official extension or vue-tsc version

2.0.26

VSCode version

n/a (1.91.0)

Vue version

3.4.31

TypeScript version

5.5.3

System Info

No response

Steps to reproduce

I have the following ESLint config, in the ESLint v9.0.0 eslint.config.mjs file format. It specifies that unused variables should be a warning, not an error.

import path from "node:path";
import { fileURLToPath } from "node:url";
import prettier from "eslint-plugin-prettier";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";

const compat = new FlatCompat({
  baseDirectory: path.dirname(fileURLToPath(import.meta.url)),
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

export default [
  ...compat.extends(
    "plugin:vue/vue3-recommended",
    "plugin:vuejs-accessibility/recommended",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier/skip-formatting",
  ),
  {
    plugins: {
      prettier,
    },
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
    },
    rules: {
      "prettier/prettier": "warn",
      "prefer-const": ["error", { destructuring: "all" }],
      "@typescript-eslint/no-unused-vars": "warn",
      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
      "@typescript-eslint/consistent-type-imports": "error",
      "vuejs-accessibility/label-has-for": [
        "error",
        { required: { some: ["nesting", "id"] } },
      ],
    },
    files: ["**/*.ts", "**/*.vue"],
  },
  {
    ignores: ["dist"],
  },
];

But running vue-tsc, it seems to ignore the configuration and throw an error for unused vars.

$ vue-tsc && vite build
src/components/AppTable.vue:108:10 - error TS6133: 'cloneDeep' is declared but its value is never read.

108 import { cloneDeep, truncate } from "lodash";
             ~~~~~~~~~
Found 1 error in src/components/AppTable.vue:108

I have another package.json script for testing types that uses tsc --noemit, and it correctly flags it as a warning.

What is expected?

vue-tsc should respect ESLint v9 config in my repo, like tsc does.

What is actually happening?

vue-tsc seems to ignore the config file (at least for this one rule).

Link to minimal reproduction

No response

Any additional comments?

No response

[RayGuo-ergou]

What if you change that rule to error? Will tsc give an error instead a warning?

[vincerubinetti]

Yeah, just tried it. tsc gives an error.

Oddly though, if I remove the rule completely, tsc goes back to just giving a warning. Could've sworn error was the default. There's also the vanilla no-used-vars eslint rule that this rule seems to override, which could complicate things.

Though, knowing nothing, my guess is that vue-tsc just doesn't support ESLint v9 yet because it only came out a few months ago? If that's the case, I figured this could be the issue to track v9 support.

[RayGuo-ergou]

my guess is that vue-tsc just doesn't support ESLint v9 yet because it only came out a few months ago

Just curious, did it support v8?

Another view is that typescript eslint hasn't fully migrated to eslint v9 in the stable version, maybe you can try with v8 alpha see if it works?

[vincerubinetti]

Ah okay, I saw this:

typescript-eslint/typescript-eslint#8211

But since it was closed as completed, I had assumed it was in a stable release, but it's not.

I tried force-installing typescript-lint v8 (alpha), and vue-tsc still threw an error even with that rule on warn. I'm having a hard time following the thread of package dependencies here. Looks like in my lockfile I have v7, coming from @vue/eslint-config-typescript, which has the following issue for Eslint v9:

vuejs/eslint-config-typescript#76

So perhaps when that package upgrades its dependencies, this issue will go away. Not sure if there's anything to be done in the vue-tsc package.

[so1ve]

I don't think tsc will read your eslint config. You should configure it in tsconfig.json.

[vincerubinetti]

Sorry, I've confused myself on the different parts of this. This has nothing to do with ESLint I guess. I'll rename the issue accordingly.

I think it comes down to the issue of tsc --noemit not throwing any error, and vue-tsc --noemit giving an unused variable error. And I just noticed that my tsconfig has "noUnusedLocals": true in it... so if anything, tsc is actually not doing its job correctly here.

Thanks for your help.

[so1ve]

Tsc doesn't run on .vue files

[vincerubinetti]

I suppose my brain just isn't working today. Feel free to straight up delete this issue. Not sure it has any value and might end up making someone confused.

[so1ve]

Never mind! As long as your problem is solved, everything is fine.