Sangría y formato CSS del código de Visual Studio

Me gustaría saber si hay alguna forma de activar la sangría automática de un archivo CSS en el código de Visual Studio con el acceso directo ALT+ SHIFT+ F.

Funciona bien con JavaScript, pero extrañamente no con CSS.

Sí, intente instalar la extensión vscode-css-formatter .
Simplemente agrega la funcionalidad para formatear .cssarchivos y el acceso directo permanece igual Alt+ Shift+ F.

Embellecer css / sass / scss / less

para ejecutar esto

entrar alt+shift+f

o

presione F1o ctrl+shift+p y luego ingrese embellecer ..

otro - JS-CSS-HTML Formatter

Creo que tanto esta extensión usa js-beautify internamente

Perdí una hora buscando la mejor opción.

Simplemente juntándolo, para facilitar la lectura y elegir uno de ellos.

Notas:

• CSS y SASS / SCSS / LESS están todos relacionados
• HTML, Javascript, TypeScript, JSON: el código VS ya está formateando
• CSS y relacionados: el código VS no se formatea a partir de hoy

Opciones:

• Para formatear css / sass / scss / less:
  • Más bonita
    • Todos los relacionados con CSS son compatibles, y no otros, elijo este, funciona muy bien.
• Para formatear JavaScript / TypeScript / CSS:
  • Embellecer css / sass / scss / less
    • pero, ya JS, TS son compatibles con el código VS
• Para formatear archivos JS, CSS, HTML, JSON (envuelve js-beautify)
  • Formateador JS-CSS-HTML
    • pero, ya JS, HTML, JSON son compatibles con el código VS
• Para formatear CSS
  • Formateador CSS
    • pero, solo se admite CSS, no todos los relacionados, no se mantienen más de 6 meses

Formatear:

Presione Alt+ Shift+ Fen VS Code, después de instalar Prettier.

Después de abrir bootstrap.min.css local en el código de Visual Studio, parecía sin sangría. Probé el comando ALT + Shift + F pero en vano.

Luego instalado

Extensión CSS Formatter .

Recargué y ALT + Shift + F sangraron mi archivo CSS con encanto.

Bingo !!!

Hay varios para elegir en la galería, pero el que estoy usando, que ofrece un nivel considerable de configurabilidad y aún permanece discreto para el resto de las configuraciones, es Beautify de Michele Melluso . Funciona tanto en CSS como en SCSS y le permite sangrar 3 espacios manteniendo el resto del código en 2 espacios, lo cual es bueno.

Puede arrebatarlo de GitHub y adaptarlo usted mismo, si también le apetece.

Recomiendo usar Prettier ya que es muy extensible pero aún funciona perfectamente desde el primer momento:

1. CMD + Shift + P -> Format Document

o

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Vaya al menú Archivos -> Preferencias -> Extensiones Luego escriba CSS Formatter, espere a que se cargue y haga clic en instalar

Instale la extensión HookyQR.beautify. Embellecerá su javascript, JSON, CSS, Sass y HTML en Visual Studio Code. Son las extensiones más utilizadas para este propósito.

Beautify ( Github ) y Prettier ( Github ) son el mejor complemento para el desarrollo web en Visual Studio Code.

Para formatear el código en Visual Studio cuando lo desee, presione: (Ctrl + K) & (Ctrl + F)

Las reglas de formato automático se pueden encontrar y cambiar en: Herramientas / Opciones -> (barra lateral izquierda): Editor de texto / CSS (o cualquier otro idioma que desee cambiar)

Para el lenguaje CSS, lamentablemente las opciones son muy limitadas. También puede realizar algunos cambios en: ... / Editor de texto / Todos los idiomas