Lint .jsx files (#17988)

.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,
   },

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;

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 };

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";
 
 /**
  *

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}

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>