void 0} onKeyDown={() => void 0} />
+Examples of **incorrect** code for this rule:
-// Bad
+```jsx
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
// Will pass because it is hidden.
// This is valid since photo is a variable name.
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/lang.md b/src/docs/guide/usage/linter/rules/jsx_a11y/lang.md
index a32115e2b15..d645dd1b2ed 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/lang.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/lang.md
@@ -16,20 +16,20 @@ the screen reader assumes the default language set by the user.
Language settings become an issue for users who speak multiple languages
and access website in more than one language.
-### Example
+### Examples
-// good
+Examples of **incorrect** code for this rule:
```jsx
-
-
+
+
```
-// bad
+Examples of **correct** code for this rule:
```jsx
-
-
+
+
```
### Resources
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/media-has-caption.md b/src/docs/guide/usage/linter/rules/jsx_a11y/media-has-caption.md
index 169105f2230..d9168a6fb34 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/media-has-caption.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/media-has-caption.md
@@ -17,16 +17,20 @@ Captions are also useful for users in noisy environments or where audio is not a
### Example
-```jsx
-// Good
-
-
+Examples of **incorrect** code for this rule:
-// Bad
+```jsx
```
+Examples of **correct** code for this rule:
+
+```jsx
+
+
+```
+
## References
- [Rule Source](https://github.com/oxc-project/oxc/blob/main/crates/oxc_linter/src/rules/jsx_a11y/media_has_caption.rs)
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/mouse-events-have-key-events.md b/src/docs/guide/usage/linter/rules/jsx_a11y/mouse-events-have-key-events.md
index f0b199be57c..cbbe2a623b1 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/mouse-events-have-key-events.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/mouse-events-have-key-events.md
@@ -16,14 +16,18 @@ AT compatibility, and screenreader users.
### Example
-```jsx
-// Good
-
void 0} />
```
+Examples of **correct** code for this rule:
+
+```jsx
+
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/iframe-has-title.md b/src/docs/guide/usage/linter/rules/jsx_a11y/iframe-has-title.md
index 1082c841219..282d40c1c80 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/iframe-has-title.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/iframe-has-title.md
@@ -20,8 +20,9 @@ This rule checks for title property on iframe element.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
@@ -31,8 +32,11 @@ This rule checks for title property on iframe element.
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/img-redundant-alt.md b/src/docs/guide/usage/linter/rules/jsx_a11y/img-redundant-alt.md
index 3f2e67c0ed9..1840c745ece 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/img-redundant-alt.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/img-redundant-alt.md
@@ -23,13 +23,17 @@ This rule checks for alternative text on the following elements:
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
void 0} onKeyDown={() => void 0} />
+```
+
## References
- [Rule Source](https://github.com/oxc-project/oxc/blob/main/crates/oxc_linter/src/rules/jsx_a11y/click_events_have_key_events.rs)
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/heading-has-content.md b/src/docs/guide/usage/linter/rules/jsx_a11y/heading-has-content.md
index ffaed33864e..920dd44a97b 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/heading-has-content.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/heading-has-content.md
@@ -20,11 +20,15 @@ from accessing information on the page's structure.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
Foo
``` diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/html-has-lang.md b/src/docs/guide/usage/linter/rules/jsx_a11y/html-has-lang.md index da7363d9e16..27dca79e55f 100644 --- a/src/docs/guide/usage/linter/rules/jsx_a11y/html-has-lang.md +++ b/src/docs/guide/usage/linter/rules/jsx_a11y/html-has-lang.md @@ -18,11 +18,15 @@ and access website in more than one language. ### Example +Examples of **incorrect** code for this rule: + ```jsx -// Bad void 0} onFocus={() => void 0} />
+Examples of **incorrect** code for this rule:
-// Bad
+```jsx
✅ This rule is turned on by default.
+
+🚧 An auto-fix is still under development.
+
### What it does
diff --git a/src/docs/guide/usage/linter/rules/unicorn/no-useless-promise-resolve-reject.md b/src/docs/guide/usage/linter/rules/unicorn/no-useless-promise-resolve-reject.md
index 9bcd6d1d167..98edc0f3231 100644
--- a/src/docs/guide/usage/linter/rules/unicorn/no-useless-promise-resolve-reject.md
+++ b/src/docs/guide/usage/linter/rules/unicorn/no-useless-promise-resolve-reject.md
@@ -16,13 +16,17 @@ Disallows returning values wrapped in `Promise.resolve` or `Promise.reject` in a
Wrapping a return value in `Promise.resolve` in an async function or a `Promise#then`/`catch`/`finally` callback is unnecessary as all return values in async functions and promise callback functions are already wrapped in a `Promise`. Similarly, returning an error wrapped in `Promise.reject` is equivalent to simply `throw`ing the error. This is the same for `yield`ing in async generators as well.
-### Example
+### Examples
+
+Examples of **incorrect** code for this rule:
```javascript
-// bad
async () => Promise.resolve(bar);
+```
-// good
+Examples of **correct** code for this rule:
+
+```javascript
async () => bar;
```
diff --git a/src/docs/guide/usage/linter/rules/unicorn/no-useless-switch-case.md b/src/docs/guide/usage/linter/rules/unicorn/no-useless-switch-case.md
index 45c404c72df..fd712b6f709 100644
--- a/src/docs/guide/usage/linter/rules/unicorn/no-useless-switch-case.md
+++ b/src/docs/guide/usage/linter/rules/unicorn/no-useless-switch-case.md
@@ -3,6 +3,9 @@
# unicorn/no-useless-switch-case void 0} />
```
+Examples of **correct** code for this rule:
+
+```jsx
+Children
@@ -38,8 +41,6 @@ React.createElement("div", { children: 'Children' })
React.createElement("div", {}, 'Children')
React.createElement("div", 'Child 1', 'Child 2')
-
-
```
## References
diff --git a/src/docs/guide/usage/linter/rules/react/no-render-return-value.md b/src/docs/guide/usage/linter/rules/react/no-render-return-value.md
index 16b2f30ee38..f6f8b647876 100644
--- a/src/docs/guide/usage/linter/rules/react/no-render-return-value.md
+++ b/src/docs/guide/usage/linter/rules/react/no-render-return-value.md
@@ -14,14 +14,18 @@ This rule will warn you if you try to use the ReactDOM.render() return value.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
vaa inst =ReactDOM.render( ;
+const dom_elem = ;
+```
+
+## References
+
+- [Rule Source](https://github.com/oxc-project/oxc/blob/main/crates/oxc_linter/src/rules/react/self_closing_comp.rs)
diff --git a/src/docs/guide/usage/linter/rules/react/void-dom-elements-no-children.md b/src/docs/guide/usage/linter/rules/react/void-dom-elements-no-children.md
index 60b46c7441b..293527a59c7 100644
--- a/src/docs/guide/usage/linter/rules/react/void-dom-elements-no-children.md
+++ b/src/docs/guide/usage/linter/rules/react/void-dom-elements-no-children.md
@@ -15,16 +15,20 @@ This rule checks that children are not passed to void DOM elements.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
Children
React.createElement('br', undefined, 'Children') React.createElement('br', { children: 'Children' }) React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } }) +``` -// Good +Examples of **correct** code for this rule: + +```jsx;
```
diff --git a/src/docs/guide/usage/linter/rules/typescript/no-confusing-non-null-assertion.md b/src/docs/guide/usage/linter/rules/typescript/no-confusing-non-null-assertion.md
index 86858ab52d2..a0b2e4ac8eb 100644
--- a/src/docs/guide/usage/linter/rules/typescript/no-confusing-non-null-assertion.md
+++ b/src/docs/guide/usage/linter/rules/typescript/no-confusing-non-null-assertion.md
@@ -3,6 +3,9 @@
# typescript/no-confusing-non-null-assertion
✅ This rule is turned on by default.
+
+🚧 An auto-fix is still under development.
+
### What it does
@@ -16,15 +19,19 @@ Disallow `new Array()`.
When using the `Array` constructor with one argument, it's not clear whether the argument is meant to be the length of the array or the only element.
-### Example
+### Examples
+
+Examples of **incorrect** code for this rule:
```javascript
-// bad
const array = new Array(1);
const array = new Array(42);
const array = new Array(foo);
+```
-// good
+Examples of **correct** code for this rule:
+
+```javascript
const array = Array.from({ length: 42 });
const array = [42];
```
diff --git a/src/docs/guide/usage/linter/rules/unicorn/no-new-buffer.md b/src/docs/guide/usage/linter/rules/unicorn/no-new-buffer.md
index d73005c2235..ab3d850bc9b 100644
--- a/src/docs/guide/usage/linter/rules/unicorn/no-new-buffer.md
+++ b/src/docs/guide/usage/linter/rules/unicorn/no-new-buffer.md
@@ -3,6 +3,9 @@
# unicorn/no-new-buffer void 0} onFocus={() => void 0} />
+```
+
## References
- [Rule Source](https://github.com/oxc-project/oxc/blob/main/crates/oxc_linter/src/rules/jsx_a11y/mouse_events_have_key_events.rs)
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/no-access-key.md b/src/docs/guide/usage/linter/rules/jsx_a11y/no-access-key.md
index 3716f3acc71..8d6e57b6e07 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/no-access-key.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/no-access-key.md
@@ -16,11 +16,15 @@ Inconsistencies between keyboard shortcuts and keyboard commands used by screenr
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/no-aria-hidden-on-focusable.md b/src/docs/guide/usage/linter/rules/jsx_a11y/no-aria-hidden-on-focusable.md
index c515ca81133..a2b6314f815 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/no-aria-hidden-on-focusable.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/no-aria-hidden-on-focusable.md
@@ -18,11 +18,15 @@ Enforces that `aria-hidden="true"` is not set on focusable elements.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements.md b/src/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements.md
index 51a49bb401c..d09f34538f3 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/no-distracting-elements.md
@@ -22,16 +22,20 @@ This rule checks for marquee and blink element.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/no-redundant-roles.md b/src/docs/guide/usage/linter/rules/jsx_a11y/no-redundant-roles.md
index 7fdb5c4ca00..1762cd0c114 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/no-redundant-roles.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/no-redundant-roles.md
@@ -19,11 +19,15 @@ Redundant roles can lead to confusion and verbosity in the codebase.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/prefer-tag-over-role.md b/src/docs/guide/usage/linter/rules/jsx_a11y/prefer-tag-over-role.md
index b5d64c0c66d..79795cad392 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/prefer-tag-over-role.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/prefer-tag-over-role.md
@@ -15,11 +15,15 @@ Using semantic HTML tags can improve accessibility and readability of the code.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/role-has-required-aria-props.md b/src/docs/guide/usage/linter/rules/jsx_a11y/role-has-required-aria-props.md
index 72ea193e436..6895fbedbd3 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/role-has-required-aria-props.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/role-has-required-aria-props.md
@@ -17,11 +17,15 @@ semantics for assistive technology.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
```
diff --git a/src/docs/guide/usage/linter/rules/jsx_a11y/role-supports-aria-props.md b/src/docs/guide/usage/linter/rules/jsx_a11y/role-supports-aria-props.md
index d1faff2a0b2..a223c1df4ba 100644
--- a/src/docs/guide/usage/linter/rules/jsx_a11y/role-supports-aria-props.md
+++ b/src/docs/guide/usage/linter/rules/jsx_a11y/role-supports-aria-props.md
@@ -11,15 +11,9 @@ Enforce that elements with explicit or implicit roles defined contain only `aria
### Example
-```jsx
-// Good
-
✅ This rule is turned on by default.
+
+💡 A suggestion is available for this rule.
+
### What it does
@@ -23,7 +26,6 @@ The whole expression can be replaced by zero. This is most likely not the intend
Examples of **incorrect** code for this rule:
```javascript
-// Bad
let x = 1;
let y = x * 0;
```
diff --git a/src/docs/guide/usage/linter/rules/oxc/misrefactored-assign-op.md b/src/docs/guide/usage/linter/rules/oxc/misrefactored-assign-op.md
index 1b5399866ae..fb386a36909 100644
--- a/src/docs/guide/usage/linter/rules/oxc/misrefactored-assign-op.md
+++ b/src/docs/guide/usage/linter/rules/oxc/misrefactored-assign-op.md
@@ -3,6 +3,9 @@
# oxc/misrefactored-assign-op -
-
- Rainbow Trout -
- Brook Trout -
- Lake Trout -
- Rainbow Trout
- Brook Trout @@ -27,6 +21,16 @@ Enforce that elements with explicit or implicit roles defined contain only `aria
-
+
- Rainbow Trout +
- Brook Trout +
- Lake Trout +
<>foo
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
<>foo
foo
```
diff --git a/src/docs/guide/usage/linter/rules/react/jsx-props-no-spread-multi.md b/src/docs/guide/usage/linter/rules/react/jsx-props-no-spread-multi.md
index a696cc14b89..1b6f997c77d 100644
--- a/src/docs/guide/usage/linter/rules/react/jsx-props-no-spread-multi.md
+++ b/src/docs/guide/usage/linter/rules/react/jsx-props-no-spread-multi.md
@@ -22,11 +22,15 @@ Even when that is not the case this will lead to unnecessary computations being
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad
Children
Hello, world.
;
@@ -31,8 +32,11 @@ var Hello = createReactClass({
return Hello, world.
;
},
});
+```
-// Good
+Examples of **correct** code for this rule:
+
+```jsx
var Hello = createReactClass({
componentDidMount: function () {
var component = this.hello;
diff --git a/src/docs/guide/usage/linter/rules/react/no-unknown-property.md b/src/docs/guide/usage/linter/rules/react/no-unknown-property.md
index 3ecf6230825..8e92b7b3f72 100644
--- a/src/docs/guide/usage/linter/rules/react/no-unknown-property.md
+++ b/src/docs/guide/usage/linter/rules/react/no-unknown-property.md
@@ -3,6 +3,9 @@
# react/no-unknown-property Children
React.createElement('br', undefined, 'Children') React.createElement('br', { children: 'Children' }) React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } }) +``` -// Good +Examples of **correct** code for this rule: + +```jsx
Children
diff --git a/src/docs/guide/usage/linter/rules/react_perf/jsx-no-jsx-as-prop.md b/src/docs/guide/usage/linter/rules/react_perf/jsx-no-jsx-as-prop.md
index c81035b6bfc..602d3def802 100644
--- a/src/docs/guide/usage/linter/rules/react_perf/jsx-no-jsx-as-prop.md
+++ b/src/docs/guide/usage/linter/rules/react_perf/jsx-no-jsx-as-prop.md
@@ -7,17 +7,30 @@
### What it does
-Prevent JSX that are local to the current method from being used as values of JSX props
+Prevent JSX elements that are local to the current method from being
+used as values of JSX props.
+
+### Why is this bad?
+
+Using locally defined JSX elements as values for props can lead to
+unintentional re-renders and performance issues. Every time the parent
+renders, a new instance of the JSX element is created, causing unnecessary
+re-renders of child components. This also leads to harder-to-maintain code
+as the component's props are not passed consistently.
### Example
+Examples of **incorrect** code for this rule:
+
```jsx
-// Bad