feat: use @vue/eslint-config-typescript 14.3 API & eslint.config.ts

`eslint.config.ts` support is unflagged in ESLint 9.18 and requires jiti
https://eslint.org/blog/2025/01/eslint-v9.18.0-released/#stable-typescript-configuration-file-support

Author: haoqunjiang

bin/create-eslint-config.js

@@ -234,7 +234,7 @@ const lintCommand =
 
 console.info(
   '\n' +
-    `${bold(yellow('package.json'))} and ${bold(blue('eslint.config.js'))} have been updated.\n` +
+    `${bold(yellow('package.json'))} and ${bold(blue(`eslint.config.${hasTypeScript ? 'ts' : 'js'}`))} have been updated.\n` +
     `Now please run ${bold(green(installCommand))} to re-install the dependencies.\n` +
     `Then you can run ${bold(green(lintCommand))} to lint your files.`,
 )

index.js

@@ -28,28 +28,13 @@ export default function createConfig({
   if (hasTypeScript) {
     // TODO: allowJs option
     fileExtensions.unshift('ts', 'mts', 'tsx')
-
     additionalConfigs.unshift({
-      devDependencies: pickDependencies(['@vue/eslint-config-typescript']),
-      afterVuePlugin: [
-        {
-          importer:
-            "import vueTsEslintConfig from '@vue/eslint-config-typescript'",
-          // TODO: supportedScriptLangs
-          content: '...vueTsEslintConfig(),',
-        },
-      ],
+      devDependencies: pickDependencies(['@vue/eslint-config-typescript', 'jiti']),
     })
   } else {
     fileExtensions.unshift('js', 'mjs', 'jsx')
     additionalConfigs.unshift({
       devDependencies: pickDependencies(['@eslint/js']),
-      beforeVuePlugin: [
-        {
-          importer: "import js from '@eslint/js'",
-          content: 'js.configs.recommended,',
-        },
-      ],
     })
   }
 
@@ -113,16 +98,24 @@ export default function createConfig({
   }
 
   const files = {
-    'eslint.config.js': renderEjsFile(
-      './templates/eslint.config.js.ejs',
-      templateData,
-    ),
     '.editorconfig': renderEjsFile(
       './templates/_editorconfig.ejs',
       templateData,
     ),
   }
 
+  if (hasTypeScript) {
+    files['eslint.config.ts'] = renderEjsFile(
+      './templates/eslint.config.ts.ejs',
+      templateData,
+    )
+  } else {
+    files['eslint.config.js'] = renderEjsFile(
+      './templates/eslint.config.js.ejs',
+      templateData,
+    )
+  }
+
   // .editorconfig & .prettierrc.json
   if (needsPrettier) {
     // Prettier recommends an explicit configuration file to let the editor know that it's used.

package.json

@@ -46,6 +46,7 @@
     "eslint": "^9.18.0",
     "eslint-plugin-oxlint": "^0.15.6",
     "eslint-plugin-vue": "^9.32.0",
+    "jiti": "^2.4.2",
     "npm-run-all2": "^7.0.2",
     "oxlint": "^0.15.6",
     "prettier": "^3.4.2",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 <%_ for (const { importer } of configsBeforeVuePlugin) { _%>
 <%- importer %>
 <%_ } _%>
+import js from '@eslint/js'
 import pluginVue from 'eslint-plugin-vue'
 <%_ for (const { importer } of configsAfterVuePlugin) { _%>
 <%- importer %>
@@ -20,6 +21,7 @@ export default [
 <%_ for (const { content } of configsBeforeVuePlugin) { _%>
   <%- content %><%# TODO: auto-indent if content's multi-line %>
 <%_ } _%>
+  js.configs.recommended,
   ...pluginVue.configs['flat/essential'],
 <%_ for (const { content } of configsAfterVuePlugin) { _%>
   <%- content %><%# TODO: auto-indent if content's multi-line %>

templates/eslint.config.js.ejs

@@ -0,0 +1,32 @@
+<%_ for (const { importer } of configsBeforeVuePlugin) { _%>
+<%- importer %>
+<%_ } _%>
+import pluginVue from 'eslint-plugin-vue'
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from '@vue/eslint-config-typescript'
+<%_ for (const { importer } of configsAfterVuePlugin) { _%>
+<%- importer %>
+<%_ } _%>
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{<%= fileExtensions.join(',') %>}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+<%_ for (const { content } of configsBeforeVuePlugin) { _%>
+  <%- content %><%# TODO: auto-indent if content's multi-line %>
+<%_ } _%>
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+<%_ for (const { content } of configsAfterVuePlugin) { _%>
+  <%- content %><%# TODO: auto-indent if content's multi-line %>
+<%_ } _%>
+)