How to configure prettier such that it formats jsx attributes in multiple lines in VSCODE?

user_6367755 0
Viewed 1002

I would like this:

    <input
       id="inputForEmail"
       type="email"
       className="form-control"
       aria-describedby="Enter email address"
       placeholder="Enter email address"
    />

As opposed to this:

<input id="inputForEmail" type="email" className="form-control" aria-describedby="Enter email address" placeholder="Enter email address" />
prettier jsx reactjs javascript
2 Answers

VSCode added a way to do this now. You can edit your settings.json (ctrl+shift+p) and then add the following for the desired effect:

"html.format.wrapAttributes": "force-aligned"

--or--

"html.format.wrapAttributes": "force"

force-aligned will also add indents to align it with the attribute on the line where tag was opened.

OR

You can go to extensions in the editor and search for prettier then install it. Then you don't need to setting up anything just go to your code and press shift + i or shift+alt+f . Cheers! your code is nicely formatted.

https://prettier.io/

user_133097340
  1. Go to extension (Ctrl+Shift+X), click on Prettier
  2. Click on settings icon and select extension settings
  3. Type print width and change the value
user_142881190
Related