Merge pull request #1177 from fatfisz/curly-spacing-for-children

`jsx-curly-spacing`: Enable curly spacing check for children Fixes #857
jsx-eslint · Jun 11, 2017 · 32bcb48 · 32bcb48
2 parents 8e547ea + d57c115
commit 32bcb48
Show file tree

Hide file tree

Showing 4 changed files with 1,830 additions and 133 deletions.
diff --git a/README.md b/README.md
@@ -123,7 +123,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-closing-tag-location](docs/rules/jsx-closing-tag-location.md): Validate closing tag 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
@@ -1,36 +1,60 @@
-# Enforce or disallow spaces inside of curly braces in JSX attributes. (react/jsx-curly-spacing)
+# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions. (react/jsx-curly-spacing)
 
 While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces.
 
 **Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
 
 ## 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
+<Hello name={ firstname } />;
+<Hello name={ firstname} />;
+<Hello name={firstname } />;
 ```
 
-#### never
+The following patterns are not warnings:
+
+```jsx
+<Hello name={firstname} />;
+<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
+<Hello name={
+  firstname
+} />;
+<Hello>{firstname}</Hello>;
+<Hello>{ firstname }</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
+```
 
-When `"never"` is set, the following patterns are considered warnings:
+When `{"when": "never", "children": true}` is set, the following patterns are considered warnings:
 
 ```jsx
 <Hello name={ firstname } />;
 <Hello name={ firstname} />;
 <Hello name={firstname } />;
+<Hello>{ firstname }</Hello>;
 ```
 
 The following patterns are not warnings:
@@ -41,11 +65,15 @@ The following patterns are not warnings:
 <Hello name={
   firstname
 } />;
+<Hello>{firstname}</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
 ```
 
-#### always
+### always
 
-When `"always"` is used, the following patterns are considered warnings:
+When `{"when": "always"}` is set, the following patterns are considered warnings:
 
 ```jsx
 <Hello name={firstname} />;
@@ -61,14 +89,42 @@ The following patterns are not warnings:
 <Hello name={
   firstname
 } />;
+<Hello>{ firstname }</Hello>;
+<Hello>{firstname}</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
+```
+
+When `{"when": "always", "children": true}` is set, the following patterns are considered warnings:
+
+```jsx
+<Hello name={firstname} />;
+<Hello name={ firstname} />;
+<Hello name={firstname } />;
+<Hello>{firstname}</Hello>;
+```
+
+The following patterns are not warnings:
+
+```jsx
+<Hello name={ firstname } />;
+<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
+<Hello name={
+  firstname
+} />;
+<Hello>{ firstname }</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
 ```
 
-#### 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
 <Hello name={firstname} />;
 <Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
+<Hello>{firstname}</Hello>;
+<Hello>{ firstname }</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
 ```
 
 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
 <Hello name={ firstname } />;
 <Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
+<Hello>{firstname}</Hello>;
+<Hello>{ firstname }</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
+```
+
+When `{"when": "never", "attributes": {"allowMultiline": false}, "children": true}` is set, the following patterns are considered warnings:
+
+```jsx
+<Hello name={ firstname } />;
+<Hello name={
+  firstname
+} />;
+<Hello>{ firstname }</Hello>;
 ```
 
-#### Granular spacing controls
+The following patterns are not warnings:
+
+```jsx
+<Hello name={firstname} />;
+<Hello>{firstname}</Hello>;
+<Hello>{
+  firstname
+}</Hello>;
+```
+
+### 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.