如何配置更漂亮，以便在 VSCODE 中将 jsx 属性格式化为多行？

Question

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" />

Answer 1

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

Answer 2

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/