Codestyle for JSX

Answered

Permanently deleted user

Created June 28, 2017 19:15

I started writing React for my Rails app, and can't figure out how to modify the codestyle (specifically tabs and indentation) for JSX files.

I have gone to Default Settings > Code Style > Javascript, ... > XML, ... HTML, and ... > Other File Types and changed the Tabs and Indents settings to use Tab Size = 2, Indent = 2, and Continuation Indent = 2 as desired, but none of that has any effect on my .jsx file.

Edit: I have now changed the code style setting for every language option to have indent = 2, and that has done nothing to help.

The format keeps coming out as

window.ReactComponents.Thing = React.createClass({
    render: function() {
        return (
            <div className="something">
                Content
            </div>
        )
    }
});

as opposed to

window.ReactComponents.Thing = React.createClass({
  render: function() {
    return (
      <div className="something">
        Content
      </div>
    )
  }
});

It only does this for new files - it successfully detects and follows the indent scheme used in existing files.

Does anybody have any ideas?

8 comments

Andriy Bazanov

Created June 28, 2017 23:22

Hi there,

Any .editorconfig files in the project? Settings from there (if corresponding plugin is installed and enabled) will overwrite Code Style settings (the nature of such files).

David House

Created April 12, 2018 15:31

I was able to accomplish this by setting the same indent settings you first tried. However, I think the configuration that you're missing is that you haven't set `jsx` as your default Javascript interpreter.

In PyCharm, I'm able to go to Languages & Frameworks > Javascript, then set my "JavaScript language version" to "React JSX". Once I've done that, it propagates default JS indent settings to my JSX files.