Why does the Prettier extension automatically format some multiline code and not others?

Question

apologies if this has been asked before. Relatively new to coding and just want to ensure I'm following the best practices when writing code. As recommended by a friend, I downloaded the Prettier extension to help format code. However, I found that sometimes it'll format multiline code in objects / div components, but now for all. See attached image below.

I already looked through Prettier's settings but could not find a solution. Please help. Thank you.

Answer 1

Prettier will format to a new line when you exceed 80 characters per line (it is the default option). Please refer to this documentation for more information.

Since you are using visual studio code, you can notice at the bottom right corner of your screen this "Col" counter.

This is how many characters there are from the beginning of the line until where your cursor is currently at. I hope I helped you get a better understanding.