diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000000..8a2cb35709 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,6 @@ +{ + "line-length": false, + "no-inline-html": false, + "no-hard-tabs": { "spaces_per_tab": 2 }, + "ul-style": { "style": "dash" } +} diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 0000000000..bdaede90d0 --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1,3 @@ +CHANGELOG.md +LICENSE +node_modules diff --git a/README.md b/README.md index 49416de595..a7c98e5739 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # `eslint-plugin-react` [![Version Badge][npm-version-svg]][package-url] + =================== [![github actions][actions-image]][actions-url] @@ -8,16 +9,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 +109,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 +179,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. ``, `
`) from receiving children | -## JSX-specific rules +### JSX-specific rules | ✔ | 🔧 | 💡 | Rule | Description | @@ -225,15 +225,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 | -## 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 +247,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 +263,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 diff --git a/SECURITY.md b/SECURITY.md index 8ea2512832..5f02cd3af8 100644 --- a/SECURITY.md +++ b/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. diff --git a/docs/rules/boolean-prop-naming.md b/docs/rules/boolean-prop-naming.md index 3c043ca9c0..ff642f7abc 100644 --- a/docs/rules/boolean-prop-naming.md +++ b/docs/rules/boolean-prop-naming.md @@ -36,6 +36,7 @@ var Hello = createReactClass({ render: function() { return
; }; }); ``` + ```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]?)+) ``` diff --git a/docs/rules/default-props-match-prop-types.md b/docs/rules/default-props-match-prop-types.md index c3b8bd6400..2992221e2a 100644 --- a/docs/rules/default-props-match-prop-types.md +++ b/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) diff --git a/docs/rules/destructuring-assignment.md b/docs/rules/destructuring-assignment.md index efbe0d9af6..a6b516d31f 100644 --- a/docs/rules/destructuring-assignment.md +++ b/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": [, 'always'] ``` diff --git a/docs/rules/display-name.md b/docs/rules/display-name.md index 97aa68bdeb..0c7d18f03e 100644 --- a/docs/rules/display-name.md +++ b/docs/rules/display-name.md @@ -130,6 +130,6 @@ For this rule to work we need to detect React components, this could be very har For now we should detect components created with: -* `createReactClass()` -* an ES6 class that inherit from `React.Component` or `Component` -* a stateless function that return JSX or the result of a `React.createElement` call. +- `createReactClass()` +- an ES6 class that inherit from `React.Component` or `Component` +- a stateless function that return JSX or the result of a `React.createElement` call. diff --git a/docs/rules/forbid-elements.md b/docs/rules/forbid-elements.md index 99448effa1..4eaae2468d 100644 --- a/docs/rules/forbid-elements.md +++ b/docs/rules/forbid-elements.md @@ -18,8 +18,8 @@ This rule checks all JSX elements and `React.createElement` calls and verifies t An array of strings and/or objects. An object in this array may have the following properties: -* `element` (required): the name of the forbidden element (e.g. `'button'`, `'Modal'`) -* `message`: additional message that gets reported +- `element` (required): the name of the forbidden element (e.g. `'button'`, `'Modal'`) +- `message`: additional message that gets reported A string item in the array is a shorthand for `{ element: string }`. diff --git a/docs/rules/iframe-missing-sandbox.md b/docs/rules/iframe-missing-sandbox.md index f21f98ad9f..2f5fad8b58 100644 --- a/docs/rules/iframe-missing-sandbox.md +++ b/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 ## Rule Details diff --git a/docs/rules/jsx-closing-bracket-location.md b/docs/rules/jsx-closing-bracket-location.md index 988640e3f5..c75131b8ff 100644 --- a/docs/rules/jsx-closing-bracket-location.md +++ b/docs/rules/jsx-closing-bracket-location.md @@ -56,10 +56,10 @@ The second form allows you to distinguish between non-empty and self-closing tag Enforced location for the closing bracket. -* `tag-aligned`: must be aligned with the opening tag. -* `line-aligned`: must be aligned with the line containing the opening tag. -* `after-props`: must be placed right after the last prop. -* `props-aligned`: must be aligned with the last prop. +- `tag-aligned`: must be aligned with the opening tag. +- `line-aligned`: must be aligned with the line containing the opening tag. +- `after-props`: must be placed right after the last prop. +- `props-aligned`: must be aligned with the last prop. Defaults to `tag-aligned`. diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md index b4d7bff0aa..40df72b07c 100644 --- a/docs/rules/jsx-curly-brace-presence.md +++ b/docs/rules/jsx-curly-brace-presence.md @@ -32,18 +32,18 @@ or alternatively ... ``` -### Valid options for +### Valid options for `` They are `always`, `never` and `ignore` for checking on JSX props and children. -* `always`: always enforce curly braces inside JSX props, children, and/or JSX prop values that are JSX Elements -* `never`: never allow unnecessary curly braces inside JSX props, children, and/or JSX prop values that are JSX Elements -* `ignore`: ignore the rule for JSX props, children, and/or JSX prop values that are JSX Elements +- `always`: always enforce curly braces inside JSX props, children, and/or JSX prop values that are JSX Elements +- `never`: never allow unnecessary curly braces inside JSX props, children, and/or JSX prop values that are JSX Elements +- `ignore`: ignore the rule for JSX props, children, and/or JSX prop values that are JSX Elements 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 +- `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. @@ -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 />; ``` @@ -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 } />; ``` @@ -115,6 +117,7 @@ Examples of **incorrect** code for this rule, when configured with `"always"`: ``` They can be fixed to: + ```jsx {"Hello world"}; {"Hello world"}; @@ -136,7 +139,7 @@ It can fixed to: The fix also deals with template literals, strings with quotes, and strings with escapes characters. -* If the rule is set to get rid of unnecessary curly braces and the template literal inside a JSX expression has no expression, it will throw a warning and be fixed with double quotes. For example: +- If the rule is set to get rid of unnecessary curly braces and the template literal inside a JSX expression has no expression, it will throw a warning and be fixed with double quotes. For example: ```jsx {`Hello world`}; @@ -148,11 +151,10 @@ will be warned and fixed to: Hello world; ``` -* If the rule is set to enforce curly braces and the strings have quotes, it will be fixed with double quotes for JSX children and the normal way for JSX attributes. Also, double quotes will be escaped in the fix. +- If the rule is set to enforce curly braces and the strings have quotes, it will be fixed with double quotes for JSX children and the normal way for JSX attributes. Also, double quotes will be escaped in the fix. For example: - ```jsx Hello 'foo' "bar" world; ``` @@ -163,7 +165,7 @@ will warned and fixed to: {"Hello 'foo' \"bar\" world"}; ``` -* If the rule is set to get rid of unnecessary curly braces(JSX expression) and there are characters that need to be escaped in its JSX form, such as quote characters, [forbidden JSX text characters](https://facebook.github.io/jsx/), escaped characters and anything that looks like HTML entity names, the code will not be warned because the fix may make the code less readable. +- If the rule is set to get rid of unnecessary curly braces(JSX expression) and there are characters that need to be escaped in its JSX form, such as quote characters, [forbidden JSX text characters](https://facebook.github.io/jsx/), escaped characters and anything that looks like HTML entity names, the code will not be warned because the fix may make the code less readable. Examples of **correct** code for this rule, even when configured with `"never"`: diff --git a/docs/rules/jsx-curly-newline.md b/docs/rules/jsx-curly-newline.md index 7243fabe05..1946179bd8 100644 --- a/docs/rules/jsx-curly-newline.md +++ b/docs/rules/jsx-curly-newline.md @@ -18,18 +18,19 @@ 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. -* `consistent` enforces either both curly braces have a line break directly inside them, or no line breaks are present. -* `forbid` disallows linebreaks directly inside curly braces. -* `require` enforces the presence of linebreaks directly inside curlies. +- `consistent` enforces either both curly braces have a line break directly inside them, or no line breaks are present. +- `forbid` disallows linebreaks directly inside curly braces. +- `require` enforces the presence of linebreaks directly inside curlies. or a string option: -* `consistent` (default) is an alias for `{ multiline: "consistent", singleline: "consistent" }`. -* `never` is an alias for `{ multiline: "forbid", singleline: "forbid" }` +- `consistent` (default) is an alias for `{ multiline: "consistent", singleline: "consistent" }`. +- `never` is an alias for `{ multiline: "forbid", singleline: "forbid" }` or an @@ -143,7 +144,6 @@ Examples of **correct** code for this rule:
``` - ## 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. diff --git a/docs/rules/jsx-curly-spacing.md b/docs/rules/jsx-curly-spacing.md index 2508886c40..bf6b661526 100644 --- a/docs/rules/jsx-curly-spacing.md +++ b/docs/rules/jsx-curly-spacing.md @@ -14,14 +14,14 @@ It either requires or disallows spaces between those braces and the values insid There are two main options for the rule: -* `{"when": "always"}` enforces a space inside of curly braces -* `{"when": "never"}` disallows spaces inside of curly braces (default) +- `{"when": "always"}` enforces a space inside of curly braces +- `{"when": "never"}` disallows spaces inside of curly braces (default) There are also two properties that allow specifying how the rule should work with the attributes (`attributes`) and the expressions (`children`). The possible values are: -* `true` enables checking for the spacing using the options (default for `attributes`), e.g. `{"attributes": false}` disables checking the attributes -* `false` disables checking for the spacing (default for `children`, for backward compatibility), e.g. `{"children": true}` enables checking the expressions -* an object containing options that override the global options, e.g. `{"when": "always", "children": {"when": "never"}}` enforces a space inside attributes, but disallows spaces inside expressions +- `true` enables checking for the spacing using the options (default for `attributes`), e.g. `{"attributes": false}` disables checking the attributes +- `false` disables checking for the spacing (default for `children`, for backward compatibility), e.g. `{"children": true}` enables checking the expressions +- an object containing options that override the global options, e.g. `{"when": "always", "children": {"when": "never"}}` enforces a space inside attributes, but disallows spaces inside expressions ### never @@ -203,7 +203,7 @@ You can specify an additional `spacing` property that is an object with the foll }}] ``` -* `objectLiterals`: This controls different spacing requirements when the value inside the jsx curly braces is an object literal. +- `objectLiterals`: This controls different spacing requirements when the value inside the jsx curly braces is an object literal. All spacing options accept either the string `"always"` or the string `"never"`. Note that the default value for all "spacing" options matches the first "always"/"never" option provided. diff --git a/docs/rules/jsx-equals-spacing.md b/docs/rules/jsx-equals-spacing.md index 2dd2af0c38..e0b328a44c 100644 --- a/docs/rules/jsx-equals-spacing.md +++ b/docs/rules/jsx-equals-spacing.md @@ -12,8 +12,8 @@ This rule will enforce consistency of spacing around equal signs in JSX attribut There are two options for the rule: -* `"always"` enforces spaces around the equal sign -* `"never"` disallows spaces around the equal sign (default) +- `"always"` enforces spaces around the equal sign +- `"never"` disallows spaces around the equal sign (default) Depending on your coding conventions, you can choose either option by specifying it in your configuration: diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md index be6314e8e4..e6cf10a305 100644 --- a/docs/rules/jsx-first-prop-new-line.md +++ b/docs/rules/jsx-first-prop-new-line.md @@ -10,10 +10,10 @@ Note: The fixer does not include indentation. Please rerun lint to correct those This rule checks whether the first property of all JSX elements is correctly placed. There are the possible configurations: -* `always`: The first property should always be placed on a new line. -* `never` : The first property should never be placed on a new line, e.g. should always be on the same line as the Component opening tag. -* `multiline`: The first property should always be placed on a new line when the JSX tag takes up multiple lines. -* `multiline-multiprop`: The first property should always be placed on a new line if the JSX tag takes up multiple lines and there are multiple properties. This is the `default` value. +- `always`: The first property should always be placed on a new line. +- `never` : The first property should never be placed on a new line, e.g. should always be on the same line as the Component opening tag. +- `multiline`: The first property should always be placed on a new line when the JSX tag takes up multiple lines. +- `multiline-multiprop`: The first property should always be placed on a new line if the JSX tag takes up multiple lines and there are multiple properties. This is the `default` value. Examples of **incorrect** code for this rule, when configured with `"always"`: diff --git a/docs/rules/jsx-fragments.md b/docs/rules/jsx-fragments.md index 12b96eab6e..7b9e72d36f 100644 --- a/docs/rules/jsx-fragments.md +++ b/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 `...`, or, using the shorthand syntax, `<>...`. +In JSX, a React [fragment] is created either with `...`, or, using the shorthand syntax, `<>...`. ## Rule Details @@ -58,6 +58,6 @@ Examples of **correct** code for this rule: ``` -[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 diff --git a/docs/rules/jsx-handler-names.md b/docs/rules/jsx-handler-names.md index 4decd5eb93..ec0881bdcc 100644 --- a/docs/rules/jsx-handler-names.md +++ b/docs/rules/jsx-handler-names.md @@ -37,10 +37,10 @@ Examples of **correct** code for this rule: ... ``` -* `eventHandlerPrefix`: Prefix for component methods used as event handlers. Defaults to `handle` -* `eventHandlerPropPrefix`: Prefix for props that are used as event handlers. Defaults to `on` -* `checkLocalVariables`: Determines whether event handlers stored as local variables are checked. Defaults to `false` -* `checkInlineFunction`: Determines whether event handlers set as inline functions are checked. Defaults to `false` +- `eventHandlerPrefix`: Prefix for component methods used as event handlers. Defaults to `handle` +- `eventHandlerPropPrefix`: Prefix for props that are used as event handlers. Defaults to `on` +- `checkLocalVariables`: Determines whether event handlers stored as local variables are checked. Defaults to `false` +- `checkInlineFunction`: Determines whether event handlers set as inline functions are checked. Defaults to `false` ## When Not To Use It diff --git a/docs/rules/jsx-indent-props.md b/docs/rules/jsx-indent-props.md index fa5e32f5da..6800f5aa31 100644 --- a/docs/rules/jsx-indent-props.md +++ b/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": [, 'tab'||'first'|] diff --git a/docs/rules/jsx-max-props-per-line.md b/docs/rules/jsx-max-props-per-line.md index a4e5d75956..c4110ba465 100644 --- a/docs/rules/jsx-max-props-per-line.md +++ b/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" }] ``` Examples of **correct** code for this rule: + ```jsx // [1, { "when": "multiline" }] diff --git a/docs/rules/jsx-newline.md b/docs/rules/jsx-newline.md index 54ababfd32..8842204235 100644 --- a/docs/rules/jsx-newline.md +++ b/docs/rules/jsx-newline.md @@ -7,15 +7,16 @@ 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": [, { "prevent": , "allowMultilines": }] ... ``` -* enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* prevent: optional boolean. If `true` prevents empty lines between adjacent JSX elements and expressions. Defaults to `false`. -* allowMultilines: optional boolean. If `true` and `prevent` is also equal to `true`, it allows newlines after multiline JSX elements and expressions. Defaults to `false`. +- enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- prevent: optional boolean. If `true` prevents empty lines between adjacent JSX elements and expressions. Defaults to `false`. +- allowMultilines: optional boolean. If `true` and `prevent` is also equal to `true`, it allows newlines after multiline JSX elements and expressions. Defaults to `false`. ## Examples @@ -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
diff --git a/docs/rules/jsx-no-bind.md b/docs/rules/jsx-no-bind.md index a3cd813b20..e36c69e7b9 100644 --- a/docs/rules/jsx-no-bind.md +++ b/docs/rules/jsx-no-bind.md @@ -11,15 +11,18 @@ Examples of **incorrect** code for this rule: ```jsx ``` + ```jsx console.log('Hello!')}> ``` + ```jsx function onClick() { console.log('Hello!'); } ``` Examples of **correct** code for this rule: + ```jsx ``` diff --git a/docs/rules/jsx-no-constructed-context-values.md b/docs/rules/jsx-no-constructed-context-values.md index 93832c7779..a08e415cf0 100644 --- a/docs/rules/jsx-no-constructed-context-values.md +++ b/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 ( ... @@ -22,7 +22,7 @@ return ( Examples of **correct** code for this rule: -``` +```jsx const foo = useMemo(() => ({foo: 'bar'}), []); return ( @@ -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. diff --git a/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md index e1db041e3e..0934ec69ba 100644 --- a/docs/rules/jsx-no-leaked-render.md +++ b/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 && }` - transforming the binary expression into a ternary expression which returns `null` for falsy values: `{someValue ? : 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
{count && title}
@@ -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
{count ? title : null}
@@ -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
{count && title}
@@ -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
{!!count && title}
diff --git a/docs/rules/jsx-no-literals.md b/docs/rules/jsx-no-literals.md index 0450143711..0970652996 100644 --- a/docs/rules/jsx-no-literals.md +++ b/docs/rules/jsx-no-literals.md @@ -28,10 +28,10 @@ var Hello =
The supported options are: -* `noStrings` (default: `false`) - Enforces no string literals used as children, wrapped or unwrapped. -* `allowedStrings` - An array of unique string values that would otherwise warn, but will be ignored. -* `ignoreProps` (default: `false`) - When `true` the rule ignores literals used in props, wrapped or unwrapped. -* `noAttributeStrings` (default: `false`) - Enforces no string literals used in attributes when set to `true`. +- `noStrings` (default: `false`) - Enforces no string literals used as children, wrapped or unwrapped. +- `allowedStrings` - An array of unique string values that would otherwise warn, but will be ignored. +- `ignoreProps` (default: `false`) - When `true` the rule ignores literals used in props, wrapped or unwrapped. +- `noAttributeStrings` (default: `false`) - Enforces no string literals used in attributes when set to `true`. To use, you can specify as follows: diff --git a/docs/rules/jsx-no-script-url.md b/docs/rules/jsx-no-script-url.md index 958d2d38f2..86535f4ad1 100644 --- a/docs/rules/jsx-no-script-url.md +++ b/docs/rules/jsx-no-script-url.md @@ -22,6 +22,7 @@ Examples of **correct** code for this rule: ``` ## Rule Options + ```json { "react/jsx-no-script-url": [ @@ -43,9 +44,11 @@ Examples of **correct** code for this rule: Allows you to indicate a specific list of properties used by a custom component to be checked. ### name + Component name. ### props + List of properties that should be validated. Examples of **incorrect** code for this rule, when configured with the above options: diff --git a/docs/rules/jsx-no-target-blank.md b/docs/rules/jsx-no-target-blank.md index 0caa0a8024..be7f15877e 100644 --- a/docs/rules/jsx-no-target-blank.md +++ b/docs/rules/jsx-no-target-blank.md @@ -23,12 +23,12 @@ This rule aims to prevent user generated link hrefs and form actions from creati ... ``` -* `enabled`: for enabling the rule. -* `allowReferrer`: optional boolean. If `true` does not require `noreferrer` (i. e. `noopener` alone is enough, this leaves IE vulnerable). Defaults to `false`. -* `enforceDynamicLinks`: optional string, `'always'` or `'never'`. -* `warnOnSpreadAttributes`: optional boolean. Defaults to `false`. -* `links`: prevent usage of unsafe `target='_blank'` inside links, defaults to `true`. -* `forms`: prevent usage of unsafe `target='_blank'` inside forms, defaults to `false`. +- `enabled`: for enabling the rule. +- `allowReferrer`: optional boolean. If `true` does not require `noreferrer` (i. e. `noopener` alone is enough, this leaves IE vulnerable). Defaults to `false`. +- `enforceDynamicLinks`: optional string, `'always'` or `'never'`. +- `warnOnSpreadAttributes`: optional boolean. Defaults to `false`. +- `links`: prevent usage of unsafe `target='_blank'` inside links, defaults to `true`. +- `forms`: prevent usage of unsafe `target='_blank'` inside forms, defaults to `false`. ### `enforceDynamicLinks` @@ -125,7 +125,7 @@ This rule supports the ability to use custom components for forms. To enable thi ## When To Override It -Modern browsers (Chrome ≥ 88, Edge ≥ 88, Firefox ≥ 79 and Safari ≥ 12.2) automatically imply `rel="noopener"`. Therefore this rule is no longer needed, if legacy browsers are not supported. See https://web.dev/external-anchors-use-rel-noopener/ and https://caniuse.com/mdn-html_elements_a_implicit_noopener for more details. +Modern browsers (Chrome ≥ 88, Edge ≥ 88, Firefox ≥ 79 and Safari ≥ 12.2) automatically imply `rel="noopener"`. Therefore this rule is no longer needed, if legacy browsers are not supported. See and for more details. For links to a trusted host (e.g. internal links to your own site, or links to a another host you control, where you can be certain this security vulnerability does not exist), you may want to keep the HTTP Referer header for analytics purposes. diff --git a/docs/rules/jsx-no-undef.md b/docs/rules/jsx-no-undef.md index 7d6b2f10b5..4ce62e880d 100644 --- a/docs/rules/jsx-no-undef.md +++ b/docs/rules/jsx-no-undef.md @@ -20,7 +20,6 @@ var Hello = React.createClass({ module.exports = Hello; ``` - Examples of **correct** code for this rule: ```jsx diff --git a/docs/rules/jsx-pascal-case.md b/docs/rules/jsx-pascal-case.md index 57f7ab04c4..43a235150e 100644 --- a/docs/rules/jsx-pascal-case.md +++ b/docs/rules/jsx-pascal-case.md @@ -44,11 +44,11 @@ Examples of **correct** code for this rule: ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `allowAllCaps`: optional boolean set to `true` to allow components name in all caps (default to `false`). -* `allowLeadingUnderscore`: optional boolean set to `true` to allow components name with that starts with an underscore (default to `false`). -* `allowNamespace`: optional boolean set to `true` to ignore namespaced components (default to `false`). -* `ignore`: optional string-array of component names to ignore during validation (supports [minimatch](https://github.com/isaacs/minimatch)-style globs). +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `allowAllCaps`: optional boolean set to `true` to allow components name in all caps (default to `false`). +- `allowLeadingUnderscore`: optional boolean set to `true` to allow components name with that starts with an underscore (default to `false`). +- `allowNamespace`: optional boolean set to `true` to ignore namespaced components (default to `false`). +- `ignore`: optional string-array of component names to ignore during validation (supports [minimatch](https://github.com/isaacs/minimatch)-style globs). ### `allowAllCaps` diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md index 8312420916..d7085b3370 100644 --- a/docs/rules/jsx-sort-props.md +++ b/docs/rules/jsx-sort-props.md @@ -76,11 +76,11 @@ When `true`, short hand props must be listed after all other props (unless `call Enforced sorting for multiline props -* `ignore`: Multiline props will not be taken in consideration for sorting. +- `ignore`: Multiline props will not be taken in consideration for sorting. -* `first`: Multiline props must be listed before all other props (unless `shorthandFirst` is set), but still respecting the alphabetical order. +- `first`: Multiline props must be listed before all other props (unless `shorthandFirst` is set), but still respecting the alphabetical order. -* `last`: Multiline props must be listed after all other props (unless either `callbacksLast` or `shorthandLast` are set), but still respecting the alphabetical order. +- `last`: Multiline props must be listed after all other props (unless either `callbacksLast` or `shorthandLast` are set), but still respecting the alphabetical order. Defaults to `ignore`. diff --git a/docs/rules/jsx-wrap-multilines.md b/docs/rules/jsx-wrap-multilines.md index f099321d6e..0941eef45d 100644 --- a/docs/rules/jsx-wrap-multilines.md +++ b/docs/rules/jsx-wrap-multilines.md @@ -125,7 +125,6 @@ hello =
; ``` - Examples of **correct** code for this rule, when configured with `{ assignment: "parens" }`. ```jsx @@ -243,7 +242,6 @@ var hello = () =>
; ``` - Examples of **correct** code for this rule, when configured `{ arrow: "parens" }`. ```jsx @@ -296,7 +294,6 @@ Examples of **incorrect** code for this rule, when configured with `{ condition:
``` - Examples of **correct** code for this rule, when configured with `{ condition: "parens" }`. ```jsx diff --git a/docs/rules/no-arrow-function-lifecycle.md b/docs/rules/no-arrow-function-lifecycle.md index de6eea65ae..08f3376a92 100644 --- a/docs/rules/no-arrow-function-lifecycle.md +++ b/docs/rules/no-arrow-function-lifecycle.md @@ -38,6 +38,7 @@ var AnotherHello = createReactClass({ }); ``` + ## When Not To Use It If you don't care about performance of your application or conceptual correctness of class property placement, you can disable this rule. diff --git a/docs/rules/no-danger-with-children.md b/docs/rules/no-danger-with-children.md index ec661df979..c7705a91ca 100644 --- a/docs/rules/no-danger-with-children.md +++ b/docs/rules/no-danger-with-children.md @@ -50,4 +50,3 @@ React.createElement("div", {}, "Children"); React.createElement("Hello", {}, "Children"); ``` - diff --git a/docs/rules/no-danger.md b/docs/rules/no-danger.md index 169f572a56..4b205a9ffa 100644 --- a/docs/rules/no-danger.md +++ b/docs/rules/no-danger.md @@ -2,7 +2,7 @@ Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken. -See https://facebook.github.io/react/tips/dangerously-set-inner-html.html +See ## Rule Details diff --git a/docs/rules/no-direct-mutation-state.md b/docs/rules/no-direct-mutation-state.md index f1862b39e2..921f4037f0 100644 --- a/docs/rules/no-direct-mutation-state.md +++ b/docs/rules/no-direct-mutation-state.md @@ -33,7 +33,6 @@ class Hello extends React.Component { } ``` - Examples of **correct** code for this rule: ```jsx diff --git a/docs/rules/no-invalid-html-attribute.md b/docs/rules/no-invalid-html-attribute.md index 6cbb05e6c0..cb94390599 100644 --- a/docs/rules/no-invalid-html-attribute.md +++ b/docs/rules/no-invalid-html-attribute.md @@ -12,6 +12,7 @@ To help with minimizing confusion while reading code, only the appropriate value This rule aims to remove invalid attribute values. ## Rule Options + The options is a list of attributes to check. Defaults to `["rel"]`. ## When Not To Use It diff --git a/docs/rules/no-string-refs.md b/docs/rules/no-string-refs.md index a50fb4efb8..577f494bc8 100644 --- a/docs/rules/no-string-refs.md +++ b/docs/rules/no-string-refs.md @@ -45,6 +45,7 @@ var Hello = createReactClass({ ```js "react/no-string-refs": [, {"noTemplateLiterals": }] ``` + ### `noTemplateLiterals` When set to `true`, it will give warning when using template literals for refs. diff --git a/docs/rules/no-typos.md b/docs/rules/no-typos.md index 6856c953aa..e26a1dbb32 100644 --- a/docs/rules/no-typos.md +++ b/docs/rules/no-typos.md @@ -10,28 +10,27 @@ This rule checks whether the declared static class properties and lifecycle meth It makes sure that the following class properties have no casing typos: -* propTypes -* contextTypes -* childContextTypes -* defaultProps +- propTypes +- contextTypes +- childContextTypes +- defaultProps and the following react lifecycle methods: -* getDerivedStateFromProps -* componentWillMount -* UNSAFE_componentWillMount -* componentDidMount -* componentWillReceiveProps -* UNSAFE_componentWillReceiveProps -* shouldComponentUpdate -* componentWillUpdate -* UNSAFE_componentWillUpdate -* getSnapshotBeforeUpdate -* componentDidUpdate -* componentDidCatch -* componentWillUnmount -* render - +- getDerivedStateFromProps +- componentWillMount +- UNSAFE_componentWillMount +- componentDidMount +- componentWillReceiveProps +- UNSAFE_componentWillReceiveProps +- shouldComponentUpdate +- componentWillUpdate +- UNSAFE_componentWillUpdate +- getSnapshotBeforeUpdate +- componentDidUpdate +- componentDidCatch +- componentWillUnmount +- render Examples of **incorrect** code for this rule: diff --git a/docs/rules/no-unknown-property.md b/docs/rules/no-unknown-property.md index 1b1cd43f95..65f8a40916 100644 --- a/docs/rules/no-unknown-property.md +++ b/docs/rules/no-unknown-property.md @@ -30,8 +30,8 @@ var Hello =
Hello World
; ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `ignore`: optional array of property and attribute names to ignore during validation. +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `ignore`: optional array of property and attribute names to ignore during validation. ## When Not To Use It diff --git a/docs/rules/no-unsafe.md b/docs/rules/no-unsafe.md index 6e60dfb919..5770a93df9 100644 --- a/docs/rules/no-unsafe.md +++ b/docs/rules/no-unsafe.md @@ -7,6 +7,7 @@ Certain legacy lifecycle methods are [unsafe for use in async React applications [component_lifecycle_changes]: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes The rule checks the following methods: + - `componentWillMount` (and `UNSAFE_componentWillMount` alias) - `componentWillReceiveProps` (and `UNSAFE_componentWillReceiveProps` alias) - `componentWillUpdate` (and `UNSAFE_componentWillUpdate` alias) @@ -50,6 +51,7 @@ const Foo = bar({ ``` ## Rule Options + ```json ... "react/no-unsafe": [, { "checkAliases": }] diff --git a/docs/rules/no-unused-prop-types.md b/docs/rules/no-unused-prop-types.md index 20a33f195f..5bfa621f0e 100644 --- a/docs/rules/no-unused-prop-types.md +++ b/docs/rules/no-unused-prop-types.md @@ -79,10 +79,10 @@ This rule can take one argument to ignore some specific props during validation. ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `ignore`: optional array of props name to ignore during validation. -* `customValidators`: optional array of validators used for propTypes validation. -* `skipShapeProps`: In some cases it is impossible to accurately detect whether or not a `PropTypes.shape`'s values are being used. Setting this option to `true` will skip validation of `PropTypes.shape` (`true` by default). +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `ignore`: optional array of props name to ignore during validation. +- `customValidators`: optional array of validators used for propTypes validation. +- `skipShapeProps`: In some cases it is impossible to accurately detect whether or not a `PropTypes.shape`'s values are being used. Setting this option to `true` will skip validation of `PropTypes.shape` (`true` by default). ## Known Issues/Limitations @@ -115,6 +115,7 @@ AComponent.propTypes = { bProp: PropTypes.string // bProp is defined but never used }; ``` + A suggested fix is to assign a bProp to a variable outside of the SFC. ```js diff --git a/docs/rules/prefer-stateless-function.md b/docs/rules/prefer-stateless-function.md index 75b237466e..8521a0b045 100644 --- a/docs/rules/prefer-stateless-function.md +++ b/docs/rules/prefer-stateless-function.md @@ -6,12 +6,12 @@ Stateless functional components are simpler than class based components and will This rule will check your class based React components for -* methods/properties other than `displayName`, `propTypes`, `contextTypes`, `defaultProps`, `render` and useless constructor (same detection as `eslint` [no-useless-constructor rule](https://eslint.org/docs/rules/no-useless-constructor)) -* instance property other than `this.props` and `this.context` -* extension of `React.PureComponent` (if the `ignorePureComponents` flag is true) -* presence of `ref` attribute in JSX -* the use of decorators -* `render` method that return anything but JSX: `undefined`, `null`, etc. (only in React <15.0.0, see [shared settings](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#configuration) for React version configuration) +- methods/properties other than `displayName`, `propTypes`, `contextTypes`, `defaultProps`, `render` and useless constructor (same detection as `eslint` [no-useless-constructor rule](https://eslint.org/docs/rules/no-useless-constructor)) +- instance property other than `this.props` and `this.context` +- extension of `React.PureComponent` (if the `ignorePureComponents` flag is true) +- presence of `ref` attribute in JSX +- the use of decorators +- `render` method that return anything but JSX: `undefined`, `null`, etc. (only in React <15.0.0, see [shared settings](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#configuration) for React version configuration) If none of these elements are found, the rule will warn you to write this component as a pure function. @@ -50,7 +50,6 @@ class Foo extends React.Component { } ``` - ## Rule Options ```js @@ -59,8 +58,8 @@ class Foo extends React.Component { ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `ignorePureComponents`: optional boolean set to `true` to ignore components extending from `React.PureComponent` (default to `false`). +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `ignorePureComponents`: optional boolean set to `true` to ignore components extending from `React.PureComponent` (default to `false`). ### `ignorePureComponents` diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md index 2afde21e8c..e8764ae456 100644 --- a/docs/rules/prop-types.md +++ b/docs/rules/prop-types.md @@ -142,10 +142,10 @@ This rule can take one argument to ignore some specific props during validation. ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `ignore`: optional array of props name to ignore during validation. -* `customValidators`: optional array of validators used for propTypes validation. -* `skipUndeclared`: optional boolean to only error on components that have a propTypes block declared. +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `ignore`: optional array of props name to ignore during validation. +- `customValidators`: optional array of validators used for propTypes validation. +- `skipUndeclared`: optional boolean to only error on components that have a propTypes block declared. ### As for "exceptions" @@ -171,9 +171,9 @@ For this rule to work we need to detect React components, this could be very har For now we should detect components created with: -* a function that return JSX or the result of a `React.createElement` call. -* `createReactClass()` -* an ES6 class that inherit from `React.Component` or `Component` +- a function that return JSX or the result of a `React.createElement` call. +- `createReactClass()` +- an ES6 class that inherit from `React.Component` or `Component` [PropTypes]: https://reactjs.org/docs/typechecking-with-proptypes.html [TypeScript]: https://www.typescriptlang.org/ diff --git a/docs/rules/require-default-props.md b/docs/rules/require-default-props.md index 1ccf7294e9..6a35c670e6 100644 --- a/docs/rules/require-default-props.md +++ b/docs/rules/require-default-props.md @@ -472,7 +472,7 @@ MyStatelessComponent.propTypes = { If you don't care about using `defaultProps` for your component's props that are not required, you can disable this rule. -# Resources +## Resources - [Official React documentation on defaultProps](https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values) diff --git a/docs/rules/require-optimization.md b/docs/rules/require-optimization.md index 17934451de..59f2eda2b0 100644 --- a/docs/rules/require-optimization.md +++ b/docs/rules/require-optimization.md @@ -21,23 +21,23 @@ Examples of **correct** code for this rule: ```js class YourComponent extends React.Component { - shouldComponentUpdate () { - return false; - } + shouldComponentUpdate () { + return false; + } } ``` ```js createReactClass({ - shouldComponentUpdate: function () { - return false; - } + shouldComponentUpdate: function () { + return false; + } }); ``` ```js createReactClass({ - mixins: [PureRenderMixin] + mixins: [PureRenderMixin] }); ``` @@ -56,9 +56,8 @@ createReactClass({ ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `allowDecorators`: optional array of decorators names to allow validation. - +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `allowDecorators`: optional array of decorators names to allow validation. ### `allowDecorators` diff --git a/docs/rules/sort-comp.md b/docs/rules/sort-comp.md index 54ab793205..f8ce13103e 100644 --- a/docs/rules/sort-comp.md +++ b/docs/rules/sort-comp.md @@ -63,9 +63,9 @@ This rule can take one argument to customize the components organisation. ... ``` -* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. -* `order`: optional array of methods to validate. -* `groups`: optional object of methods groups. +- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. +- `order`: optional array of methods to validate. +- `groups`: optional object of methods groups. The default configuration is: @@ -108,16 +108,17 @@ The default configuration is: } } ``` -* `static-variables` This group is not specified by default, but can be used to enforce class static variable positioning. -* `static-methods` is a special keyword that refers to static class methods. -* `lifecycle` refers to the `lifecycle` group defined in `groups`. -* `everything-else` is a special group that matches all of the methods that do not match any of the other groups. -* `render` refers to the `render` method. -* `type-annotations`. This group is not specified by default, but can be used to enforce flow annotations' positioning. -* `getters` This group is not specified by default, but can be used to enforce class getters' positioning. -* `setters` This group is not specified by default, but can be used to enforce class setters' positioning. -* `instance-variables` This group is not specified by default, but can be used to enforce all other instance variables' positioning. -* `instance-methods` This group is not specified by default, but can be used to enforce all other instance methods' positioning. + +- `static-variables` This group is not specified by default, but can be used to enforce class static variable positioning. +- `static-methods` is a special keyword that refers to static class methods. +- `lifecycle` refers to the `lifecycle` group defined in `groups`. +- `everything-else` is a special group that matches all of the methods that do not match any of the other groups. +- `render` refers to the `render` method. +- `type-annotations`. This group is not specified by default, but can be used to enforce flow annotations' positioning. +- `getters` This group is not specified by default, but can be used to enforce class getters' positioning. +- `setters` This group is not specified by default, but can be used to enforce class setters' positioning. +- `instance-variables` This group is not specified by default, but can be used to enforce all other instance variables' positioning. +- `instance-methods` This group is not specified by default, but can be used to enforce all other instance methods' positioning. You can override this configuration to match your needs. diff --git a/docs/rules/state-in-constructor.md b/docs/rules/state-in-constructor.md index 28a2084945..a4069bdc9f 100644 --- a/docs/rules/state-in-constructor.md +++ b/docs/rules/state-in-constructor.md @@ -70,7 +70,6 @@ class Foo extends React.Component { } ``` - ## When Not To Use It When the way a component state is being initialized doesn't matter. diff --git a/docs/rules/static-property-placement.md b/docs/rules/static-property-placement.md index e40a594035..95ed62fe95 100644 --- a/docs/rules/static-property-placement.md +++ b/docs/rules/static-property-placement.md @@ -3,14 +3,13 @@ This rule allows you to enforce where `childContextTypes`, `contextTypes`, `contextType`, `defaultProps`, `displayName`, and `propTypes` are declared in an ES6 class. - ## Rule Details By default, this rule will check for and warn about declaring any of the above properties outside of the class body. The three key options are `static public field`, `static getter`, and `property assignment`. -### When `static public field` is enabled (default): +### When `static public field` is enabled (default) Examples of **incorrect** code for this rule: @@ -48,7 +47,7 @@ class MyComponent extends React.Component { } ``` -### When `static getter` is enabled: +### When `static getter` is enabled Examples of **incorrect** code for this rule: @@ -86,7 +85,7 @@ class MyComponent extends React.Component { } ``` -### When `property assignment` is enabled: +### When `property assignment` is enabled Examples of **incorrect** code for this rule: @@ -126,7 +125,7 @@ MyComponent.propTypes = { /*...*/ }; ## Rule Options -``` +```json ... "react/static-property-placement": [] // `static public field` enabled ... @@ -134,7 +133,7 @@ MyComponent.propTypes = { /*...*/ }; or alternatively: -``` +```json ... "react/static-property-placement": [, ] ... @@ -142,7 +141,7 @@ or alternatively: or alternatively: -``` +```json ... "react/static-property-placement": [, , { childContextTypes: , @@ -154,16 +153,20 @@ or alternatively: }] ... ``` + The `` value must be one these options: -* `static public field` -* `static getter` -* `property assignment` + +- `static public field` +- `static getter` +- `property assignment` The `options` schema defined above allows you to specify different rules for the different property fields available. -##### Example configuration: +### Example configuration + _This is only an example, we do not recommend this as a configuration._ -``` + +```json ... "react/static-property-placement": ["warn", "property assignment", { childContextTypes: "static getter", @@ -175,11 +178,11 @@ _This is only an example, we do not recommend this as a configuration._ ``` Based on the above configuration: -* `defaultProps` and `propTypes` will both enforce the `property assignment` rule. -* `childContextTypes` will enforce the `static getter` rule. -* `contextTypes`, `contextType`, and `displayName` will enforce the `static public field` rule. + +- `defaultProps` and `propTypes` will both enforce the `property assignment` rule. +- `childContextTypes` will enforce the `static getter` rule. +- `contextTypes`, `contextType`, and `displayName` will enforce the `static public field` rule. ## When Not To Use It If you have no placement preference for React's static class properties. - diff --git a/docs/rules/style-prop-object.md b/docs/rules/style-prop-object.md index 175c11d2b1..36f38a7fc9 100644 --- a/docs/rules/style-prop-object.md +++ b/docs/rules/style-prop-object.md @@ -29,7 +29,6 @@ const styles = true; React.createElement("div", { style: styles }); ``` - Examples of **correct** code for this rule: ```jsx @@ -49,6 +48,7 @@ React.createElement("Hello", { style: { color: 'red' }}); const styles = { height: '100px' }; React.createElement("div", { style: styles }); ``` + ## Rule Options ```js @@ -60,21 +60,26 @@ React.createElement("div", { style: styles }); ``` ### `allow` + A list of elements that are allowed to have a non-object value in their style attribute. The default value is `[]`. #### Example + ```js { "allow": ["MyComponent"] } ``` + Examples of **incorrect** code for this rule: + ```js React.createElement(Hello, { style: "some styling" }); ``` Examples of **correct** code for this rule: + ```js React.createElement(MyComponent, { style: "some styling" }); diff --git a/docs/rules/void-dom-elements-no-children.md b/docs/rules/void-dom-elements-no-children.md index 07bcc99688..b8218565b1 100644 --- a/docs/rules/void-dom-elements-no-children.md +++ b/docs/rules/void-dom-elements-no-children.md @@ -4,7 +4,6 @@ There are some HTML elements that are only self-closing (e.g. `img`, `br`, `hr`) > Invariant Violation: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. - ## Rule Details Examples of **incorrect** code for this rule: diff --git a/package.json b/package.json index 20ddc82e8f..1371cb619d 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "main": "index.js", "scripts": { "prepack": "npmignore --auto --commentLines=autogenerated", + "prelint": "npm run lint:docs", + "lint:docs": "markdownlint \"**/*.md\"", "lint": "eslint .", "postlint": "npm run type-check", "pretest": "npm run lint", @@ -63,6 +65,7 @@ "istanbul": "^0.4.5", "ls-engines": "^0.7.0", "markdown-magic": "^2.6.0", + "markdownlint-cli": "^0.8.0 || ^0.32.2", "mocha": "^5.2.0", "npmignore": "^0.3.0", "sinon": "^7.5.0",