docs: update further reading format

.vscode/settings.json

@@ -3,7 +3,7 @@
     "editor.defaultFormatter": "dprint.dprint"
   },
   "[jsonc]": {
-    "editor.defaultFormatter": "dprint.dprint"
+    "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[typescript]": {
     "editor.defaultFormatter": "dprint.dprint"

packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.md

@@ -76,4 +76,4 @@ class AutoSelectingInput extends Component {
 
 ## Further Reading
 
-- [React DOM: APIs findDOMNode](https://react.dev/reference/react-dom/findDOMNode)
+- [React DOM `findDOMNode`](https://react.dev/reference/react-dom/findDOMNode)

packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.md

@@ -48,4 +48,4 @@ flushSync(() => {
 
 ## Further Reading
 
-- [React DOM: APIs flushSync](https://react.dev/reference/react-dom/flushSync)
+- [React DOM `flushSync`](https://react.dev/reference/react-dom/flushSync)

packages/plugins/eslint-plugin-react-dom/src/rules/no-hydrate.md

@@ -57,8 +57,8 @@ hydrateRoot(document.getElementById("app"), <Component />);
 
 ## Further Reading
 
-- [React: react-dom/hydrate](https://18.react.dev/reference/react-dom/hydrate)
-- [React: react-dom/createRoot](https://react.dev/reference/react-dom/client/hydrateRoot)
+- [React DOM `hydrate`](https://18.react.dev/reference/react-dom/hydrate)
+- [React DOM `createRoot`](https://react.dev/reference/react-dom/client/hydrateRoot)
 
 ---
 

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.md

@@ -60,7 +60,7 @@ function MyComponent() {
 
 ## Further Reading
 
-- [MDN: button - notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#notes)
+- [MDN `button` notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#notes)
 
 ---
 

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.md

@@ -60,7 +60,7 @@ function MyComponent() {
 
 ## Further Reading
 
-- [MDN: iframe - sandbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)
+- [MDN `iframe` sandbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)
 
 ---
 

packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.md

@@ -60,7 +60,7 @@ ReactDOM.render(<div id="app" ref={doSomethingWithInst} />, document.body);
 
 ## Further Reading
 
-- [React: react-dom/render](https://18.react.dev/reference/react-dom/render)
+- [React DOM `render`](https://18.react.dev/reference/react-dom/render)
 
 ---
 

packages/plugins/eslint-plugin-react-dom/src/rules/no-render.md

@@ -56,8 +56,8 @@ createRoot(document.getElementById("app")).render(<Component />);
 
 ## Further Reading
 
-- [React: react-dom/render](https://18.react.dev/reference/react-dom/render)
-- [React: react-dom/createRoot](https://react.dev/reference/react-dom/client/createRoot)
+- [React DOM `render`](https://18.react.dev/reference/react-dom/render)
+- [React DOM `createRoot`](https://react.dev/reference/react-dom/client/createRoot)
 
 ---
 

packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.md

@@ -61,7 +61,7 @@ function MyComponent() {
 
 ## Further Reading
 
-- [MDN: iframe - sandbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)
+- [MDN: `iframe` `sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)
 
 ---
 

packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md

@@ -78,4 +78,4 @@ function StatefulForm({}) {
 
 ## Further Reading
 
-- [React: useActionState](https://react.dev/reference/react/useActionState)
+- [React `useActionState` Hook](https://react.dev/reference/react/useActionState)

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.md

@@ -94,7 +94,7 @@ export default function Counter() {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
-    const handler = () => setCount(c => c + 1);
+    const handler = () => setCount((c) => c + 1);
     window.addEventListener("click", handler);
     return () => window.removeEventListener("click", handler);
   }, []);
@@ -113,7 +113,7 @@ export default function Counter() {
 
   useEffect(() => {
     const intervalId = setInterval(() => {
-      setCount(c => c + 1);
+      setCount((c) => c + 1);
     }, 1000);
     return () => clearInterval(intervalId);
   }, []);
@@ -133,8 +133,8 @@ export default function RemoteContent() {
   useEffect(() => {
     let discarded = false;
     fetch("https://eslint-react.xyz/content")
-      .then(resp => resp.text())
-      .then(text => {
+      .then((resp) => resp.text())
+      .then((text) => {
         if (discarded) return;
         setContent(text);
       });
@@ -207,7 +207,10 @@ import { useMemo, useState } from "react";
 function TodoList({ todos, filter }) {
   const [newTodo, setNewTodo] = useState("");
   // ✅ Does not re-run getFilteredTodos() unless todos or filter change
-  const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
+  const visibleTodos = useMemo(
+    () => getFilteredTodos(todos, filter),
+    [todos, filter],
+  );
   // ...
 }
 ```
@@ -234,12 +237,7 @@ export default function ProfilePage({ userId }) {
 import { useState } from "react";
 
 export default function ProfilePage({ userId }) {
-  return (
-    <Profile
-      userId={userId}
-      key={userId}
-    />
-  );
+  return <Profile userId={userId} key={userId} />;
 }
 
 function Profile({ userId }) {
@@ -292,7 +290,7 @@ function List({ items }) {
   const [isReverse, setIsReverse] = useState(false);
   const [selectedId, setSelectedId] = useState(null);
   // ✅ Best: Calculate everything during rendering
-  const selection = items.find(item => item.id === selectedId) ?? null;
+  const selection = items.find((item) => item.id === selectedId) ?? null;
   // ...
 }
 ```
@@ -304,9 +302,9 @@ function List({ items }) {
 
 ## Further Reading
 
-- [React: useState](https://react.dev/reference/react/useState#setstate)
-- [React: useEffect](https://react.dev/reference/react/useEffect)
-- [React: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+- [React `useState` Hook](https://react.dev/reference/react/useState)
+- [React `useEffect` Hook](https://react.dev/reference/react/useEffect)
+- [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
 
 ---
 

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.md

@@ -94,7 +94,7 @@ export default function Counter() {
   const [count, setCount] = useState(0);
 
   useLayoutEffect(() => {
-    const handler = () => setCount(c => c + 1);
+    const handler = () => setCount((c) => c + 1);
     window.addEventListener("click", handler);
     return () => window.removeEventListener("click", handler);
   }, []);
@@ -113,7 +113,7 @@ export default function Counter() {
 
   useLayoutEffect(() => {
     const intervalId = setInterval(() => {
-      setCount(c => c + 1);
+      setCount((c) => c + 1);
     }, 1000);
     return () => clearInterval(intervalId);
   }, []);
@@ -133,8 +133,8 @@ export default function RemoteContent() {
   useLayoutEffect(() => {
     let discarded = false;
     fetch("https://eslint-react.xyz/content")
-      .then(resp => resp.text())
-      .then(text => {
+      .then((resp) => resp.text())
+      .then((text) => {
         if (discarded) return;
         setContent(text);
       });
@@ -207,7 +207,10 @@ import { useMemo, useState } from "react";
 function TodoList({ todos, filter }) {
   const [newTodo, setNewTodo] = useState("");
   // ✅ Does not re-run getFilteredTodos() unless todos or filter change
-  const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
+  const visibleTodos = useMemo(
+    () => getFilteredTodos(todos, filter),
+    [todos, filter],
+  );
   // ...
 }
 ```
@@ -234,12 +237,7 @@ export default function ProfilePage({ userId }) {
 import { useState } from "react";
 
 export default function ProfilePage({ userId }) {
-  return (
-    <Profile
-      userId={userId}
-      key={userId}
-    />
-  );
+  return <Profile userId={userId} key={userId} />;
 }
 
 function Profile({ userId }) {
@@ -292,7 +290,7 @@ function List({ items }) {
   const [isReverse, setIsReverse] = useState(false);
   const [selectedId, setSelectedId] = useState(null);
   // ✅ Best: Calculate everything during rendering
-  const selection = items.find(item => item.id === selectedId) ?? null;
+  const selection = items.find((item) => item.id === selectedId) ?? null;
   // ...
 }
 ```
@@ -304,9 +302,9 @@ function List({ items }) {
 
 ## Further Reading
 
-- [React: useState](https://react.dev/reference/react/useState#setstate)
-- [React: useLayoutEffect](https://react.dev/reference/react/useLayoutEffect)
-- [React: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+- [React `useState` Hook](https://react.dev/reference/react/useState)
+- [React `useLayoutEffect` Hook](https://react.dev/reference/react/useLayoutEffect)
+- [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
 
 ---
 

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md

@@ -121,5 +121,4 @@ function useAuth() {
 
 ## Further Reading
 
-- [React: invalid-hook-call-warning (the first note)](https://react.dev/warnings/invalid-hook-call-warning)
-- [React: should-all-functions-called-during-rendering-start-with-the-use-prefix (the deep dive)](https://react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix)
+- [React Docs: Should all functions called during rendering start with the `use` prefix? (the deep dive)](https://react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix)

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.md

@@ -68,4 +68,4 @@ declare function generateTodos(): string[];
 
 ## Further Reading
 
-- [React: useState](https://react.dev/reference/react/useState#setstate)
+- [React `useState` Hook](https://react.dev/reference/react/useState#setstate)

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.md

@@ -188,7 +188,13 @@ import { useEffect } from "react";
 
 function MyComponent() {
   useEffect(() => {
-    const events = ["mousemove", "mousedown", "keydown", "scroll", "touchstart"];
+    const events = [
+      "mousemove",
+      "mousedown",
+      "keydown",
+      "scroll",
+      "touchstart",
+    ];
     const handleActivity = () => {};
 
     events.forEach((event) => {
@@ -254,7 +260,7 @@ function useCustomHook() {
 
 ## Further Reading
 
-- [MDN: EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
-- [MDN: EventTarget.removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
-- [React: Subscribing to events](https://react.dev/learn/synchronizing-with-effects#subscribing-to-events)
-- [React: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
+- [MDN: `EventTarget.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+- [MDN: `EventTarget.removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
+- [React Docs: Subscribing to events](https://react.dev/learn/synchronizing-with-effects#subscribing-to-events)
+- [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.md

@@ -71,9 +71,9 @@ function MyComponent() {
 
 ## Further Reading
 
-- [MDN: setInterval](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
-- [MDN: clearInterval](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)
-- [React: synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
+- [MDN: `setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
+- [MDN: `clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)
+- [React Docs: Synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
 
 ---
 

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.md

@@ -75,5 +75,5 @@ function MyComponent() {
 
 ## Further Reading
 
-- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
-- [React: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
+- [MDN: `ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+- [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.md

@@ -71,9 +71,9 @@ function MyComponent() {
 
 ## Further Reading
 
-- [MDN: setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
-- [MDN: clearTimeout](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)
-- [React: synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
+- [MDN: `setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
+- [MDN: `clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)
+- [React Docs: Synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md

@@ -76,7 +76,7 @@ function MyComponent({ items }: MyComponentProps) {
 
 ## Further Reading
 
-- [React: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
+- [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md

@@ -55,7 +55,7 @@ function MyComponent({ children }: MyComponentProps) {
 
 ## Further Reading
 
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md

@@ -55,7 +55,7 @@ function MyComponent({ children }: MyComponentProps) {
 
 ## Further Reading
 
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md

@@ -54,7 +54,7 @@ function MyComponent({ children }: MyComponentProps) {
 
 ## Further Reading
 
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md

@@ -51,7 +51,7 @@ function MyComponent({ children }: MyComponentProps) {
 
 ## Further Reading
 
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md

@@ -52,7 +52,7 @@ function MyComponent({ children }: MyComponentProps) {
 
 ## Further Reading
 
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md

@@ -88,4 +88,4 @@ class ErrorBoundary extends Component<ErrorBoundaryProps> {
 
 ## Further Reading
 
-- [React: Legacy React APIs Component](https://react.dev/reference/react/Component)
+- [Legacy React APIs `Component`](https://react.dev/reference/react/Component)

packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md

@@ -50,4 +50,4 @@ console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye
 
 ## Further Reading
 
-- [React: Legacy React APIs cloneElement](https://react.dev/reference/react/cloneElement)
+- [Legacy React APIs `cloneElement`](https://react.dev/reference/react/cloneElement)

packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.md

@@ -72,7 +72,7 @@ class MyComponent extends React.Component<MyComponentProps> {
 
 ## Further Reading
 
-- [React: Legacy React APIs componentWillMount](https://react.dev/reference/react/Component#componentwillmount)
+- [Legacy React APIs `componentWillMount`](https://react.dev/reference/react/Component#componentwillmount)
 
 ---
 

packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.md

@@ -64,7 +64,7 @@ class MyComponent extends React.Component {
 
 ## Further Reading
 
-- [React: Legacy React APIs componentWillReceiveProps](https://react.dev/reference/react/Component#componentwillreceiveprops)
+- [Legacy React APIs `componentWillReceiveProps`](https://react.dev/reference/react/Component#componentwillreceiveprops)
 
 ---