在Visual Studio代码中设置HTML代码的格式，使属性位于不同的行上？

问题描述：

似乎缺少vscode的格式设置。我希望能够以HTML格式，使得我的HTML显示为：在Visual Studio代码中设置HTML代码的格式，使属性位于不同的行上？

<div attrib1=value1 
    attrib2=value2 
    attrib3=value3> 
    Content 
</div>

这是一个功能，我真的很想有！

这将是非常好的，我在github中创建了一个问题，也许它被考虑到了。 https://github.com/Microsoft/vscode/issues/2204 –

这似乎是一个重复的（我讨厌说这个...）[这个问题，]（http://stackoverflow.com/questions/14791592/break-line-on-each-tag-attribute-and-keep-them-aligned-in-visual-studio-html-cod）以及可能的写作方式。请纠正我，如果我错了;） – arbybruce

这一个是关于Visual Studio代码，另一个Visual Studio。不同的编辑，不同的设置，相同的供应商。 –

答

VSCode现在添加了一种方法来执行此操作。您可以编辑您的设置，然后添加所希望的效果如下：

“html.format.wrapAttributes”：“力对齐”

- 或 -

“html.format .wrapAttributes“：”force“

强制对齐还会添加缩进以将其与打开标记的行上的属性对齐。

访问this link了解更多详情或更新。

不幸的是，这是一个小姐（对我来说）。他们应该添加一个换行阈值。有时你的模板很好用，所以属性可以保留在一行中。 – adi518

答

我找不到任何方式在VS-2015中做到这一点，为html文件; 但您可以使用此选项对XML文档：

Tools > Options > XML > Formatting

然后设置选项“对准一个单独的行属性各自”。

现在，您必须右键单击解决方案资源管理器中的html文件，然后选择 Open With...，然后选择XML (Text)Editor。

现在你可以使用格式化代码快捷键在文档中（默认是按Ctrl + ķ，d）

前：

<button type="button" class="btn btn-large btn-floating indigo waves-effect waves-light button-back" 
     ng-click="self.changeState('EvaluationTerms.View')" tooltip-placement="top" >

后：

<button type="button" 
     class="btn btn-large btn-floating indigo waves-effect waves-light button-back" 
     ng-click="self.changeState('EvaluationTerms.View')" 
     tooltip-placement="top">

问题是关于Visual Studio代码而不是Visual Studio – Highmastdon

答

有不同的“格式化程序”扩展名，但是我发现有一个你正在寻找的确切格式的体面工作。它被称为“vscode-tidyhtml”。

https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml

在左侧点击扩展图标
搜索并安装 “vscode-tidyhtml”，重装Visual Studio代码
击中 “F1” 键，然后键入“TidyHtml”，点击进入

它应该格式化HTML以便属性位于不同的行上。我不确定它是否适用于其他文件类型。

它删除** AngularJs **指令。 – tchelidze

@tchelidze这是很好的知道，谢谢你的提示 – EdwardM

在Visual Studio代码中设置HTML代码的格式，使属性位于不同的行上？

相关推荐