Code style for TSX files
We're using TSX files with React components in them. What code style settings does IDEA apply to the HTML/React portions of those files? I'm looking for settings for things like the following:
And so on. It seems as though some of the formatting comes from the HTML code style, but settings like newlines for tags in the HTML code style are based on explicit lists of tags, so it's not clear to me how to say (for example) "always put React component tags on their own line" or "Chop down attributes for all React components tags", or something like that.
And the spacing settings and so on for things like ternary operators, array brackets, etc that include TSX-like structure are nowhere to be found, and seem to behave in an arbitrary way. Is there a settings page somewhere that I haven't found?
I've played a bit with Prettier, but:
- It applies its settings to the TS code as a whole, not just to the TSX-ish stuff, and it seems to override the Typescript Code Style settings. That won't fly at my company.
- I can't figure out how to set up settings for it to apply globally, only on a per-project basis. That's a pain in the neck, not a show-stopper, but still, a pain is a pain.
- Its settings aren't comprehensive enough to cover all of the tweaks my company has in place to TS Code Style, so I doubt I could sell everyone on the concept.
Please sign in to leave a comment.
TSX formatting currently follows HTML settings.
there are New line before first attribute and New line after last attribute in Code Style -> HTML that control new lines before/after attributes.
Set them to When multiline to place newlines before/after props (note that this works together with wrapping settings – if props fit on one line and Wrap attributes is not set to 'always', they will be kept on one line.).
Props are aligned if Align attributes is enabled
Thanks, Elena - knowing how to set up newlines, wrapping, and alignment of attributes will help me quite a lot!
Can you help me a few other questions?
1. What happens with settings like Insert new line before, Remove new line before, and so on (the ones that take an explicit list of tags) when a tag is for a React component instead of an HTML tag? I'd like to set things up so they will always be on new lines and indented, and will always have their children be indented.
2. Things can get very confusing when you've got parentheses and brackets around a React component tag, and then it has (for example), an arrow function inside of brackets in an attribute, and that arrow function then has another React component in it. Are there settings somewhere to control the indentation and new lines for that kind of situation? i.e. whether to put newlines before/after the parentheses and/or brackets, how to indent, and so on?
3. Things can also get confusing when you've got a ternary operator with a pair of React components, or a conditional expression and a React component. Again, having control over the parentheses, new lines and indentation can be very helpful. Are there settings for this somewhere?
Thanks!
>I'd like to set things up so they will always be on new lines and indented, and will always have their children be indented.
Please feel free to create a request for this feature in youtrack, https://youtrack.jetbrains.com/issues/WEB
Currently, TSX/JSX component tags are treated as 'inline'
>Things can get very confusing when you've got parentheses and brackets around a React component tag, and then it has (for example), an arrow function inside of brackets in an attribute, and that arrow function then has another React component in it.
Please can you provide code snippets (with both actual and desired formatting)?
>Things can also get confusing when you've got a ternary operator with a pair of React components, or a conditional expression and a React component
Looks related to https://youtrack.jetbrains.com/issue/WEB-25338