Consider using `tseslint.config` and `@ts-check`

[segevfiner]

See https://typescript-eslint.io/getting-started#step-2-configuration, this will enable type checking of the ESLint config file.

[haoqunjiang]

🤔 I wanted to keep the top-level dependencies as few as possible, so the config helper isn't available by default.
Yet I can't come up with a satisfying name/pattern to re-export the helper… So I'm still torn about this issue.

[segevfiner]

Just config to stay loyal to the source? defineConfig like Vite/Vitest and others?

[haoqunjiang]

Adding a named export to the @vue/eslint-config-typescript package?

The current pattern:

import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";

export default [
  ...pluginVue.configs["flat/essential"],
  ...vueTsEslintConfig({ extends: ['stylistic', 'recommended'] }),
]

Using named export:

import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig, { defineConfig } from "@vue/eslint-config-typescript";

export default defineConfig([
  ...pluginVue.configs["flat/essential"],
  ...vueTsEslintConfig({ extends: ['stylistic', 'recommended'] }),
])

config doesn't look good to me. Because we already have a default export, so import * as isn't viable, and a plain config() factory function at the top level doesn't look as good as defineConfig or tseeslint.config.

[segevfiner]

Or a property on the default export, or both a property and a named export. Or also exporting vueTsEslintConfig as a named export, keeping the default export for backwards compat. It's a matter of personal taste of course.

[haoqunjiang]

Or a property on the default export, or both a property and a named export.

I can't come up with a good alias for importing the package, then.
import * as vueTsEslint from '@vue/eslint-config-typescript' and then calling vueTsEslint.config() doesn't feel right to me because it's a "config" not a general-purpose package like typescript-eslint.

Another problem is that, unlike the plain objects from tseslint, some actual code logic needs to be executed before the configs are generated in vueTsEslintConfig.
The config itself has to be a function, so we can't use more intuitive names like tseslint.config() as the helper and ...tseslint.configs.recommended as the config.

---

Anyway, a named defineConfig export doesn't seem to hurt.
Let's add it first and brainstorm more use cases later.

[haoqunjiang]

Added defineConfigWithVueTs helper in @vue/eslint-config-typescript 14.3.
As ESLint 9.18 unflagged eslint.config.ts support, we are also generating eslint.config.ts in the latest release of @vue/create-eslint-config. Therefore @ts-check isn't needed.