Formatting a React js file

[c0debreaker]

I installeed jsfmt and configured keyboard bindings on my Yosemite. I used ctrl+shift+h

It's working but it's using 4 spaces. I want only 2 spaces. Where do I configure that? Even if my Sublime Setting was configure for 2 spaces, convert tabs to spaces, it is not following or using it.

[mihai-vlc]

Hi,

You can try in your jsfmt configuration

{
    "options": {
        "indent": {
            "value": "  "
        }
}

You can find that under Preferences -> Package Settings -> Sublime JSFMT -> Settings user.

Please let me know on how it goes so we can close this issue.

[c0debreaker]

Not sure if it's working because it's not adjusting the code inside the render. Here is my code

from this

var CommentForm = React.createClass({
  handleSubmit: function(e){
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author){
      return;
    }
    this.props.onCommentSubmit({
      author: author,
      text: text
    } );
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
  },
  render: function(){
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
                 <input type="text" placeholder="Your name" ref="author" />
                 <input type="text" placeholder="Say something..." ref="text" />
                    <input type="submit" value="Post" />
      </form>
      );
  }
});

and after pressing ctrl+shift+h which I set in my key bindings, it's now this

var CommentForm = React.createClass( {
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode( this.refs.author ).value.trim();
    var text = React.findDOMNode( this.refs.text ).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit( {
      author: author,
      text: text
    } );
    React.findDOMNode( this.refs.author ).value = '';
    React.findDOMNode( this.refs.text ).value = '';
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
                 <input type="text" placeholder="Your name" ref="author" />
                 <input type="text" placeholder="Say something..." ref="text" />
                    <input type="submit" value="Post" />
      </form>
      );
  }
} );

[mihai-vlc]

I don't think it will format the content of the render method as it would change the returned value.

You wouldn't want jsfmt to add spaces between the div and the anchor tag in the following example:

return "<div><a href="#0">aa</a><span>b</span></div>";

[c0debreaker]

Got it. That makes sense. I never thought of that :)