Question

我的问题听起来很熟悉，不确定是否以这种形式添加，但到目前为止，在阅读了十几个问题后，我仍未找到解决方案。

要开发我的项目，我将Visual Studio Code与Angular和Typescript以及一些外部库一起使用。在项目中有这么长的HTML行（不仅是行），所以我希望代码格式正确。让我展示一个简短的例子：

格式化之前：

<grid-column field="formatCode" title="Format" width="65" class="status-column cell-with-button" *ngIf="width > 1" [class]="{ codeColumn: true }" [hidden]="columns[7].hidden"></grid-column>

预期结果：

<grid-column field="incoTermCode" title="Incoterm" width="65"
    class="status-column cell-with-button" *ngIf="width > 1"
    [class]="{ codeColumn: true }" [hidden]="columns[7].hidden"
></grid-column>

因此，当超出行的最大长度时，预期的行为是将行换行。但是，我不想将每个属性/属性移动到新行，而是继续使该行继续直到再次达到最大长度，然后将达到最大行长的属性/属性移动到另一行，等等。

到目前为止，我正在使用更漂亮的代码fomratter，但是没有像我想要的和this is in purpose(scroll down for the answers)那样的选项。因此，这就是Prettier处理上述代码示例格式的方式：

更漂亮的格式：

<grid-column
    field="formatCode"
    title="Format"
    width="65"
    class="status-column cell-with-button"
    *ngIf="width > 1"
    [class]="{ codeColumn: true }"
    [hidden]="columns[7].hidden"
></grid-column>

这不是我想要的，但可以说很好。但是再看一个例子：

预期：

<div class="valid" *ngIf="form.get('pieces').get([i]).get('quantity').valid>
 <img alt="Validity icon - valid" src="assets/common/images/icons/ValidIcon.svg">
</div>

更漂亮：

<div
  class="valid"
  *ngIf="
    form
      .get('pieces')
      .get([i])
      .get('quantity').valid
  "
>
  <img alt="Validity icon - valid" src="assets/common/images/icons/ValidIcon.svg" />
</div>

想象一下，这只是一个简短的示例，我的项目中有很多3-4倍较长的行，其格式是这样的。我真的很喜欢Prettier，因为它在保存修复程序方面做得很好，但是我不想让我的文件比必要的行多10倍以上。

有人可以提出任何建议吗？

Answer 1

禁用更漂亮，并尝试使用这些设置，直到获得所需的格式

    "html.format.wrapLineLength": 100,
    "html.format.wrapAttributes": "aligned-multiple"

Answer 2

查看"html.format.wrapAttributes": "auto"是否将覆盖该更漂亮的格式。

Visual Studio代码-强制代码格式化以使用最大行长来包装属性/属性

2 个答案: