docs: add flat config example, close typescript-eslint#230

docs/packages/default.md

@@ -22,8 +22,27 @@ npm i -D @stylistic/eslint-plugin
 ```
 
 Add `@stylistic` to your plugins list, and prefix [stylistic rules](#rules) with `@stylistic`:
+::: code-group
 
-```js
+```js [Flat Config]
+// eslint.config.js
+import stylistic from '@stylistic/eslint-plugin' // [!code ++]
+
+export default [
+  {
+    plugins: {
+      '@stylistic': stylistic // [!code ++]
+    },
+    rules: {
+      'indent': ['error', 2], // [!code --]
+      '@stylistic/indent': ['error', 2], // [!code ++]
+      // ...
+    }
+  }
+]
+```
+
+```js [Legacy Config]
 // .eslintrc.js
 module.exports = {
   plugins: [
@@ -37,6 +56,8 @@ module.exports = {
 }
 ```
 
+:::
+
 Check out the [migration guide](/guide/migration) for more details.
 
 ## Rules

docs/packages/js.md

@@ -16,7 +16,27 @@ npm i -D @stylistic/eslint-plugin-js
 
 Add `@stylistic/js` to your plugins list, and prefix [stylistic rules](#rules) with `@stylistic/js`:
 
-```js
+::: code-group
+
+```js [Flat Config]
+// eslint.config.js
+import stylisticJs from '@stylistic/eslint-plugin-js' // [!code ++]
+
+export default [
+  {
+    plugins: {
+      '@stylistic/js': stylisticJs // [!code ++]
+    },
+    rules: {
+      'indent': ['error', 2], // [!code --]
+      '@stylistic/js/indent': ['error', 2], // [!code ++]
+      // ...
+    }
+  }
+]
+```
+
+```js [Legacy Config]
 // .eslintrc.js
 module.exports = {
   plugins: [
@@ -30,6 +50,8 @@ module.exports = {
 }
 ```
 
+:::
+
 Check out the [migration guide](/guide/migration) for more details.
 
 ## Rules

docs/packages/jsx.md

@@ -16,7 +16,27 @@ npm i -D @stylistic/eslint-plugin-jsx
 
 Add `@stylistic/jsx` to your plugins list, and change the prefix for [stylistic rules](#rules) from `react` to `@stylistic/js`:
 
-```ts
+::: code-group
+
+```js [Flat Config]
+// eslint.config.js
+import stylisticJsx from '@stylistic/eslint-plugin-jsx' // [!code ++]
+
+export default [
+  {
+    plugins: {
+    '@stylistic/jsx': stylisticJsx // [!code ++]
+    },
+    rules: {
+      'react/jsx-indent': ['error', 2], // [!code --]
+      '@stylistic/jsx/jsx-indent': ['error', 2], // [!code ++]
+      // ...
+    }
+  }
+]
+```
+
+```js [Legacy Config]
 // .eslintrc.js
 module.exports = {
   plugins: [
@@ -27,9 +47,11 @@ module.exports = {
     '@stylistic/jsx/jsx-indent': ['error', 2], // [!code ++]
     // ...
   }
-};
+}
 ```
 
+:::
+
 Check out the [migration guide](/guide/migration) for more details.
 
 ## Rules

docs/packages/ts.md

@@ -15,8 +15,29 @@ npm i -D @stylistic/eslint-plugin-ts
 ```
 
 Add `@stylistic/ts` to your plugins list, and change the prefix for [stylistic rules](#rules) from `@typescript-eslint/` to `@stylistic/ts/`:
+::: code-group
 
-```js
+```js [Flat Config]
+// eslint.config.js
+import stylisticTs from '@stylistic/eslint-plugin-ts' // [!code ++]
+import parserTs from '@typescript-eslint/parser'
+
+export default [
+  {
+    plugins: {
+      '@stylistic/ts': stylisticTs // [!code ++]
+    },
+    parser: parserTs,
+    rules: {
+      '@typescript-eslint/indent': ['error', 2], // [!code --]
+      '@stylistic/ts/indent': ['error', 2], // [!code ++]
+      // ...
+    }
+  }
+]
+```
+
+```js [Legacy Config]
 // .eslintrc.js
 module.exports = {
   plugins: [
@@ -32,6 +53,8 @@ module.exports = {
 };
 ```
 
+:::
+
 Note that this package only contains stylistic rules. You still need to install `@typescript-eslint/parser` and `@typescript-eslint/eslint-plugin` to parse and lint your TypeScript code.
 
 Check out the [migration guide](/guide/migration) for more details.