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>
typescript-eslint · Jun 5, 2024 · 39b1c66 · 39b1c66
1 parent fbff4ce
commit 39b1c66
Showing 1 changed file with 46 additions and 1 deletion.
diff --git 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>