feat: add a defineConfig utility function and use it in examples (#117

)

README.md

@@ -27,40 +27,51 @@ Please also make sure that you have `typescript` and `eslint` installed.
 
 Because of the complexity of this config, it is exported as a factory function that takes an options object and returns an ESLint configuration object.
 
+This package exports 2 utility functions:
+
+- `defineConfig`, as a re-export of the [`config` function from `typescript-eslint`](https://typescript-eslint.io/packages/typescript-eslint#config).
+- `createConfig`, used for creating an ESLint configuration array that extends from the [`typescript-eslint` shared configs](https://typescript-eslint.io/users/configs).
+
 ### Minimal Setup
 
 ```js
 // eslint.config.mjs
-import pluginVue from "eslint-plugin-vue";
-import vueTsEslintConfig from "@vue/eslint-config-typescript";
-
-export default [
-  ...pluginVue.configs["flat/essential"],
-  ...vueTsEslintConfig(),
-]
+import pluginVue from 'eslint-plugin-vue'
+import {
+  defineConfig,
+  createConfig as vueTsEslintConfig,
+} from '@vue/eslint-config-typescript'
+
+export default defineConfig(
+  pluginVue.configs['flat/essential'],
+  vueTsEslintConfig(),
+)
 ```
 
 The above configuration enables [the essential rules for Vue 3](https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention) and [the recommended rules for TypeScript](https://typescript-eslint.io/rules/?=recommended).
 
-All the `<script>` blocks in `.vue` files *MUST* be written in TypeScript (should be either `<script setup lang="ts">` or `<script lang="ts">`).
+All the `<script>` blocks in `.vue` files _MUST_ be written in TypeScript (should be either `<script setup lang="ts">` or `<script lang="ts">`).
 
 ### Advanced Setup
 
 ```js
 // eslint.config.mjs
-import pluginVue from "eslint-plugin-vue";
-import vueTsEslintConfig from "@vue/eslint-config-typescript";
+import pluginVue from 'eslint-plugin-vue'
+import {
+  defineConfig,
+  createConfig as vueTsEslintConfig,
+} from '@vue/eslint-config-typescript'
 
-export default [
-  ...pluginVue.configs["flat/essential"],
+export default defineConfig(
+  pluginVue.configs['flat/essential'],
 
-  ...vueTsEslintConfig({
+  vueTsEslintConfig({
     // Optional: extend additional configurations from `typescript-eslint`.
     // Supports all the configurations in
     // https://typescript-eslint.io/users/configs#recommended-configurations
     extends: [
       // By default, only the recommended rules are enabled.
-      "recommended",
+      'recommended',
       // You can also manually enable the stylistic rules.
       // "stylistic",
 
@@ -98,8 +109,8 @@ export default [
     // Our config helper would resolve and parse all the `.vue` files under `rootDir`,
     // and only apply the loosened rules to the files that do need them.
     rootDir: import.meta.dirname,
-  })
-]
+  }),
+)
 ```
 
 ### Linting with Type Information
@@ -111,32 +122,37 @@ It is not always easy to set up the type-checking environment for ESLint without
 So we don't recommend you to configure individual type-aware rules and the corresponding language options all by yourself.
 Instead, you can start by extending from the `recommendedTypeChecked` configuration and then turn on/off the rules you need.
 
-As of now, all the rules you need to turn on must appear *before* calling `...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] })`, and all the rules you need to turn off must appear *after* calling it.
+As of now, all the rules you need to turn on must appear _before_ calling `vueTsEslintConfig({ extends: ['recommendedTypeChecked'] })`, and all the rules you need to turn off must appear _after_ calling it.
 
 ```js
 // eslint.config.mjs
-import pluginVue from "eslint-plugin-vue";
-import vueTsEslintConfig from "@vue/eslint-config-typescript";
+import pluginVue from 'eslint-plugin-vue'
+import {
+  defineConfig,
+  createConfig as vueTsEslintConfig,
+} from '@vue/eslint-config-typescript'
 
-export default [
-  ...pluginVue.configs["flat/essential"],
+export default defineConfig(
+  pluginVue.configs['flat/essential'],
 
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
     rules: {
       // Turn on other rules that you need.
-      '@typescript-eslint/require-array-sort-compare': 'error'
-    }
+      '@typescript-eslint/require-array-sort-compare': 'error',
+    },
   },
-  ...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),
+
+  vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),
+
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
     rules: {
       // Turn off the recommended rules that you don't need.
       '@typescript-eslint/no-redundant-type-constituents': 'off',
-    }
-  }
-]
+    },
+  },
+)
 ```
 
 ## Further Reading

src/index.ts

@@ -224,3 +224,6 @@ export default function createConfig({
 function escapePathForGlob(path: string) {
   return path.replace(/([*?{}[\]()])/g, '[$1]')
 }
+
+export { createConfig }
+export { config as defineConfig } from 'typescript-eslint'