From 04b4db1bcd95f0e0af3727c3d27a8ae49f8327ce Mon Sep 17 00:00:00 2001 From: Bryan Mishkin <698306+bmish@users.noreply.github.com> Date: Sun, 21 Aug 2022 15:18:37 -0400 Subject: [PATCH] [Docs] Add markdownlint for documentation formatting consistency --- .markdownlint.json | 4 ++++ .markdownlintignore | 3 +++ README.md | 24 +++++++++---------- SECURITY.md | 1 - docs/rules/boolean-prop-naming.md | 7 +++--- docs/rules/default-props-match-prop-types.md | 2 +- docs/rules/destructuring-assignment.md | 1 + docs/rules/iframe-missing-sandbox.md | 2 +- docs/rules/jsx-curly-brace-presence.md | 8 ++++--- docs/rules/jsx-curly-newline.md | 2 +- docs/rules/jsx-fragments.md | 4 ++-- docs/rules/jsx-indent-props.md | 1 - docs/rules/jsx-max-props-per-line.md | 3 +++ docs/rules/jsx-newline.md | 2 +- docs/rules/jsx-no-bind.md | 3 +++ .../jsx-no-constructed-context-values.md | 7 +++--- docs/rules/jsx-no-leaked-render.md | 8 ++++++- docs/rules/jsx-no-script-url.md | 3 +++ docs/rules/jsx-no-target-blank.md | 2 +- docs/rules/jsx-no-undef.md | 1 - docs/rules/jsx-wrap-multilines.md | 3 --- docs/rules/no-arrow-function-lifecycle.md | 1 + docs/rules/no-danger-with-children.md | 1 - docs/rules/no-danger.md | 2 +- docs/rules/no-direct-mutation-state.md | 1 - docs/rules/no-invalid-html-attribute.md | 1 + docs/rules/no-string-refs.md | 1 + docs/rules/no-typos.md | 1 - docs/rules/no-unsafe.md | 2 ++ docs/rules/no-unused-prop-types.md | 3 ++- docs/rules/prefer-stateless-function.md | 1 - docs/rules/require-default-props.md | 2 +- docs/rules/require-optimization.md | 15 ++++++------ docs/rules/sort-comp.md | 1 + docs/rules/state-in-constructor.md | 1 - docs/rules/static-property-placement.md | 23 ++++++++++-------- docs/rules/style-prop-object.md | 7 +++++- docs/rules/void-dom-elements-no-children.md | 1 - package.json | 4 ++++ 39 files changed, 96 insertions(+), 63 deletions(-) create mode 100644 .markdownlint.json create mode 100644 .markdownlintignore diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000000..712a464c26 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,4 @@ +{ + "line-length": false, + "no-hard-tabs": { "spaces_per_tab": 2 } +} 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..58c537e857 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ + # `eslint-plugin-react` [![Version Badge][npm-version-svg]][package-url] + =================== [![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. ``, `
`) from receiving children | -## JSX-specific rules +### JSX-specific 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 | -## 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 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/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-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md index b4d7bff0aa..fb64b1b666 100644 --- a/docs/rules/jsx-curly-brace-presence.md +++ b/docs/rules/jsx-curly-brace-presence.md @@ -32,7 +32,7 @@ or alternatively ... ``` -### Valid options for +### Valid options for `` 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 />; ``` @@ -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"}; @@ -152,7 +155,6 @@ will be warned and fixed to: For example: - ```jsx Hello 'foo' "bar" world; ``` diff --git a/docs/rules/jsx-curly-newline.md b/docs/rules/jsx-curly-newline.md index 7243fabe05..22bce651f5 100644 --- a/docs/rules/jsx-curly-newline.md +++ b/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:
``` - ## 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-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-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..d43782ff02 100644 --- a/docs/rules/jsx-newline.md +++ b/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": [, { "prevent": , "allowMultilines": }] @@ -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-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..491eba875d 100644 --- a/docs/rules/jsx-no-target-blank.md +++ b/docs/rules/jsx-no-target-blank.md @@ -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-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..f9e2d698d4 100644 --- a/docs/rules/no-typos.md +++ b/docs/rules/no-typos.md @@ -32,7 +32,6 @@ and the following react lifecycle methods: * componentWillUnmount * render - Examples of **incorrect** code for this rule: ```js 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..a0c730d4e2 100644 --- a/docs/rules/no-unused-prop-types.md +++ b/docs/rules/no-unused-prop-types.md @@ -86,7 +86,7 @@ This rule can take one argument to ignore some specific props during validation. ## Known Issues/Limitations -- [False Positives: SFC (helper render methods)](#false-positives-sfc) +* [False Positives: SFC (helper render methods)](#false-positives-sfc) ### False Positives SFC @@ -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..4e45d92d32 100644 --- a/docs/rules/prefer-stateless-function.md +++ b/docs/rules/prefer-stateless-function.md @@ -50,7 +50,6 @@ class Foo extends React.Component { } ``` - ## Rule Options ```js 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..1149af4b79 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] }); ``` @@ -59,7 +59,6 @@ createReactClass({ * `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. * `allowDecorators`: optional array of decorators names to allow validation. - ### `allowDecorators` Sets the allowed names of decorators. If the variable is present in the chain of decorators, it validates diff --git a/docs/rules/sort-comp.md b/docs/rules/sort-comp.md index 54ab793205..4378763042 100644 --- a/docs/rules/sort-comp.md +++ b/docs/rules/sort-comp.md @@ -108,6 +108,7 @@ 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`. 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..3f6317ef36 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 -``` +```plaintext ... "react/static-property-placement": [] // `static public field` enabled ... @@ -134,7 +133,7 @@ MyComponent.propTypes = { /*...*/ }; or alternatively: -``` +```plaintext ... "react/static-property-placement": [, ] ... @@ -142,7 +141,7 @@ or alternatively: or alternatively: -``` +```plaintext ... "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` 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._ -``` + +```plaintext ... "react/static-property-placement": ["warn", "property assignment", { childContextTypes: "static getter", @@ -175,6 +178,7 @@ _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. @@ -182,4 +186,3 @@ Based on the above configuration: ## 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..f58f533d2d 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,7 +65,9 @@ "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", + "npm-run-all": "^4.1.5", "npmignore": "^0.3.0", "sinon": "^7.5.0", "typescript": "^3.9.9",