From bc4181646ef978a01961f271a245cb06824db887 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Sat, 27 Sep 2025 17:13:24 +0800
Subject: [PATCH] Lint `.jsx` files (#17988)

---
 .vscode/settings.example.json     |  2 +-
 eslint.config.js                  |  5 ++++-
 website/playground/Playground.jsx |  1 -
 website/src/pages/help/index.jsx  |  3 +--
 website/src/pages/index.jsx       | 21 ++++++++++-----------
 website/src/pages/users/index.jsx | 18 +++++++++---------
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/.vscode/settings.example.json b/.vscode/settings.example.json
index 1bcf4e9e2..4466635c8 100644
--- a/.vscode/settings.example.json
+++ b/.vscode/settings.example.json
@@ -1,5 +1,5 @@
 {
-  "[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][markdown][yaml]": {
+  "[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][markdown][yaml][css][html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
   },
diff --git a/eslint.config.js b/eslint.config.js
index a75e6bae5..4d64f8b74 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -39,7 +39,8 @@ scripts/benchmark/*/
   .split("\n")
   .filter((pattern) => pattern && !pattern.startsWith("#"));
 
-export default [
+const configs = [
+  { files: ["**/*.{js,mjs,cjs,jsx}"] },
   eslintPluginJs.configs.recommended,
   eslintPluginRegexp.configs["flat/recommended"],
   eslintPluginUnicorn.configs["flat/recommended"],
@@ -493,3 +494,5 @@ export default [
     rules: { "require-unicode-regexp": "off" },
   },
 ];
+
+export default configs;
diff --git a/website/playground/Playground.jsx b/website/playground/Playground.jsx
index 42c2b5e93..5edd3b201 100644
--- a/website/playground/Playground.jsx
+++ b/website/playground/Playground.jsx
@@ -96,7 +96,6 @@ class Playground extends React.Component {
 
     const codeSample = getCodeSample(options.parser);
     const content = original.content || codeSample;
-    const isDocExplorer = options.parser === "doc-explorer";
     const selection = {};
 
     this.state = { content, options, selection };
diff --git a/website/src/pages/help/index.jsx b/website/src/pages/help/index.jsx
index 1ad6ae7f3..b7200f165 100644
--- a/website/src/pages/help/index.jsx
+++ b/website/src/pages/help/index.jsx
@@ -1,7 +1,6 @@
 import Link from "@docusaurus/Link";
-import Layout from "@theme/Layout";
-
 import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
 
 /**
  *
diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx
index c526d6a49..3fdf48db5 100644
--- a/website/src/pages/index.jsx
+++ b/website/src/pages/index.jsx
@@ -1,12 +1,12 @@
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
 import AnimatedLogo from "@sandhose/prettier-animated-logo";
 import Heading from "@theme/Heading";
-import styles from "./index.module.css";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
 import { useState } from "react";
 import Markdown from "react-markdown";
+import styles from "./index.module.css";
 
 const playgroundLink =
   process.env.NODE_ENV === "production"
@@ -43,7 +43,7 @@ function DraggableLogo() {
 
 function Tidelift() {
   const { siteConfig } = useDocusaurusContext();
-  const tideliftUrl = siteConfig.customFields.tideliftUrl;
+  const { tideliftUrl } = siteConfig.customFields;
 
   return (
     <Link className={styles.tidelift} to={tideliftUrl}>
@@ -176,8 +176,8 @@ function LanguagesSection() {
       <div className="container">
         <Heading as="h2">Works with the Tools You Use</Heading>
         <div className={styles.languageSectionGrid}>
-          {languageChunks.map(({ languages }, index) => (
-            <div key={index}>
+          {languageChunks.map(({ languages }) => (
+            <div key={languages.map(({ name }) => name).join("|")}>
               {languages.map((language) => (
                 <LanguageItem key={language.name} {...language} />
               ))}
@@ -216,8 +216,7 @@ function LanguageItem({ name, nameLink, image, variants }) {
 
 function EditorSupportSection() {
   const { siteConfig } = useDocusaurusContext();
-  const editors = siteConfig.customFields.editors;
-  const githubUrl = siteConfig.customFields.githubUrl;
+  const { editors, githubUrl } = siteConfig.customFields;
 
   return (
     <div className={clsx(styles.sectionPadding, styles.editorSection)}>
@@ -266,11 +265,11 @@ function Editor({ content = "", image, name }) {
 
 function UsersSection() {
   const { siteConfig } = useDocusaurusContext();
-  const users = siteConfig.customFields.users;
+  const { users } = siteConfig.customFields;
   const showcase = users
     .filter((user) => user.pinned)
-    .map((user, i) => (
-      <a key={i} href={user.infoLink} className={styles.userItem}>
+    .map((user) => (
+      <a key={user.caption} href={user.infoLink} className={styles.userItem}>
         <img
           src={user.greyImage}
           title={user.caption}
diff --git a/website/src/pages/users/index.jsx b/website/src/pages/users/index.jsx
index 2ca2133dc..80434d353 100644
--- a/website/src/pages/users/index.jsx
+++ b/website/src/pages/users/index.jsx
@@ -1,17 +1,17 @@
-import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Heading from "@theme/Heading";
-import Admonition from "@theme/Admonition";
-import styles from "./index.module.css";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Admonition from "@theme/Admonition";
+import Heading from "@theme/Heading";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import styles from "./index.module.css";
 
 export default function Users() {
   const { siteConfig } = useDocusaurusContext();
-  const users = siteConfig.customFields.users;
+  const { users } = siteConfig.customFields;
 
-  const showcase = users.map((user, i) => (
-    <div key={i} className={styles.logoItem}>
+  const showcase = users.map((user) => (
+    <div key={user.caption} className={styles.logoItem}>
       <Link to={user.infoLink}>
         <img src={user.image} title={user.caption} />
       </Link>