Codestyle for JSX

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
Comment actions Permalink

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).

0
Comment actions Permalink

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.

0
Comment actions Permalink

It looks to me like what you have there is a continuation indent. Check the continuation indent setting on the "Tabs and Spaces" tab.

0
Comment actions Permalink

I have this problem, too.

@Tim Keating: that's not a continuation indent in the example.

@David House: I have my default JS interpreter set to JSX.

@ Andriy Bazanov I have no `.editorconfig` file in my project.

0
Comment actions Permalink

JSX is formatted according to JavaScript indent options (Settings | Editor | Code Style | JavaScript); please make sure to set both Indent and Continuation Indent to 2 there and disable EditorConfig support in Settings | Editor | Code Style

0
Comment actions Permalink

Ah, ok. I was wrong, it was the continuation indent.


Thanks!

1
Comment actions Permalink

I was just looking for a way to keep the space in an empty tag for a React Native project, e.g.

<LearnMoreLinks />

Interestingly, I had to go to HTML in Code Style to change the setting for JSX.

0
Comment actions Permalink

>I was just looking for a way to keep the space in an empty tag for a React Native project

 

It's Settings | Editor | Code Style | HTML | Other, Spaces/In empty tag

0

Please sign in to leave a comment.