如何設置 VSC / ESlint 不將 css 類移動到新行？

Question

好吧，當我有更多課程時，vsc / eslint 會為我將它們帶到一個新行，正如您在隨附的屏幕截圖中看到的那樣。 如何僅為 css 類禁用此移動？

Answer 1

編輯：[ 2021 年 5 月 24 日]

這個問題的作者通知我，他們需要重置那里的 catch 以獲得默認的VSCode HTML Language Features Formatter來正確格式化他們的代碼。 經過一些研究，我發現這通常是由格式化 HTML 的 VSCode 擴展引起的。 使用具有響應 GitHub 問題的活躍開發人員的擴展和/或信譽良好的擴展非常重要。

原帖：[2021 年 5 月 22 日]

你可以肯定地說它不是 ESLint 格式化你的 class 標簽，因為它不是格式化程序，也不是用於標記/HTML。 我進入我的 VSCode 編輯器，嘗試重現您的圖像顯示的格式 - 我已經打開了一個項目，所以我只是.gitignore'd 一個測試 HTML 文件，並在 Z099FB995346F31C7FCA2E7A3F74DBB1CED00381AA4Z 文件中寫了一個長 class 屬性在 Z099FB995346F31C7549F6E40DB 內格式化 class 屬性與您的示例相同。 這有點奇怪，因為當我寫 html 時，我沒有得到這個結果，但我打開的項目是 Node.js 項目。 我馬上就知道這與我使用的格式化程序有關。 我重新配置了 VSCode 以使用其默認格式化程序和我在下面鍵入的示例的設置。 如果您了解自己在做什么並正確執行，這將解決您的問題。

下面是配置 VSCode 附帶的默認 HTML 格式化程序的設置列表：

    
{
    // local settings.json @ _projectroot/.vscode/settings.json
    

    "html.format.wrapLineLength": 200,
    "html.format.wrapAttributesIndentSize": 4,
    "html.format.wrapAttributes": "auto",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.formatOnSave": true
    }
}

以上將 html defaultFormatter 編輯器設置為其默認設置，即 VSCode HTML 格式化程序，但以防萬一您可能還應該執行以下操作。

---

1. 打開要格式化的 HTML 文件，然后按[F1]鍵。

2. 當上面的快速輸入打開類型Format Document和 select Format Document With...選項。

3. Select 在最底部Configure Default Formatter程序。

4. 並選擇HTML Language Features

如您的示例所示，在我能找到的任何配置下，VSCode 不會拆分屬性標簽。 導致它的原因是我的 VSCode 編輯器是PRETTIER ，您可以使用它，但是您必須設置一個特殊的語言選項設置以使用 html 解析器來處理 html 文件，但是，即使您為您的JavaScript提供的解決方案使用上述 C 格式化程序應該是最直接和最強大的解決方案。

Answer 2

就我而言，我正在開發 Vue 項目，所以我有 Vetur 擴展，它使用更漂亮的格式來格式化 html。

Prettier 將 html 屬性包裝到新行中。 為了防止這種情況，

在.prettierrc文件中添加"printWidth": 300 。 保存時，這會將多個 css 類格式化到同一行。