如何配置更漂亮，以便在 VSCODE 中將 jsx 屬性格式化為多行？

Question

我想要這個：

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

與此相反：

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

Answer 1

1. 轉到擴展程序 (Ctrl+Shift+X)，單擊 Prettier
2. 單擊設置圖標並選擇擴展設置
3. 輸入打印寬度並更改值

Answer 2

VSCode 現在添加了一種方法來執行此操作。 您可以編輯 settings.json (ctrl+shift+p)，然后添加以下內容以獲得所需的效果：

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

- 或者 -

"html.format.wrapAttributes": "force"

force-aligned 還將添加縮進以將其與打開標記的行上的屬性對齊。

或者

您可以轉到編輯器中的擴展並搜索 prettier，然后安裝它。 然后您無需設置任何內容，只需轉到您的代碼並按 shift + i 或 shift+alt+f 即可。 干杯! 你的代碼格式很好。

https://prettier.io/