From 3755a4cdb27eec421e644665e42b77c1ad28bcda Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 27 Dec 2024 00:36:26 +0800
Subject: [PATCH] feat: implement the new configuration format and pass all
 existing tests

---
 README.md            |  21 ++--
 package.json         |   1 +
 pnpm-lock.yaml       |  73 ++++++++++++-
 src/configs.ts       |  44 ++++++++
 src/createConfig.ts  |  41 ++++++++
 src/groupVueFiles.ts |  36 +++++++
 src/index.ts         | 238 ++-----------------------------------------
 src/internals.ts     | 166 ++++++++++++++++++++++++++++++
 src/shim.d.ts        |   3 -
 src/utilities.ts     | 189 ++++++++++++++++++++++++++++++++++
 tsconfig.json        |   2 +-
 11 files changed, 568 insertions(+), 246 deletions(-)
 create mode 100644 src/configs.ts
 create mode 100644 src/createConfig.ts
 create mode 100644 src/groupVueFiles.ts
 create mode 100644 src/internals.ts
 delete mode 100644 src/shim.d.ts
 create mode 100644 src/utilities.ts

diff --git a/README.md b/README.md
index 631435e7..d7adb741 100644
--- a/README.md
+++ b/README.md
@@ -29,8 +29,8 @@ Because of the complexity of this config, it is exported as a factory function t
 
 This package exports:
 
-- a utility function: `defineConfig`, whose type signature is the same as the [`config` function from `typescript-eslint`](https://typescript-eslint.io/packages/typescript-eslint#config).
-- all the [shared configruations from `typescript-eslint`](https://typescript-eslint.io/users/configs), available as named exports (in camelCase, e.g. `recommendedTypeChecked`).  
+- `defineConfig`, a utility function whose type signature is the same as the [`config` function from `typescript-eslint`](https://typescript-eslint.io/packages/typescript-eslint#config).
+- `configs`, contains all the [shared configruations from `typescript-eslint`](https://typescript-eslint.io/users/configs) (in camelCase, e.g. `configs.recommendedTypeChecked`).
 - a Vue-specific config factory: `configureVueProject({ supportedScriptLangs, rootDir })`. More info below.
 
 ### Minimal Setup
@@ -40,12 +40,12 @@ This package exports:
 import pluginVue from 'eslint-plugin-vue'
 import {
   defineConfig,
-  recommended,
+  configs,
 } from '@vue/eslint-config-typescript'
 
 export default defineConfig(
   pluginVue.configs['flat/essential'],
-  recommended,
+  configs.recommended,
 )
 ```
 
@@ -60,13 +60,18 @@ All the `<script>` blocks in `.vue` files *MUST* be written in TypeScript (shoul
 import pluginVue from 'eslint-plugin-vue'
 import {
   defineConfig,
+  configs,
   configureVueProject,
-  recommended,
 } from '@vue/eslint-config-typescript'
 
 export default [
   ...pluginVue.configs["flat/essential"],
 
+  // We STRONGLY RECOMMEND you to start with `recommended` or `recommendedTypeChecked`.
+  // But if you are determined to configure all rules by yourself,
+  // you can start with `base`, and then turn on/off the rules you need.
+  configs.base,
+
   configureVueProject({
     // Optional: specify the script langs in `.vue` files
     // Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
@@ -99,8 +104,6 @@ export default [
     // and only apply the loosened rules to the files that do need them.
     rootDir: import.meta.dirname,
   }),
-
-  recommended,
 )
 ```
 
@@ -118,12 +121,12 @@ Instead, you can start by extending from the `recommendedTypeChecked` configurat
 import pluginVue from 'eslint-plugin-vue'
 import {
   defineConfig,
-  recommendedTypeChecked,
+  configs,
 } from '@vue/eslint-config-typescript'
 
 export default defineConfig(
   pluginVue.configs['flat/essential'],
-  recommendedTypeChecked
+  configs.recommendedTypeChecked
 )
 ```
 
diff --git a/package.json b/package.json
index 91422d28..488ee385 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     }
   },
   "dependencies": {
+    "@typescript-eslint/utils": "^8.18.2",
     "fast-glob": "^3.3.2",
     "typescript-eslint": "^8.18.1",
     "vue-eslint-parser": "^9.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3887c34..750be2da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@typescript-eslint/utils':
+        specifier: ^8.18.2
+        version: 8.18.2(eslint@9.17.0)(typescript@5.6.3)
       fast-glob:
         specifier: ^3.3.2
         version: 3.3.2
@@ -161,7 +164,7 @@ importers:
         version: 4.1.1(vite@6.0.5(@types/node@20.17.10)(tsx@4.19.2)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.3))
       '@vitest/eslint-plugin':
         specifier: ^1.1.20
-        version: 1.1.20(@typescript-eslint/utils@8.18.1(eslint@9.17.0)(typescript@5.6.3))(eslint@9.17.0)(typescript@5.6.3)(vitest@2.1.8(@types/node@20.17.10)(jsdom@25.0.1))
+        version: 1.1.20(@typescript-eslint/utils@8.18.2(eslint@9.17.0)(typescript@5.6.3))(eslint@9.17.0)(typescript@5.6.3)(vitest@2.1.8(@types/node@20.17.10)(jsdom@25.0.1))
       '@vue/eslint-config-prettier':
         specifier: ^10.1.0
         version: 10.1.0(eslint@9.17.0)(prettier@3.4.2)
@@ -608,7 +611,7 @@ importers:
         version: 5.2.1(vite@6.0.5(@types/node@20.17.10)(tsx@4.19.2)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.3))
       '@vitest/eslint-plugin':
         specifier: ^1.1.20
-        version: 1.1.20(@typescript-eslint/utils@8.18.1(eslint@9.17.0)(typescript@5.6.3))(eslint@9.17.0)(typescript@5.6.3)(vitest@2.1.8(@types/node@20.17.10)(jsdom@25.0.1))
+        version: 1.1.20(@typescript-eslint/utils@8.18.2(eslint@9.17.0)(typescript@5.6.3))(eslint@9.17.0)(typescript@5.6.3)(vitest@2.1.8(@types/node@20.17.10)(jsdom@25.0.1))
       '@vue/eslint-config-typescript':
         specifier: workspace:*
         version: link:../..
@@ -1978,6 +1981,10 @@ packages:
     resolution: {integrity: sha512-HxfHo2b090M5s2+/9Z3gkBhI6xBH8OJCFjH9MhQ+nnoZqxU3wNxkLT+VWXWSFWc3UF3Z+CfPAyqdCTdoXtDPCQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/scope-manager@8.18.2':
+    resolution: {integrity: sha512-YJFSfbd0CJjy14r/EvWapYgV4R5CHzptssoag2M7y3Ra7XNta6GPAJPPP5KGB9j14viYXyrzRO5GkX7CRfo8/g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/type-utils@8.18.1':
     resolution: {integrity: sha512-jAhTdK/Qx2NJPNOTxXpMwlOiSymtR2j283TtPqXkKBdH8OAMmhiUfP0kJjc/qSE51Xrq02Gj9NY7MwK+UxVwHQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1989,12 +1996,22 @@ packages:
     resolution: {integrity: sha512-7uoAUsCj66qdNQNpH2G8MyTFlgerum8ubf21s3TSM3XmKXuIn+H2Sifh/ES2nPOPiYSRJWAk0fDkW0APBWcpfw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.18.2':
+    resolution: {integrity: sha512-Z/zblEPp8cIvmEn6+tPDIHUbRu/0z5lqZ+NvolL5SvXWT5rQy7+Nch83M0++XzO0XrWRFWECgOAyE8bsJTl1GQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.18.1':
     resolution: {integrity: sha512-z8U21WI5txzl2XYOW7i9hJhxoKKNG1kcU4RzyNvKrdZDmbjkmLBo8bgeiOJmA06kizLI76/CCBAAGlTlEeUfyg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.8.0'
 
+  '@typescript-eslint/typescript-estree@8.18.2':
+    resolution: {integrity: sha512-WXAVt595HjpmlfH4crSdM/1bcsqh+1weFRWIa9XMTx/XHZ9TCKMcr725tLYqWOgzKdeDrqVHxFotrvWcEsk2Tg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.8.0'
+
   '@typescript-eslint/utils@8.18.1':
     resolution: {integrity: sha512-8vikiIj2ebrC4WRdcAdDcmnu9Q/MXXwg+STf40BVfT8exDqBCUPdypvzcUPxEqRGKg9ALagZ0UWcYCtn+4W2iQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2002,10 +2019,21 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.8.0'
 
+  '@typescript-eslint/utils@8.18.2':
+    resolution: {integrity: sha512-Cr4A0H7DtVIPkauj4sTSXVl+VBWewE9/o40KcF3TV9aqDEOWoXF3/+oRXNby3DYzZeCATvbdksYsGZzplwnK/Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
   '@typescript-eslint/visitor-keys@8.18.1':
     resolution: {integrity: sha512-Vj0WLm5/ZsD013YeUKn+K0y8p1M0jPpxOkKdbD1wB0ns53a5piVY02zjf072TblEweAbcYiFiPoSMF3kp+VhhQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/visitor-keys@8.18.2':
+    resolution: {integrity: sha512-zORcwn4C3trOWiCqFQP1x6G3xTRyZ1LYydnj51cRnJ6hxBlr/cKPckk+PKPUw/fXmvfKTcw7bwY3w9izgx5jZw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@vitejs/plugin-vue-jsx@4.1.1':
     resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6149,6 +6177,11 @@ snapshots:
       '@typescript-eslint/types': 8.18.1
       '@typescript-eslint/visitor-keys': 8.18.1
 
+  '@typescript-eslint/scope-manager@8.18.2':
+    dependencies:
+      '@typescript-eslint/types': 8.18.2
+      '@typescript-eslint/visitor-keys': 8.18.2
+
   '@typescript-eslint/type-utils@8.18.1(eslint@9.17.0)(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.18.1(typescript@5.6.3)
@@ -6162,6 +6195,8 @@ snapshots:
 
   '@typescript-eslint/types@8.18.1': {}
 
+  '@typescript-eslint/types@8.18.2': {}
+
   '@typescript-eslint/typescript-estree@8.18.1(typescript@5.6.3)':
     dependencies:
       '@typescript-eslint/types': 8.18.1
@@ -6176,6 +6211,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@8.18.2(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.18.2
+      '@typescript-eslint/visitor-keys': 8.18.2
+      debug: 4.4.0(supports-color@8.1.1)
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.4.1(typescript@5.6.3)
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@8.18.1(eslint@9.17.0)(typescript@5.6.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0)
@@ -6187,11 +6236,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.18.2(eslint@9.17.0)(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0)
+      '@typescript-eslint/scope-manager': 8.18.2
+      '@typescript-eslint/types': 8.18.2
+      '@typescript-eslint/typescript-estree': 8.18.2(typescript@5.6.3)
+      eslint: 9.17.0
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/visitor-keys@8.18.1':
     dependencies:
       '@typescript-eslint/types': 8.18.1
       eslint-visitor-keys: 4.2.0
 
+  '@typescript-eslint/visitor-keys@8.18.2':
+    dependencies:
+      '@typescript-eslint/types': 8.18.2
+      eslint-visitor-keys: 4.2.0
+
   '@vitejs/plugin-vue-jsx@4.1.1(vite@6.0.5(@types/node@20.17.10)(tsx@4.19.2)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@babel/core': 7.26.0
@@ -6217,9 +6282,9 @@ snapshots:
       vite: 6.0.5(@types/node@22.10.2)(tsx@4.19.2)(yaml@2.6.1)
       vue: 3.5.13(typescript@5.6.3)
 
-  '@vitest/eslint-plugin@1.1.20(@typescript-eslint/utils@8.18.1(eslint@9.17.0)(typescript@5.6.3))(eslint@9.17.0)(typescript@5.6.3)(vitest@2.1.8(@types/node@20.17.10)(jsdom@25.0.1))':
+  '@vitest/eslint-plugin@1.1.20(@typescript-eslint/utils@8.18.2(eslint@9.17.0)(typescript@5.6.3))(eslint@9.17.0)(typescript@5.6.3)(vitest@2.1.8(@types/node@20.17.10)(jsdom@25.0.1))':
     dependencies:
-      '@typescript-eslint/utils': 8.18.1(eslint@9.17.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.18.2(eslint@9.17.0)(typescript@5.6.3)
       eslint: 9.17.0
     optionalDependencies:
       typescript: 5.6.3
diff --git a/src/configs.ts b/src/configs.ts
new file mode 100644
index 00000000..a1a2a1a1
--- /dev/null
+++ b/src/configs.ts
@@ -0,0 +1,44 @@
+import tseslint from 'typescript-eslint'
+
+export type ExtendableConfigName = keyof typeof tseslint.configs
+type ConfigArray = (typeof tseslint.configs)[ExtendableConfigName]
+
+// TODO: use enum
+export type VueTsPreset =
+  `PLACEHOLDER_THAT_MUST_BE_WRAPPED_INSIDE_defineConfig_${ExtendableConfigName}`
+export type VueTsPresets = Record<ExtendableConfigName, VueTsPreset>
+
+export const configs: VueTsPresets = Object.keys(tseslint.configs).reduce(
+  (configs, name) => {
+    configs[name as ExtendableConfigName] =
+      `PLACEHOLDER_THAT_MUST_BE_WRAPPED_INSIDE_defineConfig_${name as ExtendableConfigName}`
+    return configs
+  },
+  {} as VueTsPresets,
+)
+
+function toArray<T>(value: T | T[]): T[] {
+  return Array.isArray(value) ? value : [value]
+}
+
+export function getConfigForPlaceholder(
+  placeholder: VueTsPreset,
+): ConfigArray {
+  return toArray(
+    tseslint.configs[
+      placeholder.replace(
+        /^PLACEHOLDER_THAT_MUST_BE_WRAPPED_INSIDE_defineConfig_/,
+        '',
+      ) as ExtendableConfigName
+    ],
+  )
+    .flat()
+    .map(config =>
+      config.files && config.files.includes('**/*.ts')
+        ? {
+            ...config,
+            files: [...config.files, '**/*.vue'],
+          }
+        : config,
+    )
+}
diff --git a/src/createConfig.ts b/src/createConfig.ts
new file mode 100644
index 00000000..ac2434cc
--- /dev/null
+++ b/src/createConfig.ts
@@ -0,0 +1,41 @@
+// This is a compatibility layer for the `createConfig` function in <= 14.2.0
+// Will be removed in 15.0.0
+
+import * as tseslint from 'typescript-eslint'
+import { configureVueProject, defineConfig, type ProjectOptions } from './utilities'
+import { configs, type ExtendableConfigName } from './configs'
+import type { FlatConfig } from '@typescript-eslint/utils/ts-eslint'
+
+type ConfigOptions = ProjectOptions & {
+  extends?: Array<ExtendableConfigName>
+}
+
+export default function createConfig({
+  extends: configNamesToExtend = ['recommended'],
+  supportedScriptLangs = { ts: true, tsx: false, js: false, jsx: false },
+  rootDir = process.cwd(),
+}: ConfigOptions = {}): FlatConfig.ConfigArray {
+  // More meaningful error message for the user, in case they didn't know the correct config name.
+  for (const name of configNamesToExtend) {
+    if (!tseslint.configs[name]) {
+      const nameInCamelCase = name.replace(/-([a-z])/g, (_, letter) =>
+        letter.toUpperCase(),
+      )
+
+      // @ts-expect-error
+      if (tseslint.configs[nameInCamelCase]) {
+        throw new Error(
+          `The config name "${name}" is not supported in "extends". ` +
+            `Please use "${nameInCamelCase}" instead.`,
+        )
+      }
+
+      throw new Error(`Unknown config name in "extends": ${name}.`)
+    }
+  }
+
+  configureVueProject({ supportedScriptLangs, rootDir })
+  return defineConfig(
+    ...configNamesToExtend.map(name => configs[name as ExtendableConfigName]),
+  )
+}
diff --git a/src/groupVueFiles.ts b/src/groupVueFiles.ts
new file mode 100644
index 00000000..b7310112
--- /dev/null
+++ b/src/groupVueFiles.ts
@@ -0,0 +1,36 @@
+import fs from 'node:fs'
+import fg from 'fast-glob'
+import path from 'node:path'
+
+type VueFilesByGroup = {
+  typeCheckable: string[]
+  nonTypeCheckable: string[]
+}
+
+export default function groupVueFiles(rootDir: string): VueFilesByGroup {
+  const { vueFilesWithScriptTs, otherVueFiles } = fg
+    .sync(['**/*.vue'], {
+      cwd: rootDir,
+      ignore: ['**/node_modules/**'],
+    })
+    .reduce(
+      (acc, file) => {
+        const absolutePath = path.resolve(rootDir, file)
+        const contents = fs.readFileSync(absolutePath, 'utf8')
+        // contents matches the <script lang="ts"> (there can be anything but `>` between `script` and `lang`)
+        if (/<script[^>]*\blang\s*=\s*"ts"[^>]*>/i.test(contents)) {
+          acc.vueFilesWithScriptTs.push(file)
+        } else {
+          acc.otherVueFiles.push(file)
+        }
+        return acc
+      },
+      { vueFilesWithScriptTs: [] as string[], otherVueFiles: [] as string[] },
+    )
+
+  return {
+    // Only `.vue` files with `<script lang="ts">` or `<script setup lang="ts">` can be type-checked.
+    typeCheckable: vueFilesWithScriptTs,
+    nonTypeCheckable: otherVueFiles,
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index aa38231b..3a0c4bbb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,229 +1,9 @@
-import fs from 'node:fs'
-import process from 'node:process'
-
-import * as tseslint from 'typescript-eslint'
-import vueParser from 'vue-eslint-parser'
-import pluginVue from 'eslint-plugin-vue'
-
-import fg from 'fast-glob'
-import path from 'node:path'
-
-type ExtendableConfigName = keyof typeof tseslint.configs
-type ScriptLang = 'ts' | 'tsx' | 'js' | 'jsx'
-type ConfigOptions = {
-  extends?: Array<ExtendableConfigName>
-  supportedScriptLangs?: Record<ScriptLang, boolean>
-  rootDir?: string
-}
-
-type ConfigArray = ReturnType<typeof tseslint.config>
-
-// https://typescript-eslint.io/troubleshooting/typed-linting/performance#changes-to-extrafileextensions-with-projectservice
-const extraFileExtensions = ['.vue']
-
-export default function createConfig({
-  extends: configNamesToExtend = ['recommended'],
-  supportedScriptLangs = { ts: true, tsx: false, js: false, jsx: false },
-  rootDir = process.cwd(),
-}: ConfigOptions = {}): ConfigArray {
-  // Only `.vue` files with `<script lang="ts">` or `<script setup lang="ts">` can be type-checked.
-  const { vueFilesWithScriptTs, otherVueFiles } = fg
-    .sync(['**/*.vue'], {
-      cwd: rootDir,
-      ignore: ['**/node_modules/**'],
-    })
-    .reduce(
-      (acc, file) => {
-        const absolutePath = path.resolve(rootDir, file)
-        const contents = fs.readFileSync(absolutePath, 'utf8')
-        // contents matches the <script lang="ts"> (there can be anything but `>` between `script` and `lang`)
-        if (/<script[^>]*\blang\s*=\s*"ts"[^>]*>/i.test(contents)) {
-          acc.vueFilesWithScriptTs.push(file)
-        } else {
-          acc.otherVueFiles.push(file)
-        }
-        return acc
-      },
-      { vueFilesWithScriptTs: [] as string[], otherVueFiles: [] as string[] },
-    )
-
-  const projectServiceConfigs: ConfigArray = [
-    {
-      name: '@vue/typescript/skip-type-checking-for-js-files',
-      files: ['**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs'],
-      ...tseslint.configs.disableTypeChecked,
-    },
-  ]
-
-  if (otherVueFiles.length > 0) {
-    projectServiceConfigs.push({
-      name: '@vue/typescript/skip-type-checking-for-vue-files-without-ts',
-      files: otherVueFiles.map(escapePathForGlob),
-      ...tseslint.configs.disableTypeChecked,
-      rules: {
-        ...tseslint.configs.disableTypeChecked.rules,
-        // Although some rules don't require type information in theory,
-        // in practice, when used in vue files, they still throw errors claiming that type information is needed.
-        // (If I understand correctly, they are the rules that have called `getParserServices` in its implementation.)
-        // https://github.com/typescript-eslint/typescript-eslint/issues/4755#issuecomment-1080961338
-        '@typescript-eslint/consistent-type-imports': 'off',
-        '@typescript-eslint/prefer-optional-chain': 'off',
-      },
-    })
-  }
-
-  // More meaningful error message for the user, in case they didn't know the correct config name.
-  for (const name of configNamesToExtend) {
-    if (!tseslint.configs[name]) {
-      const nameInCamelCase = name.replace(/-([a-z])/g, (_, letter) =>
-        letter.toUpperCase(),
-      )
-
-      // @ts-expect-error
-      if (tseslint.configs[nameInCamelCase]) {
-        throw new Error(
-          `The config name "${name}" is not supported in "extends". ` +
-            `Please use "${nameInCamelCase}" instead.`,
-        )
-      }
-
-      throw new Error(`Unknown config name in "extends": ${name}.`)
-    }
-  }
-
-  const mayHaveJsxInSfc = supportedScriptLangs.jsx || supportedScriptLangs.tsx
-  const needsTypeAwareLinting = configNamesToExtend.some(
-    name =>
-      name === 'all' ||
-      (name.includes('TypeChecked') && name !== 'disableTypeChecked'),
-  )
-
-  if (needsTypeAwareLinting) {
-    projectServiceConfigs.push({
-      name: '@vue/typescript/default-project-service-for-ts-files',
-      files: ['**/*.ts', '**/*.tsx', '**/*.mts'],
-      languageOptions: {
-        parser: tseslint.parser,
-        parserOptions: {
-          projectService: true,
-          extraFileExtensions,
-        },
-      },
-    })
-
-    if (vueFilesWithScriptTs.length > 0) {
-      projectServiceConfigs.push({
-        name: '@vue/typescript/default-project-service-for-vue-files',
-        files: vueFilesWithScriptTs.map(escapePathForGlob),
-        languageOptions: {
-          parser: vueParser,
-          parserOptions: {
-            projectService: true,
-            parser: tseslint.parser,
-            extraFileExtensions,
-          },
-        },
-      })
-    }
-
-    // Vue's own typing inevitably contains some `any`s, so some of the `no-unsafe-*` rules can't be used.
-    projectServiceConfigs.push({
-      name: '@vue/typescript/type-aware-rules-in-conflit-with-vue',
-      files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
-      rules: {
-        '@typescript-eslint/no-unsafe-argument': 'off',
-        '@typescript-eslint/no-unsafe-assignment': 'off',
-        '@typescript-eslint/no-unsafe-call': 'off',
-        '@typescript-eslint/no-unsafe-member-access': 'off',
-        '@typescript-eslint/no-unsafe-return': 'off',
-      },
-    })
-
-    if (mayHaveJsxInSfc) {
-      console.warn(
-        'Type-aware linting is not supported in Vue SFCs with JSX syntax.' +
-          'Rules that require type information are skipped in these files.',
-      )
-    }
-  }
-
-  return tseslint.config(
-    ...configNamesToExtend
-      .map(configName => tseslint.configs[configName])
-      .flat()
-      .map(config =>
-        config.files && config.files.includes('**/*.ts')
-          ? {
-              ...config,
-              files: [...config.files, '**/*.vue'],
-            }
-          : config,
-      ),
-
-    // Must set eslint-plugin-vue's base config again no matter whether the user
-    // has set it before. Otherwise it would be overridden by the tseslint's config.
-    ...pluginVue.configs['flat/base'],
-
-    {
-      name: '@vue/typescript/setup',
-      files: ['*.vue', '**/*.vue'],
-      languageOptions: {
-        parser: vueParser,
-        parserOptions: {
-          parser: {
-            // Fallback to espree for js/jsx scripts, as well as SFCs without scripts
-            // for better performance.
-            js: 'espree',
-            jsx: 'espree',
-
-            ts: tseslint.parser,
-            tsx: tseslint.parser,
-
-            // Leave the template parser unspecified,
-            // so that it could be determined by `<script lang="...">`
-          },
-          // The internal espree version used by vue-eslint-parser is 9.x, which supports ES2024 at most.
-          // While the parser may try to load the latest version of espree, it's not guaranteed to work.
-          // For example, if npm accidentally hoists the older version to the top of the node_modules,
-          // or if the user installs the older version of espree at the project root,
-          // the older versions would be used.
-          // But ESLint 9 allows setting the ecmaVersion to 2025, which may cause a crash.
-          // So we set the ecmaVersion to 2024 here to avoid the potential issue.
-          ecmaVersion: 2024,
-          ecmaFeatures: {
-            jsx: mayHaveJsxInSfc,
-          },
-          extraFileExtensions,
-        },
-      },
-      rules: {
-        'vue/block-lang': [
-          'error',
-          {
-            script: {
-              lang: Object.keys(supportedScriptLangs).filter(
-                lang => supportedScriptLangs[lang as ScriptLang],
-              ),
-              allowNoLang: supportedScriptLangs.js,
-            },
-          },
-        ],
-      },
-    },
-
-    ...projectServiceConfigs,
-  )
-}
-
-// Note that ESLint uses minimatch while we use fast-glob (which uses micromatch underlyingly). They differ on how to handle backslashes.
-// <https://github.com/micromatch/micromatch#backslashes>
-// Here we use `[]` to escape the special characters in the glob pattern.
-// This should work with any glob implementation.
-// Inspired by CPython's `glob.escape` function.
-// <https://github.com/python/cpython/blob/f0c47ea22e0980b4ff9683430b60c418a813021e/Lib/glob.py#L249-L259>
-function escapePathForGlob(path: string) {
-  return path.replace(/([*?{}[\]()])/g, '[$1]')
-}
-
-export { createConfig }
-export { config as defineConfig } from 'typescript-eslint'
+export {
+  defineConfig,
+  configureVueProject,
+} from './utilities'
+export { configs } from './configs'
+
+// Compatibility layer for the `createConfig` function in <= 14.2.0
+export { default as createConfig } from './createConfig'
+export { default } from './createConfig'
diff --git a/src/internals.ts b/src/internals.ts
new file mode 100644
index 00000000..9917364f
--- /dev/null
+++ b/src/internals.ts
@@ -0,0 +1,166 @@
+import * as tseslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
+import pluginVue from 'eslint-plugin-vue'
+
+export type ScriptLang = 'ts' | 'tsx' | 'js' | 'jsx'
+
+type ConfigArray = ReturnType<typeof tseslint.config>
+
+// https://typescript-eslint.io/troubleshooting/typed-linting/performance#changes-to-extrafileextensions-with-projectservice
+const extraFileExtensions = ['.vue']
+
+// Note that ESLint uses minimatch while we use fast-glob (which uses micromatch underlyingly). They differ on how to handle backslashes.
+// <https://github.com/micromatch/micromatch#backslashes>
+// Here we use `[]` to escape the special characters in the glob pattern.
+// This should work with any glob implementation.
+// Inspired by CPython's `glob.escape` function.
+// <https://github.com/python/cpython/blob/f0c47ea22e0980b4ff9683430b60c418a813021e/Lib/glob.py#L249-L259>
+function escapePathForGlob(path: string) {
+  return path.replace(/([*?{}[\]()])/g, '[$1]')
+}
+
+// Although some rules don't require type information in theory,
+// in practice, when used in vue files, they still throw errors claiming that type information is needed.
+// (If I understand correctly, they are the rules that have called `getParserServices` in its implementation.)
+// https://github.com/typescript-eslint/typescript-eslint/issues/4755#issuecomment-1080961338
+// '@typescript-eslint/consistent-type-assertions' was originally in the list but it has been fixed in
+// https://github.com/typescript-eslint/typescript-eslint/pull/9921
+export const additionalRulesRequiringParserServices = [
+  '@typescript-eslint/consistent-type-imports',
+  '@typescript-eslint/prefer-optional-chain',
+]
+
+export function createBasicSetupConfigs(
+  supportedScriptLangs: Record<ScriptLang, boolean>,
+): ConfigArray {
+  const mayHaveJsxInSfc = supportedScriptLangs.jsx || supportedScriptLangs.tsx
+
+  return [
+    // Must set eslint-plugin-vue's base config again no matter whether the user
+    // has set it before. Otherwise it would be overridden by the tseslint's config.
+    ...pluginVue.configs['flat/base'],
+
+    {
+      name: '@vue/typescript/setup',
+      files: ['*.vue', '**/*.vue'],
+      languageOptions: {
+        parser: vueParser,
+        parserOptions: {
+          parser: {
+            // Fallback to espree for js/jsx scripts, as well as SFCs without scripts
+            // for better performance.
+            js: 'espree',
+            jsx: 'espree',
+
+            ts: tseslint.parser,
+            tsx: tseslint.parser,
+
+            // Leave the template parser unspecified,
+            // so that it could be determined by `<script lang="...">`
+          },
+          // The internal espree version used by vue-eslint-parser is 9.x, which supports ES2024 at most.
+          // While the parser may try to load the latest version of espree, it's not guaranteed to work.
+          // For example, if npm accidentally hoists the older version to the top of the node_modules,
+          // or if the user installs the older version of espree at the project root,
+          // the older versions would be used.
+          // But ESLint 9 allows setting the ecmaVersion to 2025, which may cause a crash.
+          // So we set the ecmaVersion to 2024 here to avoid the potential issue.
+          ecmaVersion: 2024,
+          ecmaFeatures: {
+            jsx: mayHaveJsxInSfc,
+          },
+          extraFileExtensions,
+        },
+      },
+      rules: {
+        'vue/block-lang': [
+          'error',
+          {
+            script: {
+              lang: Object.keys(supportedScriptLangs!).filter(
+                lang => supportedScriptLangs![lang as ScriptLang],
+              ),
+              allowNoLang: supportedScriptLangs!.js,
+            },
+          },
+        ],
+      },
+    },
+  ]
+}
+
+export function createSkipTypeCheckingConfigs(
+  nonTypeCheckableVueFiles: string[],
+): ConfigArray {
+  const configs = [
+    {
+      name: '@vue/typescript/skip-type-checking-for-js-files',
+      files: ['**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs'],
+      ...tseslint.configs.disableTypeChecked,
+    },
+  ]
+
+  if (nonTypeCheckableVueFiles.length > 0) {
+    configs.push({
+      name: '@vue/typescript/skip-type-checking-for-vue-files-without-ts',
+      files: nonTypeCheckableVueFiles.map(escapePathForGlob),
+      ...tseslint.configs.disableTypeChecked,
+      rules: {
+        ...tseslint.configs.disableTypeChecked.rules,
+        ...Object.fromEntries(
+          additionalRulesRequiringParserServices.map(rule => [rule, 'off']),
+        ),
+      },
+    })
+  }
+
+  return configs
+}
+
+export function createTypeCheckingConfigs(
+  typeCheckableVueFiles: string[],
+): ConfigArray {
+  const configs: ConfigArray = [
+    // Vue's own typing inevitably contains some `any`s,
+    // so some of the `no-unsafe-*` rules can't be used.
+    {
+      name: '@vue/typescript/type-aware-rules-in-conflit-with-vue',
+      files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
+      rules: {
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-return': 'off',
+      },
+    },
+    {
+      name: '@vue/typescript/default-project-service-for-ts-files',
+      files: ['**/*.ts', '**/*.tsx', '**/*.mts'],
+      languageOptions: {
+        parser: tseslint.parser,
+        parserOptions: {
+          projectService: true,
+          extraFileExtensions,
+        },
+      },
+    },
+  ]
+
+  if (typeCheckableVueFiles.length > 0) {
+    configs.push({
+      name: '@vue/typescript/default-project-service-for-vue-files',
+      files: typeCheckableVueFiles.map(escapePathForGlob),
+      languageOptions: {
+        parser: vueParser,
+        parserOptions: {
+          projectService: true,
+          parser: tseslint.parser,
+          extraFileExtensions,
+        },
+      },
+    })
+  }
+
+  return configs
+}
diff --git a/src/shim.d.ts b/src/shim.d.ts
deleted file mode 100644
index c4be20fa..00000000
--- a/src/shim.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module 'eslint-plugin-vue' {
-  export const configs: Record<string, ConfigArray>
-}
diff --git a/src/utilities.ts b/src/utilities.ts
new file mode 100644
index 00000000..e8b60b5e
--- /dev/null
+++ b/src/utilities.ts
@@ -0,0 +1,189 @@
+import * as tseslint from 'typescript-eslint'
+
+import type { VueTsPreset } from './configs'
+import { getConfigForPlaceholder } from './configs'
+import groupVueFiles from './groupVueFiles'
+import {
+  additionalRulesRequiringParserServices,
+  createBasicSetupConfigs,
+  createSkipTypeCheckingConfigs,
+  createTypeCheckingConfigs,
+} from './internals'
+
+type ConfigArray = ReturnType<typeof tseslint.config>
+type Rules = NonNullable<ConfigArray[number]['rules']>
+
+type ConfigOrVueTsPreset = ConfigArray[number] | VueTsPreset
+type InfiniteDepthConfigWithVueSupport =
+  | ConfigOrVueTsPreset
+  | InfiniteDepthConfigWithVueSupport[]
+
+import process from 'node:process'
+import type { ScriptLang } from './internals'
+
+export type ProjectOptions = {
+  supportedScriptLangs?: Record<ScriptLang, boolean>
+  rootDir?: string
+}
+
+let projectOptions: ProjectOptions = {
+  supportedScriptLangs: {
+    ts: true,
+    tsx: false,
+    js: false,
+    jsx: false,
+  },
+  rootDir: process.cwd(),
+}
+
+// This function, if called, is guaranteed to be executed before `defineConfig`,
+// so mutating the `projectOptions` object is safe and will be reflected in the final ESLint config.
+export function configureVueProject(userOptions: ProjectOptions) {
+  if (userOptions.supportedScriptLangs) {
+    projectOptions.supportedScriptLangs = userOptions.supportedScriptLangs
+  }
+  if (userOptions.rootDir) {
+    projectOptions.rootDir = userOptions.rootDir
+  }
+
+  // Return an empty array as it doesn't introduce any real ESLint configs by itself
+  return []
+}
+
+export function defineConfig(
+  ...configs: InfiniteDepthConfigWithVueSupport[]
+): ConfigArray {
+  // @ts-ignore
+  const flattenedConfigs: Array<ConfigOrVueTsPreset> = configs.flat(Infinity)
+  const normalizedConfigs = insertAndReorderConfigs(flattenedConfigs).map(
+    config =>
+      typeof config === 'string' ? getConfigForPlaceholder(config) : config,
+  )
+
+  return tseslint.config(normalizedConfigs)
+}
+
+// This function reorders the config array to make sure it satisfies the following layout:
+//
+// [FIRST-EXTENDED-CONFIG]
+// ...
+// [LAST-EXTENDED-CONFIG]
+//
+// [BASIC SETUP]
+//   pluginVue.configs['flat/base'],
+//   '@vue/typescript/setup'
+//
+// [ALL-OTHER-TYPE-AWARE-RULES-CONFIGURED-BY-USERS]
+//
+// [ERROR PREVENTION & PERFORMANCE OPTIMIZATION]
+//   '@vue/typescript/skip-type-checking-for-js-files'
+//   '@vue/typescript/skip-type-checking-for-vue-files-without-ts'
+//
+// [ONLY REQUIRED WHEN ONE-OR-MORE TYPE-AWARE RULES ARE TURNED-ON]
+//   '@vue/typescript/default-project-service-for-ts-files'
+//   '@vue/typescript/default-project-service-for-vue-files'
+//   '@vue/typescript/type-aware-rules-in-conflit-with-vue'
+
+type ExtractedConfig = {
+  files?: (string | string[])[]
+  rules: Rules
+}
+const userTypeAwareConfigs: ExtractedConfig[] = []
+
+function insertAndReorderConfigs(
+  configs: Array<ConfigOrVueTsPreset>,
+): Array<ConfigOrVueTsPreset> {
+  const lastExtendedConfigIndex = configs.findLastIndex(
+    config => typeof config === 'string',
+  )
+
+  if (lastExtendedConfigIndex === -1) {
+    return configs
+  }
+
+  const vueFiles = groupVueFiles(projectOptions.rootDir!)
+  const configsWithoutTypeAwareRules = configs.map(extractTypeAwareRules)
+  // FIXME: also consider the extended configs
+  const hasTypeAwarePresets = configs.some(
+    config =>
+      typeof config === 'string' &&
+      !config.endsWith('disableTypeChecked') &&
+      (config.includes('TypeChecked') || config.endsWith('all')),
+  )
+  const needsTypeAwareLinting = hasTypeAwarePresets || userTypeAwareConfigs.length > 0
+
+  return [
+    ...configsWithoutTypeAwareRules.slice(0, lastExtendedConfigIndex + 1),
+    ...createBasicSetupConfigs(projectOptions.supportedScriptLangs!),
+
+    // user-turned-off type-aware rules must come after the last extended config
+    // in case some rules re-enabled by the extended config
+    // user-turned-on type-aware rules must come before skipping type-checking
+    // in case some rules targets those can't be type-checked files
+    // So we extract all type-aware rules by users and put them in the middle
+    ...userTypeAwareConfigs,
+
+    ...(needsTypeAwareLinting
+      ? [
+          ...createSkipTypeCheckingConfigs(vueFiles.nonTypeCheckable),
+          ...createTypeCheckingConfigs(vueFiles.typeCheckable),
+        ]
+      : []),
+
+    ...configsWithoutTypeAwareRules.slice(lastExtendedConfigIndex + 1),
+  ]
+}
+
+function extractTypeAwareRules(
+  config: ConfigOrVueTsPreset,
+): ConfigOrVueTsPreset {
+  if (typeof config === 'string') {
+    return config
+  }
+
+  if (!config.rules) {
+    return config
+  }
+
+  const [typeAwareRuleEntries, otherRuleEntries] = partition(
+    Object.entries(config.rules),
+    ([name]) => doesRuleRequireTypeInformation(name),
+  )
+
+  userTypeAwareConfigs.push({
+    files: config.files,
+    rules: Object.fromEntries(typeAwareRuleEntries),
+  })
+
+  return {
+    ...config,
+    rules: Object.fromEntries(otherRuleEntries),
+  }
+}
+
+const rulesRequiringTypeInformation = new Set(
+  Object.entries(tseslint.plugin.rules!)
+    // @ts-expect-error
+    .filter(([_name, def]) => def?.meta?.docs?.requiresTypeChecking)
+    .map(([name, _def]) => `@typescript-eslint/${name}`)
+    .concat(additionalRulesRequiringParserServices),
+)
+function doesRuleRequireTypeInformation(ruleName: string): boolean {
+  return rulesRequiringTypeInformation.has(ruleName)
+}
+
+function partition<T>(
+  array: T[],
+  predicate: (element: T) => boolean,
+): [T[], T[]] {
+  const truthy: T[] = []
+  const falsy: T[] = []
+  for (const element of array) {
+    if (predicate(element)) {
+      truthy.push(element)
+    } else {
+      falsy.push(element)
+    }
+  }
+  return [truthy, falsy]
+}
diff --git a/tsconfig.json b/tsconfig.json
index b4c2fb53..38e958ab 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,7 @@
 
     "verbatimModuleSyntax": true,
 
-		"lib": ["ES2020"],
+		"lib": ["ES2020", "ES2023.Array"],
 		"types": ["node"]
 	},
 }