ejecutar - ¿Formatear código html en Visual Studio Code de modo que los atributos estén en líneas separadas?

visual studio code html preview

Question

Parece que hay una falta de configuración de formato para vscode. Quiero poder formatear html de modo que mi html aparezca como:

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

¡Esta es una funcionalidad que realmente me encantaría tener!

Answer 1

Existen diferentes extensiones de "formateador", pero una que encontré hace un trabajo decente con el formato exacto que está buscando. Se llama " vscode-tidyhtml ".

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

1. Haga clic en el icono de extensiones en el lado izquierdo
2. Busque e instale "vscode-tidyhtml", vuelva a cargar Visual Studio Code
3. Presione la tecla "F1", y luego escriba "TidyHtml", presione enter

Debería formatear HTML para que los atributos estén en diferentes líneas. No estoy seguro de si funciona bien para otros tipos de archivos.

Answer 2

No pude encontrar ninguna manera de hacerlo en VS-2015, para documentos html ; pero puedes usar esta opción para documentos XML:

Tools > Options > XML > Formatting 

A continuación, configure la opción "Alinear atributos en una línea separada".

Ahora tiene que hacer clic derecho en su archivo html en el explorador de soluciones y elegir Open With... luego seleccionar XML (Text)Editor .

Ahora puede usar la clave corta del código de formato en su documento (de manera predeterminada es Ctrl + K , D )

Antes de:

<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" >

Después:

<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">

Answer 3

VSCode agregó una manera de hacer esto ahora. Puede editar su configuración y luego agregar lo siguiente para el efecto deseado:

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

--o--

"html.format.wrapAttributes": "force"

force-align también agregará sangrías para alinearlo con el atributo en la línea donde se abrió la etiqueta.

Visita github.com/Microsoft/vscode/issues/2204 para más detalles o actualizaciones.