royriojas / esformatter-jsx

esformatter plugin: format jsx files (or js files with Facebook React JSX Syntax)
MIT License
142 stars 25 forks source link

H1, H2, etc tags not handled properly #95

Open ujwal-setlur opened 7 years ago

ujwal-setlur commented 7 years ago

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
        }
    }
}
ipselon commented 7 years ago

+1