Merge pull request #1552 from Vydia/jsx-one-expression-per-line-docs

[Docs] jsx-one-expression-per-line
jsx-eslint · Nov 19, 2017 · 9fe89a0 · 9fe89a0
2 parents 3a94a95 + 8ef2824
commit 9fe89a0
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -146,6 +146,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [react/jsx-no-literals](docs/rules/jsx-no-literals.md): Prevent usage of unwrapped JSX strings
 * [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md): Prevent usage of unsafe `target='_blank'`
 * [react/jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
+* [react/jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md): Limit to one expression per line in JSX
 * [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md): Enforce curly braces or disallow unnecessary curly braces in JSX
 * [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 (fixable)

diff --git a/docs/rules/jsx-one-expression-per-line.md b/docs/rules/jsx-one-expression-per-line.md
@@ -0,0 +1,104 @@
+# One JSX Element Per Line (react/jsx-indent)
+
+This option limits every line in JSX to one expression each.
+
+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Fixer will insert line breaks between any expression that are on the same line.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+<App><Hello /></App>
+
+<App><Hello />
+</App>
+
+<App>
+  <Hello>
+  </Hello></App>
+
+<App>
+  </Hello> World
+</App>
+
+<App>
+  </Hello> { 'World' }
+</App>
+
+<App>
+  </Hello> { this.world() }
+</App>
+
+<App>
+  { 'Hello' }{ ' ' }{ 'World' }
+</App>
+
+<App
+  foo
+><Hello />
+</App>
+
+<App><Hello
+  foo
+/>
+</App>
+
+<App><Hello1 />
+     <Hello2 />
+     <Hello3 />
+</App>
+```
+
+The following patterns are **not** warnings:
+
+```jsx
+<App>
+  <Hello />
+</App>
+
+<App>
+  <Hello>
+  </Hello>
+</App>
+
+<App>
+  </Hello>
+  World
+</App>
+
+<App>
+  </Hello>
+  { 'World' }
+</App>
+
+<App>
+  </Hello>
+  { this.world() }
+</App>
+
+<App>
+  { 'Hello' }
+  { ' ' }
+  { 'World' }
+</App>
+
+<App
+  foo
+>
+  <Hello />
+</App>
+
+<App>
+  <Hello
+    foo
+  />
+</App>
+
+<App>
+  <Hello1 />
+  <Hello2 />
+  <Hello3 />
+</App>
+```
diff --git a/lib/rules/jsx-one-expression-per-line.js b/lib/rules/jsx-one-expression-per-line.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview Limit to one element tag per line in JSX
+ * @fileoverview Limit to one expression per line in JSX
  * @author Mark Ivan Allen <Vydia.com>
  */
 
@@ -12,7 +12,7 @@
 module.exports = {
   meta: {
     docs: {
-      description: 'Limit to one element tag per line in JSX',
+      description: 'Limit to one expression per line in JSX',
       category: 'Stylistic Issues',
       recommended: false
     },

diff --git a/tests/lib/rules/jsx-one-expression-per-line.js b/tests/lib/rules/jsx-one-expression-per-line.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview Limit to one element tag per line in JSX
+ * @fileoverview Limit to one expression per line in JSX
  * @author Mark Ivan Allen <Vydia.com>
  */