From 2727e58bd9724f29b34449806fd1381512e27d19 Mon Sep 17 00:00:00 2001 From: fatfisz Date: Mon, 22 May 2017 00:40:58 +0200 Subject: [PATCH] Update the docs --- README.md | 2 +- docs/rules/jsx-curly-spacing.md | 155 ++++++++++++++++++++++++++++---- 2 files changed, 139 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 1f1441a5a5..6be4481f15 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ Finally, enable all of the rules that you would like to use. Use [our preset](# * [react/jsx-boolean-value](docs/rules/jsx-boolean-value.md): Enforce boolean attributes notation in JSX (fixable) * [react/jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md): Validate closing bracket location in JSX (fixable) -* [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes (fixable) +* [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (fixable) * [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md): Enforce or disallow spaces around equal signs in JSX attributes (fixable) * [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md): Restrict file extensions that may contain JSX * [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md): Enforce position of the first prop in JSX (fixable) diff --git a/docs/rules/jsx-curly-spacing.md b/docs/rules/jsx-curly-spacing.md index 6dd65d4731..d3b789e483 100644 --- a/docs/rules/jsx-curly-spacing.md +++ b/docs/rules/jsx-curly-spacing.md @@ -1,4 +1,4 @@ -# Enforce or disallow spaces inside of curly braces in JSX attributes. (jsx-curly-spacing) +# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions. (jsx-curly-spacing) While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces. @@ -6,31 +6,55 @@ While formatting preferences are very personal, a number of style guides require ## Rule Details -This rule aims to maintain consistency around the spacing inside of JSX attributes. +This rule aims to maintain consistency around the spacing inside of JSX attributes and expressions inside element children. It either requires or disallows spaces between those braces and the values inside of them. -### Options +## Rule Options There are two main options for the rule: -* `"always"` enforces a space inside of curly braces -* `"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) -Depending on your coding conventions, you can choose either option by specifying it in your configuration: +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: -```json -"react/jsx-curly-spacing": [2, "always"] +* `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 + +When `{"when": "never"}` is set, the following patterns are considered warnings: + +```jsx +; +; +; ``` -#### never +The following patterns are not warnings: + +```jsx +; +; +; +{firstname}; +{ firstname }; +{ + firstname +}; +``` -When `"never"` is set, the following patterns are considered warnings: +When `{"when": "never", "children": true}` is set, the following patterns are considered warnings: ```jsx ; ; ; +{ firstname }; ``` The following patterns are not warnings: @@ -41,11 +65,15 @@ The following patterns are not warnings: ; +{firstname}; +{ + firstname +}; ``` -#### always +### always -When `"always"` is used, the following patterns are considered warnings: +When `{"when": "always"}` is set, the following patterns are considered warnings: ```jsx ; @@ -61,14 +89,42 @@ The following patterns are not warnings: ; +{ firstname }; +{firstname}; +{ + firstname +}; +``` + +When `{"when": "always", "children": true}` is set, the following patterns are considered warnings: + +```jsx +; +; +; +{firstname}; +``` + +The following patterns are not warnings: + +```jsx +; +; +; +{ firstname }; +{ + firstname +}; ``` -#### Braces spanning multiple lines +### Braces spanning multiple lines By default, braces spanning multiple lines are allowed with either setting. If you want to disallow them you can specify an additional `allowMultiline` property with the value `false`: ```json -"react/jsx-curly-spacing": [2, "never", {"allowMultiline": false}] +"react/jsx-curly-spacing": [2, {"when": "never", "allowMultiline": false}] ``` When `"never"` is used and `allowMultiline` is `false`, the following patterns are considered warnings: @@ -87,6 +143,11 @@ The following patterns are not warnings: ```jsx ; ; +{firstname}; +{ firstname }; +{ + firstname +}; ``` When `"always"` is used and `allowMultiline` is `false`, the following patterns are considered warnings: @@ -105,14 +166,39 @@ The following patterns are not warnings: ```jsx ; ; +{firstname}; +{ firstname }; +{ + firstname +}; +``` + +When `{"when": "never", "attributes": {"allowMultiline": false}, "children": true}` is set, the following patterns are considered warnings: + +```jsx +; +; +{ firstname }; ``` -#### Granular spacing controls +The following patterns are not warnings: + +```jsx +; +{firstname}; +{ + firstname +}; +``` + +### Granular spacing controls You can specify an additional `spacing` property that is an object with the following possible values: ```json -"react/jsx-curly-spacing": [2, "always", {"spacing": { +"react/jsx-curly-spacing": [2, {"when": "always", "spacing": { "objectLiterals": "never" }}] ``` @@ -135,6 +221,41 @@ When `"never"` is used and `objectLiterals` is `"always"`, the following pattern Please note that spacing of the object literal curly braces themselves is controlled by the built-in [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing) rule. +### Shorthand options + +To preserve backward compatibility, two additional options are supported: + +```json +"react/jsx-curly-spacing": [2, "always"] +``` + +which is a shorthand for + +```json +"react/jsx-curly-spacing": [2, {"when": "always"}] +``` + +and + +```json +"react/jsx-curly-spacing": [2, "never"] +``` + +which is a shorthand for + +```json +"react/jsx-curly-spacing": [2, {"when": "never"}] +``` + +When using the shorthand options, only attributes will be checked. To specify other options, use another argument: + +```json +"react/jsx-curly-spacing": [2, "never", { + "allowMultiline": false, + "spacing": {"objectLiterals": "always"} +}] +``` + ## When Not To Use It -You can turn this rule off if you are not concerned with the consistency around the spacing inside of JSX attributes. +You can turn this rule off if you are not concerned with the consistency around the spacing inside of JSX attributes or expressions.