Search code examples
intellij-ideaphpstorm

How to find the name for indentation of object-attributes in .tsx-file in PhpStorm

I'm editting a .tsx-file and are reaching upon this bonkers file-formatting:

tsx-file format with crazy format

... If I enlarge the window a bit, then it makes more sense:

Bonkers tsx-file

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:

  1. Does anyone know what I need to change, so object-attributes doesn't follow the opening-brackets width?
  2. 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.
  3. Are there any presets, to be found somewhere? So I don't need to engineer a new Code Style, if I dislike the default.
Solution

  • 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

    enter image description here

    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... (or Action tab on Search Everywhere -- they use to be different popups but are using the same popup nowadays)

    • Type adjust to filer actions

    • Select and invoke "Adjust code style settings" action

      enter image description here

    • It will give you a popup with applicable rules (it's a limited set: may not list all).

      An example for PHP code:

      enter image description here