Skip to content

Commit

Permalink
[Docs] Add config notice to rule docs
Browse files Browse the repository at this point in the history
  • Loading branch information
bmish committed Aug 23, 2022
1 parent 6207a04 commit 1656707
Show file tree
Hide file tree
Showing 99 changed files with 227 additions and 0 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Expand Up @@ -41,11 +41,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
* [Docs] Standardize deprecated rule notice ([#3364][] @bmish)
* [Docs] Fix typos ([#3366][] @bmish)
* [Docs] Add markdownlint for documentation formatting consistency ([#3367][] @bmish)
* [Docs] Add config notice to rule docs ([#3362][] @bmish)

[#3367]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3367
[#3366]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3366
[#3365]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3365
[#3364]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3364
[#3362]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3362
[#3361]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3361
[#3359]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3359
[#3355]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3355
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/boolean-prop-naming.md
@@ -1,5 +1,7 @@
# Enforces consistent naming for boolean props (react/boolean-prop-naming)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

Allows you to enforce a consistent naming pattern for props which expect a boolean value.

> **Note**: You can provide types in runtime types using [PropTypes] and/or
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/button-has-type.md
@@ -1,5 +1,7 @@
# Disallow usage of `button` elements without an explicit `type` attribute (react/button-has-type)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

The default value of `type` attribute for `button` HTML element is `"submit"` which is often not the desired behavior and may lead to unexpected page reloads.
This rules enforces an explicit `type` attribute for all the `button` elements and checks that its value is valid per spec (i.e., is one of `"button"`, `"submit"`, and `"reset"`).

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/default-props-match-prop-types.md
@@ -1,5 +1,7 @@
# Enforce all defaultProps have a corresponding non-required PropType (react/default-props-match-prop-types)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

This rule aims to ensure that any prop in `defaultProps` has a non-required type
definition.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/destructuring-assignment.md
@@ -1,5 +1,7 @@
# Enforce consistent usage of destructuring assignment of props, state, and context (react/destructuring-assignment)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Rule can be set to either of `always` or `never`;
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/display-name.md
@@ -1,5 +1,7 @@
# Disallow missing displayName in a React component definition (react/display-name)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`.

DisplayName allows you to name your component. This name is used by React in debugging messages.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/forbid-component-props.md
@@ -1,5 +1,7 @@
# Disallow certain props on components (react/forbid-component-props)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

By default this rule prevents passing of [props that add lots of complexity](https://medium.com/brigade-engineering/don-t-pass-css-classes-between-components-e9f7ab192785) (`className`, `style`) to Components. This rule only applies to Components (e.g. `<Foo />`) and not DOM nodes (e.g. `<div />`). The list of forbidden props can be customized with the `forbid` option.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/forbid-dom-props.md
@@ -1,5 +1,7 @@
# Disallow certain props on DOM Nodes (react/forbid-dom-props)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

This rule prevents passing of props to elements. This rule only applies to DOM Nodes (e.g. `<div />`) and not Components (e.g. `<Component />`).
The list of forbidden props can be customized with the `forbid` option.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/forbid-elements.md
@@ -1,5 +1,7 @@
# Disallow certain elements (react/forbid-elements)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

You may want to forbid usage of certain elements in favor of others, (e.g. forbid all `<div />` and use `<Box />` instead). This rule allows you to configure a list of forbidden elements and to specify their desired replacements.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/forbid-foreign-prop-types.md
@@ -1,5 +1,7 @@
# Disallow using another component's propTypes (react/forbid-foreign-prop-types)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

This rule forbids using another component's prop types unless they are explicitly imported/exported. This allows people who want to use [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) to remove propTypes from their components in production builds, to do so safely.

In order to ensure that imports are explicitly exported it is recommended to use the ["named" rule in eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import/blob/HEAD/docs/rules/named.md) in conjunction with this rule.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/forbid-prop-types.md
@@ -1,5 +1,7 @@
# Disallow certain propTypes (react/forbid-prop-types)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

By default this rule prevents vague prop types with more specific alternatives available (`any`, `array`, `object`), but any prop type can be disabled if desired. The defaults are chosen because they have obvious replacements. `any` should be replaced with, well, anything. `array` and `object` can be replaced with `arrayOf` and `shape`, respectively.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/function-component-definition.md
@@ -1,5 +1,7 @@
# Enforce a specific function type for function components (react/function-component-definition)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

This option enforces a specific function type for function components.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/hook-use-state.md
@@ -1,5 +1,7 @@
# Ensure destructuring and symmetric naming of useState hook value and setter variables (react/hook-use-state)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

💡 This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/iframe-missing-sandbox.md
@@ -1,5 +1,7 @@
# Enforce sandbox attribute on iframe elements (react/iframe-missing-sandbox)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

The sandbox attribute enables an extra set of restrictions for the content in the iframe. Using sandbox attribute is considered a good security practice.

See <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox>
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-boolean-value.md
@@ -1,5 +1,7 @@
# Enforce boolean attributes notation in JSX (react/jsx-boolean-value)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

[When using a boolean attribute in JSX](https://facebook.github.io/react/docs/jsx-in-depth.html#boolean-attributes), you can set the attribute value to `true` or omit the value.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-child-element-spacing.md
@@ -1,5 +1,7 @@
# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (react/jsx-child-element-spacing)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

## Rule Details

Since React removes extraneous new lines between elements when possible, it is possible to end up with inline elements that are not rendered with spaces between them and adjacent text. This is often indicative of an error, so this rule attempts to detect JSX markup with ambiguous spacing.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-closing-bracket-location.md
@@ -1,5 +1,7 @@
# Enforce closing bracket location in JSX (react/jsx-closing-bracket-location)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Enforce the closing bracket location for JSX multiline elements.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-closing-tag-location.md
@@ -1,5 +1,7 @@
# Enforce closing tag location for multiline JSX (react/jsx-closing-tag-location)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Enforce the closing tag location for multiline JSX elements.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-curly-brace-presence.md
@@ -1,5 +1,7 @@
# Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes (react/jsx-curly-brace-presence)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

This rule allows you to enforce curly braces or disallow unnecessary curly braces in JSX props and/or children.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-curly-newline.md
@@ -1,5 +1,7 @@
# Enforce consistent linebreaks in curly braces in JSX attributes and expressions (react/jsx-curly-newline)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Many style guides require or disallow newlines inside of jsx curly expressions.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-curly-spacing.md
@@ -1,5 +1,7 @@
# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (react/jsx-curly-spacing)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-equals-spacing.md
@@ -1,5 +1,7 @@
# Enforce or disallow spaces around equal signs in JSX attributes (react/jsx-equals-spacing)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Some style guides require or disallow spaces around equal signs.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-filename-extension.md
@@ -1,5 +1,7 @@
# Disallow file extensions that may contain JSX (react/jsx-filename-extension)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

## Rule Details

Examples of **incorrect** code for this rule:
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-first-prop-new-line.md
@@ -1,5 +1,7 @@
# Enforce proper position of the first property in JSX (react/jsx-first-prop-new-line)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Ensure correct position of the first property.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-fragments.md
@@ -1,5 +1,7 @@
# Enforce shorthand or standard form for React fragments (react/jsx-fragments)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

In JSX, a React [fragment] is created either with `<React.Fragment>...</React.Fragment>`, or, using the shorthand syntax, `<>...</>`.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-handler-names.md
@@ -1,5 +1,7 @@
# Enforce event handler naming conventions in JSX (react/jsx-handler-names)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

Ensures that any component or prop methods used to handle events are correctly prefixed.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-indent-props.md
@@ -1,5 +1,7 @@
# Enforce props indentation in JSX (react/jsx-indent-props)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

This option validates a specific indentation style for props.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-indent.md
@@ -1,5 +1,7 @@
# Enforce JSX indentation (react/jsx-indent)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

This option validates a specific indentation style for JSX.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-key.md
@@ -1,5 +1,7 @@
# Disallow missing `key` props in iterators/collection literals (react/jsx-key)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`.

Warn if an element that likely requires a `key` prop--namely, one present in an
array literal or an arrow function expression.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-max-depth.md
@@ -1,5 +1,7 @@
# Enforce JSX maximum depth (react/jsx-max-depth)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

This option validates a specific depth for JSX.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-max-props-per-line.md
@@ -1,5 +1,7 @@
# Enforce maximum of props on a single line in JSX (react/jsx-max-props-per-line)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Limiting the maximum of props on a single line can improve readability.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-newline.md
@@ -1,5 +1,7 @@
# Require or prevent a new line after jsx elements and expressions. (react/jsx-newline)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-bind.md
@@ -1,5 +1,7 @@
# Disallow `.bind()` or arrow functions in JSX props (react/jsx-no-bind)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.

Note that this behavior is different for `ref` props, which is a special case in React that **does not** cause re-renders when a brand new function is passed. See [`ignore-refs`](#ignorerefs) below for more information.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-comment-textnodes.md
@@ -1,5 +1,7 @@
# Disallow comments from being inserted as text nodes (react/jsx-no-comment-textnodes)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`.

This rule prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally
injected as a text node in JSX statements.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-constructed-context-values.md
@@ -1,5 +1,7 @@
# Disallows JSX context provider values from taking values that will cause needless rerenders (react/jsx-no-constructed-context-values)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

This rule prevents non-stable values (i.e. object identities) from being used as a value for `Context.Provider`.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-duplicate-props.md
@@ -1,5 +1,7 @@
# Disallow duplicate properties in JSX (react/jsx-no-duplicate-props)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`.

Creating JSX elements with duplicate props can cause unexpected behavior in your application.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-leaked-render.md
@@ -1,5 +1,7 @@
# Disallow problematic leaked values from being rendered (react/jsx-no-leaked-render)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-literals.md
@@ -1,5 +1,7 @@
# Disallow usage of string literals in JSX (react/jsx-no-literals)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

There are a few scenarios where you want to avoid string literals in JSX. You may want to enforce consistency, reduce syntax highlighting issues, or ensure that strings are part of a translation system.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-script-url.md
@@ -1,5 +1,7 @@
# Disallow usage of `javascript:` URLs (react/jsx-no-script-url)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`.

**In React 16.9** any URLs starting with `javascript:` [scheme](https://wiki.whatwg.org/wiki/URL_schemes#javascript:_URLs) log a warning.
React considers the pattern as a dangerous attack surface, see [details](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls).
**In a future major release**, React will throw an error if it encounters a `javascript:` URL.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-target-blank.md
@@ -1,5 +1,7 @@
# Disallow `target="_blank"` attribute without `rel="noreferrer"` (react/jsx-no-target-blank)

💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`.

🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.

When creating a JSX element that has an `a` tag, it is often desired to have the link open in a new tab using the `target='_blank'` attribute. Using this attribute unaccompanied by `rel='noreferrer'`, however, is a severe security vulnerability (see [noreferrer docs](https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer) and [noopener docs](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) for more details)
Expand Down

0 comments on commit 1656707

Please sign in to comment.