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?
Please sign in to leave a comment.
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
I was just looking for a way to keep the space in an empty tag for a React Native project, e.g.
Interestingly, I had to go to HTML in Code Style to change the setting for JSX.
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).
Ah, ok. I was wrong, it was the continuation indent.
Thanks!
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.
It looks to me like what you have there is a continuation indent. Check the continuation indent setting on the "Tabs and Spaces" tab.
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.
>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