Skip to content

Commit

Permalink
[Docs] Add recommended or deprecated notices to rule docs
Browse files Browse the repository at this point in the history
  • Loading branch information
bmish committed Aug 19, 2022
1 parent 65ad721 commit 569ead7
Show file tree
Hide file tree
Showing 23 changed files with 57 additions and 1 deletion.
2 changes: 2 additions & 0 deletions docs/rules/display-name.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow missing displayName in a React component definition (react/display-name)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

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/jsx-key.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow missing `key` props in iterators/collection literals (react/jsx-key)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

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-no-comment-textnodes.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow comments from being inserted as text nodes (react/jsx-no-comment-textnodes)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

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-duplicate-props.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow duplicate properties in JSX (react/jsx-no-duplicate-props)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

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-target-blank.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow `target="_blank"` attribute without `rel="noreferrer"` (react/jsx-no-target-blank)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

🔧 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
2 changes: 2 additions & 0 deletions docs/rules/jsx-no-undef.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow undeclared variables in JSX (react/jsx-no-undef)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

This rule helps locate potential ReferenceErrors resulting from misspellings or missing components.

## Rule Details
Expand Down
4 changes: 3 additions & 1 deletion docs/rules/jsx-space-before-closing.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# Enforce spacing before closing bracket in JSX (react/jsx-space-before-closing)

❌ This rule is deprecated.

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

**Deprecation notice**: This rule is deprecated. Please use the `"beforeSelfClosing"` option of the [jsx-tag-spacing](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) rule instead.
Please use the `"beforeSelfClosing"` option of the [jsx-tag-spacing](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) rule instead of this rule.

Enforce or forbid spaces before the closing bracket of self-closing JSX elements.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-uses-react.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow React to be incorrectly marked as unused (react/jsx-uses-react)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

JSX expands to a call to `React.createElement`, a file which includes `React`
but only uses JSX should consider the `React` variable as used.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/jsx-uses-vars.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow variables used in JSX to be incorrectly marked as unused (react/jsx-uses-vars)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

Since 0.17.0 the `eslint` `no-unused-vars` rule does not detect variables used in JSX ([see details](https://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling)). This rule will find variables used in JSX and mark them as used.

This rule only has an effect when the `no-unused-vars` rule is enabled.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-children-prop.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow passing of children as props (react/no-children-prop)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

Children should always be actual children, not passed in as a prop.

When using JSX, the children should be nested between the opening and closing
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-danger-with-children.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow when a DOM element is using both children and dangerouslySetInnerHTML (react/no-danger-with-children)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

This rule helps prevent problems caused by using children and the dangerouslySetInnerHTML prop at the same time.
React will throw a warning if this rule is ignored.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-deprecated.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow usage of deprecated methods (react/no-deprecated)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

Several methods are deprecated between React versions. This rule will warn you if you try to use a deprecated method. Use the [shared settings](/README.md#configuration) to specify the React version.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-direct-mutation-state.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow direct mutation of this.state (react/no-direct-mutation-state)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace
the mutation you made. Treat `this.state` as if it were immutable.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-find-dom-node.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow usage of findDOMNode (react/no-find-dom-node)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

Facebook will eventually deprecate `findDOMNode` as it blocks certain improvements in React in the future.

It is recommended to use callback refs instead. See [Dan Abramov comments and examples](https://github.com/jsx-eslint/eslint-plugin-react/issues/678#issue-165177220).
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-is-mounted.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow usage of isMounted (react/no-is-mounted)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

[`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and it is on its way to being officially deprecated.

[anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-render-return-value.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow usage of the return value of ReactDOM.render (react/no-render-return-value)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) to the root element.
Source: [ReactDOM documentation](https://facebook.github.io/react/docs/react-dom.html#render)
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-string-refs.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow using string references (react/no-string-refs)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

Currently, two ways are supported by React to refer to components. The first way, providing a string identifier, is now considered legacy in the official documentation. The documentation now prefers a second method -- referring to components by setting a property on the `this` object in the reference callback.

## Rule Details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-unescaped-entities.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow unescaped HTML entities from appearing in markup (react/no-unescaped-entities)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

This rule prevents characters that you may have meant as JSX escape characters
from being accidentally injected as a text node in JSX statements.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-unknown-property.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow usage of unknown DOM property (react/no-unknown-property)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

🔧 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 all DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/prop-types.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow missing props validation in a React component definition (react/prop-types)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

Defining types for component props improves reusability of your components by
validating received data. It can warn other developers if they make a mistake while reusing the component with improper data type.

Expand Down
2 changes: 2 additions & 0 deletions docs/rules/react-in-jsx-scope.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Disallow missing React when using JSX (react/react-in-jsx-scope)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

When using JSX, `<a />` expands to `React.createElement("a")`. Therefore the `React` variable must be in scope.

If you are using the @jsx pragma this rule will check the designated variable and not the `React` one.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/require-render-return.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Enforce ES5 or ES6 class for returning value in render function (react/require-render-return)

✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.

When writing the `render` method in a component it is easy to forget to return the JSX content. This rule will warn if the `return` statement is missing.

## Rule Details
Expand Down
12 changes: 12 additions & 0 deletions tests/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ describe('all rule files should be exported by the plugin', () => {

describe('rule documentation files have the correct content', () => {
const MESSAGES = {
deprecated: '❌ This rule is deprecated.',
fixable: '🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.',
hasSuggestions: '💡 This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).',
recommended: '✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.',
};

ruleFiles.forEach((ruleName) => {
Expand All @@ -42,6 +44,16 @@ describe('rule documentation files have the correct content', () => {
// Decide which notices should be shown at the top of the doc.
const expectedNotices = [];
const unexpectedNotices = [];
if (rule.meta.docs.recommended) {
expectedNotices.push('recommended');
} else {
unexpectedNotices.push('recommended');
}
if (rule.meta.deprecated) {
expectedNotices.push('deprecated');
} else {
unexpectedNotices.push('deprecated');
}
if (rule.meta.fixable) {
expectedNotices.push('fixable');
} else {
Expand Down

0 comments on commit 569ead7

Please sign in to comment.