No Effect on JSX Render Function Indentation in Sublime 3

[ezra-g]

I'm attempting to get esformatter-jsx working in Sublime 3. It appears that esformatter is not formatting markup inside the render function of a JSX template.

For example, in this gist, the tab before class Foo extends Component { is successfully removed, but the divs remain disorganized in their indentation.

I have EsFormatter v2.0.1 installed via Sublime Package Control. Output from npm list esformatter-jsx shows [email protected] and esformatter is [email protected].

Below are the contents of my EsFormatter.sublime-settings. I've noticed that two issues talk about the default configuration listed on the esformatter-jsx project page as being potentially incorrect because plugins should be part of an options array, so I've included that change with no effect (#46, #21). If my problem is one of configuration, I'd be happy to file a pull request to update the project page if you can point me to how to resolve the issue here.

Thanks!

{
  "options": { 
    "plugins": [
      "esformatter-jsx",
    ]
  },
  // this is the section this plugin will use to store the settings for the jsx formatting
  "jsx": {
    // whether to recursively format jsx expressions with esformatter
    // set this to false if you don't want JSXExpressions to be formatted recursively, like when using problematic plugins
    "formatJSXExpressions": true,
    // By default ObjectExpression and ArrayExpression in JSXExpressions are inlined,
    // if false, the Expression might expand several lines
    "JSXExpressionsSingleLine": true,
    // by default is true if set to false it works the same as esformatter-jsx-ignore
    "formatJSX": true,
    // keep the node attributes on the same line as the open tag. Default is true.
    // Setting this to false will put each one of the attributes on a single line
    "attrsOnSameLineAsTag": true,
     // how many attributes should the node have before having to put each
     // attribute in a new line. Default 1
    "maxAttrsOnTag": 1,
    // if the attributes are going to be put each one on its own line, then keep the first
    // on the same line as the open tag
    "firstAttributeOnSameLine": false,
    // default to one space. Make it empty if you don't like spaces between JSXExpressionContainers
    "spaceInJSXExpressionContainers": " ",
    // align the attributes with the first attribute (if the first attribute was kept on the same line as on the open tag)
    "alignWithFirstAttribute": true,
    "htmlOptions": { // same as the ones passed to js-beautifier.html
      "brace_style": "collapse",
      "indent_char": " ",
      "indent_size": 2,
      "max_preserve_newlines": 2,
      "preserve_newlines": true
    }
  }
}

[royriojas]

hi @ezra-g,

not sure I understand correctly the issue, I haven't try this plugin with sublime-esformatter, it seems that package requires you to install esformatter either in the project folder or globally. How are you installing esformatter?

if globally I bet you need to also install this plugin as global, the instructions you mentioned were for sublime jsfmt a different package, so not sure they apply to the one you're using.