Can't format custom tags

[EnriqueSalazar]

Hi.

I am not being able to format JSX properly, I have read in past issues that this was a problem with previous versions, but is not clear for me if this is still an issue or I am just doing something wrong.

// Actual result
import { Row, Col } from 'react-bootstrap';

const Status = props => (
  <Row>
    <Col md={ 5 }><strong>Status</strong>
    <a> // <a> is on the same level as <Col>
      <p>
        <div> <strong>{ props.test }</strong> </div>
      </p>
    </a>
    </Col>
    <Col md={ 2 }><strong>Door</strong></Col>
    <Col md={ 5 }><strong>Om</strong></Col>
  </Row>
);

// Desired result
import { Row, Col } from 'react-bootstrap';

const Status = props => (
  <Row>
    <Col md={ 5 }><strong>Status</strong>
      <a>
        <p>
          <div> <strong>{ props.test }</strong> </div>
        </p>
      </a>
    </Col>
    <Col md={ 2 }><strong>Door</strong></Col>
    <Col md={ 5 }><strong>Om</strong></Col>
  </Row>
);

I am using VSCode with react-beautify, with a local formatter:

 "esformatter": "^0.10.0"
 "esformatter-jsx": "^7.4.1"

My configuration goes:

{
  "plugins": [
    "esformatter-jsx"
  ],
  "jsx": {
    "formatJSX": true,
    "attrsOnSameLineAsTag": false,
    "maxAttrsOnTag": 1,
    "firstAttributeOnSameLine": false,
    "formatJSXExpressions": true,
    "JSXExpressionsSingleLine": true,
    "alignWithFirstAttribute": false,
    "spaceInJSXExpressionContainers": " ",
    "removeSpaceBeforeClosingJSX": false,
    "closingTagOnNewLine": true, 
    "JSXAttributeQuotes": "", 
    "htmlOptions": { 
      "indent_size": 2,
      "indent_level": 0,
      "brace_style": "collapse",
      "end_with_newline": false,
      "indent_char": " ",
      "indent_handlebars": true,
      "indent_inner_html": false,
      "indent_scripts": "normal",
      "max_preserve_newlines": 0,
      "preserve_newlines": true,
      "e4x": true,
      "wrap_line_length": 120
    }
  },
  "whiteSpace": {
    "before": {
      "ObjectPatternClosingBrace": 1,
      "FunctionExpressionOpeningBrace": 1,
      "FunctionExpressionClosingBrace": 1
    },
    "after": {
      "ObjectPatternOpeningBrace": 1,
      "FunctionExpressionOpeningBrace": 1,
      "FunctionExpressionClosingBrace": -1
    }
  }
}

Thanks!

[royriojas]

Hi @EnriqueSalazar

I just published a new version of esformatter-jsx that fix this issue: v8.0.0 Please let me know if it works as expected.