Merge pull request #707 from Kovensky/jsx-tag-spacing

[new] Add jsx-tag-spacing rule (Fixes #693)

README.md

@@ -132,6 +132,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md): Enforce PascalCase for user-defined JSX components
 * [react/jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
 * [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md): Validate spacing before closing bracket in JSX (fixable)
+* [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md): Validate whitespace in and around the JSX opening and closing brackets (fixable)
 * [react/jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
 * [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
 * [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md): Prevent missing parentheses around multilines JSX (fixable)

docs/rules/jsx-tag-spacing.md

@@ -0,0 +1,179 @@
+# Validate whitespace in and around the JSX opening and closing brackets (jsx-tag-spacing)
+
+Enforce or forbid spaces after the opening bracket, before the closing bracket of self-closing elements, and between the angle bracket and slash of JSX closing or self-closing elements.
+
+## Rule Details
+
+This rule checks the whitespace inside and surrounding the JSX syntactic elements.
+
+This rule takes one argument, an object with 3 possible keys: `closingSlash`, `beforeSelfClosing` and `afterOpening`. Each key can receive the value `"allow"` to disable that specific check.
+
+The default values are:
+
+```json
+{
+  "closingSlash": "never",
+  "beforeSelfClosing": "always",
+  "afterOpening": "never"
+}
+```
+
+The options for each sub-option are documented in the following subsections.
+
+### `closingSlash`
+
+This check can be set to `"always"`, `"never"` or `"allow"` (to disable it).
+
+If it is `"never"`, the check warns whenever a space is separating the two characters in the JSX tokens `</` and `/>`. If it is `"always"` then it warns whenever a space is missing separating the mentioned two characters. The default value of this check is `"never"`.
+
+The following patterns are considered warnings when configured `"never"`:
+
+```jsx
+<App/ >
+<input/
+>
+<Provider>< /Provider>
+```
+
+The following patterns are not considered warnings when configured `"never"`:
+
+```jsx
+<App/>
+<input/>
+<Provider></Provider>
+```
+
+The following patterns are considered warnings when configured `"always"`:
+
+```jsx
+<Hello/>
+<Goodbye></Goodbye>
+```
+
+The following patterns are not considered warnings when configured `"never"`:
+
+```jsx
+<Hello/ >
+<Goodbye>< /Goodbye>
+```
+
+### `beforeSelfClosing`
+
+This check can be set to `"always"`, `"never"` or `"allow"` (to disable it).
+
+If it is `"always"`, the check warns whenever a space is missing before the closing bracket. If `"never"` then it warns if a space is present before the closing bracket. The default value of this check is `"always"`.
+
+The following patterns are considered warnings when configured `"always"`:
+
+```jsx
+<Hello/>
+<Hello firstname="John"/>
+```
+
+The following patterns are not considered warnings when configured `"always"`:
+
+```jsx
+<Hello />
+<Hello firstName="John" />
+<Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+The following patterns are considered warnings when configured `"never"`:
+
+```jsx
+<Hello />
+<Hello firstName="John" />
+```
+
+The following patterns are not considered warnings when configured `"never"`:
+
+```jsx
+<Hello/>
+<Hello firstname="John"/>
+<Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+### `afterOpening`
+
+This check can be set to `"always"`, `"never"`, `"allow-multiline"` or `"allow"` (to disable it).
+
+If it is `"always"`, the check warns whenever a space is missing after the opening bracket of either a JSX opening element or closing element. If `"never"` then it warns if a space is present after the opening bracket of either a JSX opening element or closing element. If `"allow-multiline"` then it behaves like `"never"`, but allows if the separator includes a newline character. The default value of this check is `"never"`.
+
+The following patterns are considered warnings when configured `"always"`:
+
+```jsx
+<Hello></Hello>
+<Hello firstname="John"/>
+<Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+The following patterns are not considered warnings when configured `"always"`:
+
+```jsx
+< Hello></ Hello>
+< Hello firstName="John"/>
+<
+  Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+The following patterns are considered warnings when configured `"never"`:
+
+```jsx
+< Hello></ Hello>
+< Hello firstName="John"/>
+<
+  Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+The following patterns are not considered warnings when configured `"never"`:
+
+```jsx
+<Hello></Hello>
+<Hello firstname="John"/>
+<Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+The following patterns are considered warnings when configured `"allow-multiline"`:
+
+```jsx
+< Hello></ Hello>
+< Hello firstName="John"/>
+< Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+The following patterns are not considered warnings when configured `"allow-multiline"`:
+
+```jsx
+<Hello></Hello>
+<Hello firstName="John"/>
+<
+  Hello
+  firstName="John"
+  lastName="Smith"
+/>
+```
+
+## When Not To Use It
+
+You can turn this rule off if you are not concerned with the consistency of spacing in or around JSX brackets.

index.js

@@ -55,7 +55,8 @@ var allRules = {
   'no-children-prop': require('./lib/rules/no-children-prop'),
   'no-comment-textnodes': require('./lib/rules/no-comment-textnodes'),
   'require-extension': require('./lib/rules/require-extension'),
-  'wrap-multilines': require('./lib/rules/wrap-multilines')
+  'wrap-multilines': require('./lib/rules/wrap-multilines'),
+  'jsx-tag-spacing': require('./lib/rules/jsx-tag-spacing')
 };
 
 function filterRules(rules, predicate) {