[Docs] Add markdownlint for documentation formatting consistency

.markdownlint.json

@@ -0,0 +1,3 @@
+{
+  "line-length": false
+}

.markdownlintignore

@@ -0,0 +1,3 @@
+CHANGELOG.md
+LICENSE
+node_modules

README.md

@@ -1,4 +1,6 @@
+<!-- markdownlint-disable-next-line MD033-->
 # `eslint-plugin-react` <sup>[![Version Badge][npm-version-svg]][package-url]</sup>
+
 ===================
 
 [![github actions][actions-image]][actions-url]
@@ -8,16 +10,15 @@
 
 React specific linting rules for `eslint`
 
-# Installation
+## Installation
 
 ```sh
-$ npm install eslint eslint-plugin-react --save-dev
+npm install eslint eslint-plugin-react --save-dev
 ```
 
 It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
 
-# Configuration
-
+## Configuration
 
 Use [our preset](#recommended) to get reasonable defaults:
 
@@ -109,7 +110,7 @@ Enable the rules that you would like to use.
   }
 ```
 
-# List of supported rules
+## List of supported rules
 
 ✔: Enabled in the [`recommended`](#recommended) configuration.\
 🔧: Fixable with [`eslint --fix`](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems).\
@@ -179,7 +180,7 @@ Enable the rules that you would like to use.
 |  |  |  | [react/void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md) | Disallow void DOM elements (e.g. `<img />`, `<br />`) from receiving children |
 <!-- AUTO-GENERATED-CONTENT:END -->
 
-## JSX-specific rules
+### JSX-specific rules
 
 <!-- AUTO-GENERATED-CONTENT:START (JSX_RULES) -->
 | ✔ | 🔧 | 💡 | Rule | Description |
@@ -225,15 +226,15 @@ Enable the rules that you would like to use.
 |  | 🔧 |  | [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Disallow missing parentheses around multiline JSX |
 <!-- AUTO-GENERATED-CONTENT:END -->
 
-## Other useful plugins
+### Other useful plugins
 
 - Rules of Hooks: [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks)
 - JSX accessibility: [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y)
 - React Native: [eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native)
 
-# Shareable configurations
+## Shareable configurations
 
-## Recommended
+### Recommended
 
 This plugin exports a `recommended` configuration that enforces React good practices.
 
@@ -247,7 +248,7 @@ To enable this configuration use the `extends` property in your `.eslintrc` conf
 
 See [`eslint` documentation](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files) for more information about extending configuration files.
 
-## All
+### All
 
 This plugin also exports an `all` configuration that includes every available rule.
 This pairs well with the `eslint:all` rule.
@@ -263,11 +264,10 @@ This pairs well with the `eslint:all` rule.
 
 **Note**: These configurations will import `eslint-plugin-react` and enable JSX in [parser options](https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options).
 
-# License
+## License
 
 `eslint-plugin-react` is licensed under the [MIT License](https://opensource.org/licenses/mit-license.php).
 
-
 [npm-url]: https://npmjs.org/package/eslint-plugin-react
 [npm-image]: https://img.shields.io/npm/v/eslint-plugin-react.svg
 

SECURITY.md

@@ -9,7 +9,6 @@ This is the list of versions of `eslint-plugin-react` which are currently being
 | 7.x      | :white_check_mark: |
 | < 7.x    | :x:                |
 
-
 ## Reporting a Vulnerability
 
 To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security). Tidelift will coordinate the fix and disclosure.

docs/rules/boolean-prop-naming.md

@@ -36,6 +36,7 @@ var Hello = createReactClass({
   render: function() { return <div />; };
 });
 ```
+
 ```jsx
 type Props = {
   isEnabled: boolean
@@ -94,8 +95,8 @@ The custom message to display upon failure to match the rule. This overrides the
 
 If you choose to use a custom message, you have access to two template variables.
 
-* `propName` – the name of the prop that does not match the pattern
-* `pattern` – the pattern against which all prop names are tested
+- `propName` – the name of the prop that does not match the pattern
+- `pattern` – the pattern against which all prop names are tested
 
 For example, if a prop is named `something`, and if the rule's pattern is set to `"^(is|has)[A-Z]([A-Za-z0-9]?)+"`, you could set the custom message as follows:
 
@@ -105,7 +106,7 @@ message: 'It is better if your prop ({{ propName }}) matches this pattern: ({{ p
 
 And the failure would look like so:
 
-```
+```plaintext
 It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+)
 ```
 

docs/rules/default-props-match-prop-types.md

@@ -192,7 +192,7 @@ If you don't care about stray `defaultsProps` in your components, you can disabl
 
 - [require-default-props](./require-default-props.md)
 
-# Resources
+## Resources
 
 - [Official React documentation on defaultProps](https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values)
 

docs/rules/destructuring-assignment.md

@@ -3,6 +3,7 @@
 🔧 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`;
+
 ```js
 "react/destructuring-assignment": [<enabled>, 'always']
 ```

docs/rules/iframe-missing-sandbox.md

@@ -2,7 +2,7 @@
 
 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
+See <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox>
 
 ## Rule Details
 

docs/rules/jsx-curly-brace-presence.md

@@ -32,7 +32,7 @@ or alternatively
 ...
 ```
 
-### Valid options for <string>
+### Valid options for `<string>`
 
 They are `always`, `never` and `ignore` for checking on JSX props and children.
 
@@ -45,7 +45,7 @@ If passed in the option to fix, this is how a style violation will get fixed
 * `always`: wrap a JSX attribute in curly braces/JSX expression and/or a JSX child the same way but also with double quotes
 * `never`: get rid of curly braces from a JSX attribute and/or a JSX child
 
-- All fixing operations use double quotes.
+* All fixing operations use double quotes.
 
 For examples:
 
@@ -78,6 +78,7 @@ They can be fixed to:
 ```
 
 Examples of **incorrect** code for this rule, when configured with `{ props: "always", children: "always", "propElementValues": "always" }`:
+
 ```jsx
 <App prop=<div /> />;
 ```
@@ -89,6 +90,7 @@ They can be fixed to:
 ```
 
 Examples of **incorrect** code for this rule, when configured with `{ props: "never", children: "never", "propElementValues": "never" }`:
+
 ```jsx
 <App prop={<div />} />;
 ```
@@ -115,6 +117,7 @@ Examples of **incorrect** code for this rule, when configured with `"always"`:
 ```
 
 They can be fixed to:
+
 ```jsx
 <App>{"Hello world"}</App>;
 <App prop={"Hello world"} attr={"foo"}>{"Hello world"}</App>;
@@ -152,7 +155,6 @@ will be warned and fixed to:
 
 For example:
 
-
 ```jsx
 <App prop='Hello "foo" world'>Hello 'foo' "bar" world</App>;
 ```

docs/rules/jsx-curly-newline.md

@@ -18,6 +18,7 @@ This rule accepts either an object option:
   singleline: "consistent" | "forbid" | "require", // default to 'consistent'
 }
 ```
+
 Option `multiline` takes effect when the jsx expression inside the curlies occupies multiple lines.
 
 Option `singleline` takes effect when the jsx expression inside the curlies occupies a single line.
@@ -143,7 +144,6 @@ Examples of **correct** code for this rule:
 </div>
 ```
 
-
 ## When Not To Use It
 
 You can turn this rule off if you are not concerned with the consistency of padding linebreaks inside of JSX attributes or expressions.

docs/rules/jsx-fragments.md

@@ -2,7 +2,7 @@
 
 🔧 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, `<>...</>`.
+In JSX, a React [fragment] is created either with `<React.Fragment>...</React.Fragment>`, or, using the shorthand syntax, `<>...</>`.
 
 ## Rule Details
 
@@ -58,6 +58,6 @@ Examples of **correct** code for this rule:
 <React.Fragment key="key"><Foo /></React.Fragment>
 ```
 
-[fragments]: https://reactjs.org/docs/fragments.html
+[fragment]: https://reactjs.org/docs/fragments.html
 [shared_settings]: /README.md#configuration
 [short_syntax]: https://reactjs.org/docs/fragments.html#short-syntax

docs/rules/jsx-indent-props.md

@@ -34,7 +34,6 @@ The indent mode can be `"tab"` for tab-based indentation, a positive number for
 Note that using the `"first"` option allows very inconsistent indentation unless you also enable a rule that enforces the position of the first prop.
 If the second parameter is an object, it can be used to specify the indent mode as well as the option `ignoreTernaryOperator`, which causes the indent level not to be increased by a `?` or `:` operator (default is `false`).
 
-
 ```js
 ...
 "react/jsx-indent-props": [<enabled>, 'tab'|<number>|'first'|<object>]

docs/rules/jsx-max-props-per-line.md

@@ -77,16 +77,19 @@ Maximum can be specified as object `{ single: 1, multi: 1 }` to specify maximum
  _when only applied if `maximum` is specified as number._
 
 Possible values:
+
 - `always` (default) - Always check for max props per line.
 - `multiline` - Only check for max props per line when jsx tag spans multiple lines.
 
 Examples of **incorrect** code for this rule:
+
 ```jsx
 // [1, { "when": "always" }]
 <Hello firstName="John" lastName="Smith" />
 ```
 
 Examples of **correct** code for this rule:
+
 ```jsx
 // [1, { "when": "multiline" }]
 <Hello firstName="John" lastName="Smith" />

docs/rules/jsx-newline.md

@@ -7,6 +7,7 @@
 This is a stylistic rule intended to make JSX code more readable by requiring or preventing lines between adjacent JSX elements and expressions.
 
 ## Rule Options
+
 ```json
 ...
 "react/jsx-newline": [<enabled>, { "prevent": <boolean>, "allowMultilines": <boolean> }]
@@ -75,7 +76,6 @@ Examples of **correct** code for this rule, when configured with `{ "prevent": f
 
 Examples of **incorrect** code for this rule, when configured with `{ "prevent": true }`:
 
-
 ```jsx
 <div>
   <Button>{data.label}</Button>

docs/rules/jsx-no-bind.md

@@ -11,15 +11,18 @@ Examples of **incorrect** code for this rule:
 ```jsx
 <Foo onClick={this._handleClick.bind(this)}></Foo>
 ```
+
 ```jsx
 <Foo onClick={() => console.log('Hello!')}></Foo>
 ```
+
 ```jsx
 function onClick() { console.log('Hello!'); }
 <Foo onClick={onClick} />
 ```
 
 Examples of **correct** code for this rule:
+
 ```jsx
 <Foo onClick={this._handleClick}></Foo>
 ```

docs/rules/jsx-no-constructed-context-values.md

@@ -12,7 +12,7 @@ If you _expect_ the context to be rerun on each render, then consider adding a c
 
 Examples of **incorrect** code for this rule:
 
-```
+```jsx
 return (
     <SomeContext.Provider value={{foo: 'bar'}}>
         ...
@@ -22,7 +22,7 @@ return (
 
 Examples of **correct** code for this rule:
 
-```
+```jsx
 const foo = useMemo(() => ({foo: 'bar'}), []);
 return (
     <SomeContext.Provider value={foo}>
@@ -32,6 +32,7 @@ return (
 ```
 
 ## Legitimate Uses
-React Context, and all its child nodes and Consumers are rerendered whenever the value prop changes. Because each Javascript object carries its own *identity*, things like object expressions (`{foo: 'bar'}`) or function expressions get a new identity on every run through the component. This makes the context think it has gotten a new object and can cause needless rerenders and unintended consequences.
+
+React Context, and all its child nodes and Consumers are rerendered whenever the value prop changes. Because each Javascript object carries its own _identity_, things like object expressions (`{foo: 'bar'}`) or function expressions get a new identity on every run through the component. This makes the context think it has gotten a new object and can cause needless rerenders and unintended consequences.
 
 This can be a pretty large performance hit because not only will it cause the context providers and consumers to rerender with all the elements in its subtree, the processing for the tree scan react does to render the provider and find consumers is also wasted.

docs/rules/jsx-no-leaked-render.md

@@ -4,7 +4,6 @@
 
 Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering.
 
-
 ## Rule Details
 
 This rule aims to prevent dangerous leaked values from being rendered since they can cause unexpected values reaching the final DOM or even crashing your render method.
@@ -32,6 +31,7 @@ const Example = () => {
 ```
 
 This can be avoided by:
+
 - coercing the conditional to a boolean: `{!!someValue && <Something />}`
 - transforming the binary expression into a ternary expression which returns `null` for falsy values: `{someValue ? <Something /> : null}`
 
@@ -144,9 +144,11 @@ const Component = ({ elements }) => {
 The supported options are:
 
 ### `validStrategies`
+
 An array containing `"coerce"`, `"ternary"`, or both (default: `["ternary", "coerce"]`) - Decide which strategies are considered valid to prevent leaked renders (at least 1 is required). The "coerce" option will transform the conditional of the JSX expression to a boolean. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values. The first option from the array will be the strategy used when autofixing, so the order of the values matters.
 
 It can be set like:
+
 ```json5
 {
   // ...
@@ -158,6 +160,7 @@ It can be set like:
 Assuming the following options: `{ "validStrategies": ["ternary"] }`
 
 Examples of **incorrect** code for this rule, with the above configuration:
+
 ```jsx
 const Component = ({ count, title }) => {
   return <div>{count && title}</div>
@@ -171,6 +174,7 @@ const Component = ({ count, title }) => {
 ```
 
 Examples of **correct** code for this rule, with the above configuration:
+
 ```jsx
 const Component = ({ count, title }) => {
   return <div>{count ? title : null}</div>
@@ -180,6 +184,7 @@ const Component = ({ count, title }) => {
 Assuming the following options: `{ "validStrategies": ["coerce"] }`
 
 Examples of **incorrect** code for this rule, with the above configuration:
+
 ```jsx
 const Component = ({ count, title }) => {
   return <div>{count && title}</div>
@@ -193,6 +198,7 @@ const Component = ({ count, title }) => {
 ```
 
 Examples of **correct** code for this rule, with the above configuration:
+
 ```jsx
 const Component = ({ count, title }) => {
   return <div>{!!count && title}</div>