jsx-one-expression-per-line fix option inserts blank lines

eslint-plugin-react 7.9.1

If the content of a tag contains only text, extra blank lines are inserted after the text (and the indentation is not correct). If the interior is a jsx expression, the output is correct.

	<div>
		<MyComponent>a</MyComponent>
		<MyOther>{a}</MyOther>
	</div>

results in:

	<div>
		<MyComponent>
a
		
		
		
		
		</MyComponent>
		<MyOther>
			{a}
		</MyOther>
	</div>

.eslintrc:

{
	"parser": "babel-eslint",
	"plugins": [
		"react",
		"babel"
	],
	"rules": {
		"indent": [1, "tab"],
		"react/jsx-one-expression-per-line": 1
	}
}

Note: If you leave out indent it does not insert the extra spaces following the string content but does not indent any of the fixed code.

[CodingDive]

I had the same issue using prettier and prettier-eslint. Every time I saved, it created several new lines between the component and text. Adding following line to my .eslintrc file fixed it for me. "extends": ["prettier", "prettier/react"]

Below is my package.json since I’m not sure which package messed this up.

    "eslint": "5.5.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-babel": "5.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "7.11.1",
    "eslint-config-prettier": "3.0.1",
    "prettier": "1.14.2",
    "prettier-eslint": "8.8.2",
    "prettier-eslint-cli": "4.7.1"

[webOS101]

Further note: using "react/jsx-indent": [1, "tab"], also results in the extra blank lines being inserted.