From 39b1c669535800b8e464e8c1bf2bfd32f47514a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josh=20Goldberg=20=E2=9C=A8?= <git@joshuakgoldberg.com>
Date: Wed, 5 Jun 2024 00:37:20 -0400
Subject: [PATCH] docs: add flat config references to Parser docs (#9264)

* docs: add flat config references to Parser docs

* Update docs/packages/Parser.mdx

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 docs/packages/Parser.mdx | 47 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/docs/packages/Parser.mdx b/docs/packages/Parser.mdx
index c7364b8cbe4..110a0f11687 100644
--- a/docs/packages/Parser.mdx
+++ b/docs/packages/Parser.mdx
@@ -3,6 +3,9 @@ id: parser
 sidebar_label: parser
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # `@typescript-eslint/parser`
 
 <PackageLink packageName="parser" scope="@typescript-eslint" />
@@ -312,7 +315,25 @@ An experimental alternative to `parserOptions.project`.
 This directs the parser to use a more seamless TypeScript API to generate type information for rules.
 It will automatically detect the TSConfig for each file (like `project: true`), and will also allow type information to be computed for JavaScript files without the `allowJs` compiler option (unlike `project: true`).
 
-```js
+<Tabs groupId="eslint-config">
+<TabItem value="Flat Config">
+
+```js title="eslint.config.js"
+export default [
+  {
+    languageOptions: {
+      parserOptions: {
+        EXPERIMENTAL_useProjectService: true,
+      },
+    },
+  },
+];
+```
+
+</TabItem>
+<TabItem value="Legacy Config">
+
+```js title=".eslintrc.js"
 module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -321,6 +342,9 @@ module.exports = {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 This option should bring two main benefits:
 
 - Simpler configurations: most projects shouldn't need to explicitly configure `project` paths or create `tsconfig.eslint.json`s
@@ -348,6 +372,24 @@ declare function createProgram(
 
 Example usage:
 
+<Tabs groupId="eslint-config">
+<TabItem value="Flat Config">
+
+```js title="eslint.config.js"
+import * as parser from '@typescript-eslint/parser';
+
+export default [
+  {
+    parserOptions: {
+      programs: [parser.createProgram('tsconfig.json')],
+    },
+  },
+];
+```
+
+</TabItem>
+<TabItem value="Legacy Config">
+
 ```js title=".eslintrc.js"
 const parser = require('@typescript-eslint/parser');
 
@@ -357,3 +399,6 @@ module.exports = {
   },
 };
 ```
+
+</TabItem>
+</Tabs>