Js-beautify: 当行达到 wrap-line-length 时，换行并对齐 html 属性

创建于 2017-11-02 · 12评论 · 资料来源: beautify-web/js-beautify

描述

我想得到以下力量的组合：
"wrap-attributes": "force-aligned",
"wrap-line-length": 120
如果我的行达到换行长度，它应该换行整行并将它们与前一行对齐。

输入

美化前的代码是这样的：

<p-dataTable
    [value]="data"
    [(selection)]="selectedRows"
    (selectionChange)="onSelectionChange($event)"
    [editable]="editable"
    [selectionMode]="settings.selectionMode"
    [resizableColumns]="settings.resizable"
    [reorderableColumns]="settings.reorderable"
    responsive="true"
    scrollable="true"
    scrollHeight="550px"
    [lazy]="settings.lazy"
    [totalRecords]="totalRecords"
    [paginator]="settings.paginator"
    [rows]="settings.paginator?.rowsPerPage || 10">
</p-dataTable>

预期产出

使用该功能美化后的代码应如下所示：

<p-dataTable [value]="data" [(selection)]="selectedRows" (selectionChange)="onSelectionChange($event)" [editable]="editable"
             [selectionMode]="settings.selectionMode" [resizableColumns]="settings.resizable" [reorderableColumns]="settings.reorderable"
             responsive="true" scrollable="true" scrollHeight="550px" [lazy]="settings.lazy" [totalRecords]="totalRecords"
             [paginator]="settings.paginator" [rows]="settings.paginator?.rowsPerPage || 10">
</p-dataTable>

html enhancement

资料来源

Helayxa

👍12

最有用的评论

关于这一点的旁注：我实际上是在寻找这两种设置的组合，但现在喜欢提出的示例。我需要的是 VSCode 单独保留属性，当元素长度超过 120 时，它将在新行上对齐属性，所以我想要的是以下内容：

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox" class="custom-control-input" id="referral-filter-checkbox" ng-checked="$ctrl.filterReferralsRx | async : this" ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

到：

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox"
           class="custom-control-input"
           id="referral-filter-checkbox"
           ng-checked="$ctrl.filterReferralsRx | async : this"
           ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

注意第二个输入，它应该单独保留属性，因为它们不超过 120 个字符 + 它们已经对齐。

所以我希望看到的不是强制，而是确保它们在多行时对齐，并在行超过 120 个字符时将它们放在多行。

dietergeerts 于 2018-02-14

👍20

所有12条评论

+1，我和我的团队需要相同的功能，并且似乎与此处要求的功能相同： https ://github.com/beautify-web/js-beautify/issues/1262
我也在 VSCode github 上看到了这个确切的功能： https ://github.com/Microsoft/vscode/issues/2204（最后评论）

我对源代码进行了一些尝试，并且有一些似乎可行的实现：“wrap_attributes”的新选项 - “aligned”，除非达到行长，否则不会强制 attrs 换行，并在线被包裹。

像这样的东西可以工作吗，@bitwiseman？

如果是这样，我们可以讨论细节，或者我可以打开一个 PR。（但老实说，我并不是一个开源专家，对测试和 python 版本以及诸如此类的东西有点困惑）。好吧，python 中不存在 html 美化器，所以也许这不是问题 :) 所以非常感谢您的指导！

cheerypick 于 2017-11-13

@cheerypick
感谢您在实施这一点时采取了行动。

是的，您无需担心 HTML 美化器更改的 Python 版本——该模块还没有 Python 实现。

对于测试，请确保您可以运行构建并且它可以在本地运行。然后更新test/data/html/tests.js 。当您再次运行构建时，它将从该数据文件重新生成可运行的测试。您可以在 #1158 中看到一个示例。如果你想先尝试一些简单的测试，很酷。如果您可以理解matrix测试生成的工作方式，请将您的新值添加到test/data/html/tests.js#L323的属性包装测试中。

无论哪种情况，您都可以随时开始 PR，我们可以在那里讨论。

再次感谢。

（如果您愿意使用您认为需要的任何其他说明来更新 CONTRIBUTING.md，那也将不胜感激，但不是必需的。）

bitwiseman 于 2017-11-13

@cheerypick - 另外，感谢您注意重复。请在#1262 中继续讨论。

bitwiseman 于 2017-11-13

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox" class="custom-control-input" id="referral-filter-checkbox" ng-checked="$ctrl.filterReferralsRx | async : this" ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

到：

<div class="form-check form-group row">
  <label class="custom-control custom-checkbox" id="referral-filter-checkbox-label">
    <input type="checkbox"
           class="custom-control-input"
           id="referral-filter-checkbox"
           ng-checked="$ctrl.filterReferralsRx | async : this"
           ng-click="$ctrl.toggleFilterReferrals()">
    <input type="checkbox" class="custom-control-input"
           id="referral-filter-checkbox" 
           ng-checked="$ctrl.filterReferralsRx | async : this" 
           ng-click="$ctrl.toggleFilterReferrals()">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description text-nowrap">{{ 'MODEL.INBOX.ACTION.FILTER' | translate }}</span>
  </label>
</div>

注意第二个输入，它应该单独保留属性，因为它们不超过 120 个字符 + 它们已经对齐。

所以我希望看到的不是强制，而是确保它们在多行时对齐，并在行超过 120 个字符时将它们放在多行。

dietergeerts 于 2018-02-14

👍20

默认情况下，Visual Studio（不是 Code）以这种方式（对齐，但不强制）格式化 HTML。如果 Code 也可以，那就太好了。

kspearrin 于 2018-04-27

请添加该功能，以便我的 html 模板代码不会变得非常长。

Piping 于 2018-05-07

这是非常需要的。 @cheerypick你还打算为此做公关吗？

auderer 于 2018-05-28

👍3

在 VSCode 中不适合我。
在 .vue 文件中
扩展名：Prettier、Vetur
:-(

christoferd 于 2018-09-29

@克里斯托弗德
不知道你在说什么，请在 gitter 频道上聊天，而不是对已关闭的问题添加评论。

bitwiseman 于 2018-09-29

将 VScode 更新到最新版本后，我再次看到此问题。 Mac OS High Sierra 上的版本 1.30.2。它被设置为自动，突然我的代码开始换行。试过强制对齐，它也不起作用。

aybhalala 于 2019-01-09

@aybhalala @christoferd请具体说明您所看到的内容。在 gitter 上聊天或打开一个新问题。

bitwiseman 于 2019-01-09

@bitwiseman对不起。刚刚发现这是 Prettier 插件的问题。感谢您的回复。

aybhalala 于 2019-01-09

👍1

此页面是否有帮助？

0 / 5 - 0 等级

Js-beautify: 当行达到 wrap-line-length 时，换行并对齐 html 属性

描述

输入

预期产出

最有用的评论

所有12条评论

相关问题