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?

4

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

1
Avatar
Permanently deleted user

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

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
Avatar
Permanently deleted user

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

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

3
Avatar
Permanently deleted user

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


Thanks!

1

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.

2

>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

请先登录再写评论。