[JSX support] First line of nested JSX has improper indenting applied.

[godd9170]

This might be related to #665, a bit different though.
In the following example <div className='project-tiles-project-body'> gets nicely indented, however it's child elements and closing tag do not.

projectListing = (
      <div className='project-tiles-project-body'>
        <div className='project-tiles-project-column'>
          {projectListingLeft}
        </div>
        <div className='project-tiles-project-column'>
          {projectListingRight}
          {newDocument}
        </div>
      </div>
    );

Becomes

projectListing = (
            <div className='project-tiles-project-body'>
        <div className='project-tiles-project-column'>
          {projectListingLeft}
        </div>
        <div className='project-tiles-project-column'>
          {projectListingRight}
          {newDocument}
        </div>
      </div>
        );

[bitwiseman]

Yeah this is due to #665. What is your indent setting? 8 spaces? Tab?

[godd9170]

My indent setting was 4 spaces, and I just noticed this option:

Which unfortunately also indents only the first line of the HTML markup.

[bitwiseman]

Yeah, the setting you mention should have no effect on JSX. That's html specific.

[jaxbot]

Another example:

Input:

var PinActions = require("../actions/PinActions");

module.exports = React.createClass({
  _newPost: function() {
    PinActions.newPost();
  },
  render: function() {
    return (
      <header>
        Reacterest
        <span className="new" onClick={this._newPost}>+</span>
      </header>
    );
  }
});

Output by default:

var PinActions = require("../actions/PinActions");

module.exports = React.createClass({
    _newPost: function() {
        PinActions.newPost();
    },
    render: function() {
        return (
            <header>
        Reacterest
        <span className="new" onClick={this._newPost}>+</span>
      </header>
        );
    }
});

Output with indent set to 2 spaces:

var PinActions = require("../actions/PinActions");

module.exports = React.createClass({
  _newPost: function() {
    PinActions.newPost();
  },
  render: function() {
    return (
      <header>
        Reacterest
        <span className="new" onClick={this._newPost}>+</span>
      </header>
    );
  }
});

Works fine after adjusting that, would be cool if it could auto-detect.