I'm editting a .tsx
-file and are reaching upon this bonkers file-formatting:
... If I enlarge the window a bit, then it makes more sense:
But I would still like to change it, so value
and onClick
aren't aligned all that way to the right. Ideally, it would try to align them with the opening bracket (as they do), unless the opening bracket is more than 35 characters, from the line start. Or something like that.
Now, I assume that it's the TypeScript-formatting that dictates the Code Style for a .tsx
-file. But when I open the settings: Editor >> Code Style >> TypeScript then there are BAZILLIONS of settings.
Which leads me to three questions:
- Does anyone know what I need to change, so object-attributes doesn't follow the opening-brackets width?
- Could I find the name of what I'm looking for, in some smart way? I tried hovering over the massive space, hoping that the little yellow light-bulb could shine some light on, what I was after.
- Are there any presets, to be found somewhere? So I don't need to engineer a new Code Style, if I dislike the default.
CodePudding user response:
Make sure that the following option is disabled:
Settings (Preferences on macOS)
Editor | Code Style | TypeScript | Wrapping and Braces
Function call arguments: Align when multiline
NOTE: It is possible that the default value has been changed somewhere since the previous version as I have seen a few questions for the same option but different language (PHP and JavaScript).
HINT 1: Did you know that you can paste your own code in the preview area and start changing options to see how they will affect it? It helps locating the right option a lot.
HINT 2: There is a special popup that shows formatting rules applied to the code. It does not show all possible options but can give you a hint what to look for. To invoke it:
Use
Help | Find Action...
(orAction
tab on Search Everywhere -- they use to be different popups but are using the same popup nowadays)Type
adjust
to filer actionsSelect and invoke "Adjust code style settings" action
It will give you a popup with applicable rules (it's a limited set: may not list all).
An example for PHP code: