There seems to be an issue when the tag inside the JSX is an H1, H2, etc. Here is the input and expected output:
Input:
import React from "react";
import { H1 } from "native-base";
class Home extends React.Component {
render() {
return (
<H1 aProp={ true }>
blah-blah
</H1>
);
}
}
Expected output:
import React from "react";
import { H1 } from "native-base";
class Home extends React.Component {
render() {
return (
<H1 aProp={ true }>
blah-blah
</H1>
);
}
}
Actual output:
import React from "react";
import { H1 } from "native-base";
class Home extends React.Component {
render() {
return (
<H1 aProp={ true }>
blah-blah
</H1>
);
}
}
If run the formatter again, it keeps moving the blah-blah text and closing tag more to the right:
import React from "react";
import { H1 } from "native-base";
class Home extends React.Component {
render() {
return (
<H1 aProp={ true }>
blah-blah
</H1>
);
}
}
However, if I rename the tag as anything other that H1, H2, etc., i.e. I rename this to K1, it works fine:
import React from "react";
import { K1 } from "native-base";
class Home extends React.Component {
render() {
return (
<K1 aProp={ true }>
blah-blah
</K1>
);
}
}
So, my current workaround is to rename the import to something else other than H1, H2, etc.
import React from "react";
import { H1 as K1 } from "native-base";
class Home extends React.Component {
render() {
return (
<K1 aProp={ true }>
blah-blah
</K1>
);
}
}
Here is my .esformatter file:
{
"preset": "default",
"plugins": [
"esformatter-quotes",
"esformatter-spaced-lined-comment",
"esformatter-collapse-objects",
"esformatter-remove-trailing-commas",
"esformatter-jsx"
],
"collapseObjects": {
"ObjectExpression": {
"maxLineLength": 79,
"maxKeys": 0
}
},
"quotes": {
"type": "double"
},
"indent": {
"value": " ",
"AlignComments": false
},
"whiteSpace": {
"before": {
"ObjectExpressionClosingBrace": 0,
"ModuleSpecifierClosingBrace": 1,
"PropertyName": 1
},
"after": {
"ObjectExpressionOpeningBrace": 0,
"ModuleSpecifierOpeningBrace": 1
}
},
"jsx": {
"formatJSXExpressions": true,
"JSXExpressionsSingleLine": false,
"formatJSX": true,
"attrsOnSameLineAsTag": false,
"maxAttrsOnTag": 1,
"firstAttributeOnSameLine": false,
"spaceInJSXExpressionContainers": "",
"alignWithFirstAttribute": false,
"closingTagOnNewLine": true,
"htmlOptions": {
"brace_style": "collapse",
"indent_char": " ",
"indent_size": 2,
"max_preserve_newlines": 2,
"preserve_newlines": true,
"wrap_line_length": 250
}
}
}
There seems to be an issue when the tag inside the JSX is an H1, H2, etc. Here is the input and expected output:
Input:
Expected output:
Actual output:
If run the formatter again, it keeps moving the blah-blah text and closing tag more to the right:
However, if I rename the tag as anything other that H1, H2, etc., i.e. I rename this to K1, it works fine:
So, my current workaround is to rename the import to something else other than H1, H2, etc.
Here is my .esformatter file: