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

102

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.

css visual-studio-code A. DC
fuente
has probado esta extensión? marketplace.visualstudio.com/…
ciclomotor

Respuestas:

105

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.

NValchev
fuente
Este está haciendo el trabajo perfectamente. Probé el otro sugerido por ciclomotor, pero cada vez que guardaba un archivo, tenía que guardar dos veces ..
A. DC
1
¿Cómo usar esta extensión en Windows? alt + shift + f no funciona y no hay la opción 'Formato de código' cuando se hace clic derecho.
kyw
1
¿Ha reiniciado vs-code después de la instalación de la extensión? Además, ¿en qué archivos está intentando ejecutar este comando?
NValchev
13
No funcionó para mí. Alt+Shift+Ftodavía dando: Lo siento, pero no hay un formateador para los archivos 'css' instalados. después de la recarga. Embellecer css / sass / scss / menos trabajado.
Leo
Funciona muy bien en Mac, (Cmd + K, Cmd + F) y no afectó el formato de otros tipos de archivos usando el mismo método abreviado de teclado. Gracias
mojave
44

Embellecer css / sass / scss / less

para ejecutar esto

entrar alt+shift+f

o

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

ingrese la descripción de la imagen aquí

otro - JS-CSS-HTML Formatter

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

bhv
fuente
alt + shift + f no hizo nada, pero escribir embellecer ... funcionó.
rtaft
Otra forma de usar JS-CSS-HTML Formatter es -> abrir el menú contextual y elegir Formato de código
Chanaka Fernando
23

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:
  • Para formatear archivos JS, CSS, HTML, JSON (envuelve js-beautify)
  • 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.

Manohar Reddy Poreddy
fuente
Listas más bonitas scss, pero no sass. Beautify afirma apoyar a Sass pero, desde mi experiencia, rompe todo en una sola línea. (hablando explícitamente de Sass, no de Scss)
Frank Nocke
5

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

Shahbaaz Khan
fuente
4

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.

Konrad Viltersten
fuente
4

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
feihcsim
fuente
3

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

Ahmed Adewale
fuente
1

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.

William Dekou
fuente
-8

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

Sion
fuente
6
La pregunta es para Visual Studio Code (VSCode), no para Visual Studio
Pierre