¿Cómo formatea el código en Visual Studio Code (VSCode)?

990

¿Cuál es el equivalente de Ctrl+ K+ Fy Ctrl+ K+ Den Windows en Visual Studio para formatear o "embellecer" el código en el editor de código de Visual Studio?

Brandon Clapp
fuente
47
Para todos aquellos que tratan desesperadamente de formatear XML (que actualmente no parece posible), pueden lograrlo instalando una extensión. He encontrado herramientas XML para hacer bien el trabajo. Descargo de responsabilidad: no soy el autor ni estoy relacionado con este proyecto ...
informatik01
Si bien VSCode tiene muchas menos opciones de menú que VS (¿nueva tendencia?), Tiene una amplia información y tutoriales en el menú AYUDA, que puede haber respondido a esta pregunta.
Roland
Para todos aquellos que luchan por obtener el formato de trabajo incluso después de probar las combinaciones válidas en Visual Studio Code, no olviden seleccionar el tipo de lenguaje de programación apropiado, está en la parte inferior derecha de la ventana de Visual Studio Code junto a esa carita sonriente. Una vez que haga eso, descubrí que funciona de inmediato y no necesita ningún complemento adicional para formatear el código.
Mr.Hunt

Respuestas:

3846

El formato del código está disponible en Visual Studio Code a través de los siguientes accesos directos:

  • En Windows Shift+ Alt+F
  • En Mac Shift+ Option+F
  • En Linux Ctrl+ Shift+I

Alternativamente, puede encontrar el acceso directo, así como otros accesos directos, a través de la 'Paleta de comandos' provista en el editor con Ctrl+ Shift+ P(o Command+ Shift+ Pen Mac), y luego buscando el formato del documento .

Brandon Clapp
fuente
28
También tenga en cuenta que el idioma del código debe ser correcto. es decir, el Código de formato no estará disponible si se selecciona texto sin formato, pero cambiar a JSON (por ejemplo) formateará el texto seleccionado de manera feliz. (tan feliz como un editor de texto puede ser de todos modos)
Stephen Precio
44
@JoSmo: en Ubuntu, abrí Archivo> Preferencias> Atajos de teclado. Hay un elemento para {"key": "ctrl + shift + i", "command": "editor.action.format", "when": "editorTextFocus"}. El comando "ctrl + shift + i" funciona para mí.
Asheesh
18
Además, aparentemente el archivo debe guardarse primero en el disco. Tenía una porción de HTML + Javascript donde no podía formatear el JS, así que lo pegué en una ventana temporal y configuré el idioma, pero esto tampoco ayudó hasta que se guardó.
Jonas
99
Para las personas que dicen que no funciona en una Mac, esto parece un conflicto entre el acceso directo y el sistema de entrada de texto OS X para caracteres acentuados que depende de la configuración regional y la configuración del teclado configurados: github.com/Microsoft/vscode/issues / 8914 # issuecomment-245947844
Chris Adams
8
Esto no funciona para mí en la última versión de VS Code y en Windows 10, ¿esto supone tener una cierta extensión instalada?
JayPex
479

Atajo de formato de código:

Visual Studio Code en Windows - Shift+ Alt+F

Visual Studio Code en MacOS - Shift+ Option+F

Código de Visual Studio en Ubuntu - Ctrl+ Shift+I

También puede personalizar este acceso directo utilizando una configuración de preferencias si es necesario.

Formateo de código al guardar el archivo:

Visual Studio Code permite al usuario personalizar la configuración predeterminada.

Si desea formatear automáticamente su contenido mientras guarda, agregue el fragmento de código siguiente en la configuración del espacio de trabajo de Visual Studio Code.

Archivo de menú → PreferenciasConfiguración del espacio de trabajo

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Nota: ahora puede formatear automáticamente archivos TypeScript. Mira mi actualización.

Bharathi Devarasu
fuente
También funciona para otro idioma con esto: Beautify Extension
equiman
3
no estoy seguro de por qué es diferente en CentOS, pero esShift + Alt + I
a11smiles
2
beautify.onSave no es válido con la extensión de eslint instalada
Ben Petersen
En Ubuntu Mate 17.04 Shift + Alt + Itambién
Pini Cheyni
2
@ClintEeastwood intente usar prettier.singleQuote: trueen su configuración de código vs.
Enn
216

Puede agregar una combinación de teclas en el menú ArchivoPreferencias → Métodos abreviados de teclado .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

O Visual Studio como:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }
hardkoded
fuente
23
En Windows, reemplace cmdcon ctrl- ¡no solo copie y pegue ciegamente como lo hice yo!
Jens Ehrich
3
"editor.action.format" está funcionando nuevamente. Ahora formatea todo el documento si no se selecciona nada, de lo contrario formatea la selección.
Caperucita Roja
199
  1. Haga clic derecho en el archivo
  2. Seleccione Formatear documento en el menú:
    • Ventanas: Alt Shift F
    • Linux: Alt Shift I
    • Mac OS: F

Ingrese la descripción de la imagen aquí

Siddarth Kanted
fuente
18
Para Linux, los atajos de teclado son Ctlr + Shift + I
Lucas
¿Qué es un cuadro de menú?
Peter Mortensen
@PeterMortensen el cuadro en el que ves el menú. En la captura de pantalla, es el cuadro blanco con "Formatear documento", "Cortar", "Copiar", "Pegar", etc.
Ben Leggiero
117

La combinación de teclas correcta es Shift+ Alt+ F.

César
fuente
2
Cuando solo copia y pega el código del portapapeles a una nueva pestaña , no pasa nada. Solución: guarde el código en un archivo con una extensión de archivo relacionada (por ejemplo, * .json). Entonces funciona. Supongo que la razón es que el embellecedor conoce el idioma de la extensión y no hace una autodetección basada en el código.
Belleza
Este acceso directo funciona para MAC. En Windows formatea el código.
C. Damoc
63

Para Fedora

  1. Haga clic en File-> Preferences-> Keyboard shortcuts.
  2. Debajo Default Keyboard Shortcuts, busque ( Ctrl+ F) para editor.action.format.

Lectura mía "key": "ctrl+shift+i"

Puedes cambiarlo también. Consulte esta respuesta sobre cómo ... o si se siente un poco flojo al desplazarse hacia arriba:


Puede agregar una combinación de teclas en "Preferencias-> Atajos de teclado"

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

O Visual Studio como:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }


Tenga en cuenta: la cmdclave es solo para Mac. Para Windows y Fedora (teclado de Windows) useCtrl


EDITAR :

Según la versión de Visual Code, 1.28.2esto es lo que encontré.

editor.action.formatya no existe. Ahora ha sido reemplazado por editor.action.formatDocumenty editor.action.formatSelection.

Escriba editor.action.formaten el cuadro de búsqueda para ver los accesos directos existentes.

Para cambiar las combinaciones de teclas, siga estos pasos:

  1. Haga clic editor.action.formatDocumentoeditor.action.formatSelection
  2. A la izquierda aparece un ícono similar a un bolígrafo: haga clic en él.
  3. Aparece una ventana emergente. Presione la combinación de teclas deseada y presione Entrar.
abyshukla
fuente
Con este comando, en mis archivos TypeScript, la comilla simple se convierte en comilla doble. ¿Cómo resolver eso?
DioBrando
Parece que no puedo localizar esto en la nueva configuración de la interfaz de usuario basura.
Oliver Dixon
63

En Linux es Ctrl+ Shift+ I.

En Windows es Alt+ Shift+ F. Probado con HTML / CSS / JavaScript y Visual Studio Code 1.18.0.

Para otros idiomas, es posible que deba instalar un paquete de idioma específico.

Niklas R.
fuente
61

Visual Studio Code 1.6.1 admite " Formatear al guardar ", que recogerá automáticamente las extensiones de formateador relevantes instaladas y formateará todo el documento en cada guardado.

Habilite "Formatear al guardar" configurando

"editor.formatOnSave": true

Y hay atajos de teclado disponibles (Visual Studio Code 1.7 y superior):

Formatee todo el documento : Shift+ Alt+F

Selección de formato solamente : Ctrl+ K, Ctrl+F

Dariusz
fuente
Sugiero la extensión EsLint para VS Code marketplace.visualstudio.com/…
Dariusz
44

En Ubuntu es Ctrl+ Shift+ I.

ranbuch
fuente
77
Supongo que depende del idioma. CTRL + SHIFT + Ifunciona para JavaScript pero no para PHP, por ejemplo.
Jamie Carl
32

Simplemente haga clic derecho en el texto y seleccione "Formatear código".

Visual Studio Code usa js-beautifyinternamente, pero carece de la capacidad de modificar el estilo que desea usar. La extensión "embellecer" le permite agregar configuraciones.

Gerfried
fuente
1
Claro, estoy usando Windows y funciona como se describe: puede depender de la versión de VScode (¡actualice!) Y de la extensión del archivo. Por favor prueba con HTML.
Gerfried
32

Archivo de menú → PreferenciasConfiguración

"editor.formatOnType": true

Cuando ingrese el punto y coma, se formateará.

Alternativamente, también puedes usar "editor.formatOnSave": true.

M Fatih Koca
fuente
Por extraño que parezca, he encontrado que el comportamiento de esta configuración puede ser diferente que shift+alt+fen ciertas situaciones. ¡No sé por qué!
JzInqXc9Dg
Cuando tengo esta habilitación y creo una función en C #, puedo completar todo y seguir adelante, pero la función no se formatea hasta que haga la función "Formatear documento". No sé por qué la configuración anterior no se formatea después de escribir una función.
Daniel Jackson
25

Shift+ Alt+ Fhace el trabajo bien en 1.17.2 y superior.

Piotrek Hryciuk
fuente
24

Por alguna razón, Alt+ Shift+ Fno funcionó para mí en Mac Visual Studio Code 1.3.1, y en realidad el comando "Formatear documento" no funcionó en absoluto. Pero el comando Formatter funcionó muy bien.

Entonces puede usar Command+ Shift+ Py escribir Formatter o hacer su propio acceso directo en el menú ArchivoPreferenciasAtajos de tecladoCommand+ K Command+ Sluego escribir Formatter y agregar su acceso directo.

Ver un ejemplo:

Ingrese la descripción de la imagen aquí

Aleksander Tymczenko
fuente
23

Código de formato en Visual Studio.

He intentado formatear en Windows 8.

Solo sigue las capturas de pantalla a continuación.

  1. Haga clic en Ver en la barra de menú superior y luego haga clic en Paleta de comandos.

    Ingrese la descripción de la imagen aquí

  2. Luego aparecerá un cuadro de texto donde necesitamos escribir Formato

    Shift+ Alt+F

    Ingrese la descripción de la imagen aquí

afeef
fuente
1
Algunas veces copio pegar xml en un nuevo archivo y quiero formatearlo sin guardar el archivo. ¡Esto es perfecto para tales situaciones!
user3885927
19

En Visual Studio Code, Shift+ Alt+ Festá haciendo lo que Ctrl+ K+ Destá haciendo en Visual Studio.

Burk
fuente
18

El acceso directo de formato en C # no funcionó para mí hasta que instalé Mono para Mac OS X, DNVM y DNX .

Antes de instalar Mono, el acceso directo de formato automático ( Shift+ Alt+ F) solo funcionaba para los .jsonarchivos.

Jo Smo
fuente
Para formatear C # uno necesita instalar extensiones. Normalmente el omnisharp debería funcionar. Sin embargo, hay un error en omnisharp. Hasta que se solucione el error, tenemos que usar la extensión Leopotam.csharpfixformat. Anula omnisharp. Después de instalar la extensión C # FixFormat, puedo volver a formatear documentos.
Oncel Umut TURER
18

En Mac, Shift+ Alt+ Ffunciona para mí.

Siempre puede verificar las combinaciones de teclas en el menú:

Menú ArchivoPreferenciasAtajos de teclado y filtro por palabra clave 'formato'.

Lukasz Czerwinski
fuente
14

Si bien cambiar el comportamiento predeterminado para Visual Studio Code requiere una extensión, puede anular el comportamiento predeterminado en el espacio de trabajo o el nivel de usuario. Funciona para la mayoría de los lenguajes compatibles (puedo garantizar HTML, JavaScript y C #).

Nivel de espacio de trabajo

Beneficios

  • No requiere una extensión
  • Se puede compartir entre equipos

Resultados

  • .vscode/settings.json se crea en la carpeta raíz del proyecto

¿Cómo?

  1. Vaya a: Archivo de menú → PreferenciasConfiguración del espacio de trabajo

  2. Agregue y guarde "editor.formatOnType": trueen settings.json (que anula el comportamiento predeterminado para el proyecto en el que trabaja creando el archivo .vscode / settings.json).

    Cómo se ve

Nivel de entorno del usuario

Beneficios

  • No requiere extensión
  • Ajustes de entorno de desarrollo personal para gobernarlos a todos (configuración :))

Resultados

  • El usuario settings.jsonestá modificado (ver ubicación por sistema operativo a continuación)

¿Cómo?

  1. Vaya a: menú ArchivoPreferenciasConfiguración de usuario

  2. Agregue o cambie el valor de "editor.formatOnType": falsea "editor.formatOnType": trueen la configuración del usuario.json

La settings.jsonubicación del usuario de Visual Studio Code es:

Ubicaciones del archivo de configuración dependiendo de su plataforma, el archivo de configuración del usuario se encuentra aquí:

  • Ventanas: %APPDATA%\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.jsonel archivo de configuración del espacio de trabajo se encuentra en la carpeta .vscode de su proyecto.

Más detalles se pueden encontrar aquí .

Tecnologías de Saturno
fuente
9

Por defecto, esta clave no me funcionaba en documentos HTML, CSS y JavaScript.

Después de buscar, encontré el popular plugin JS-CSS-HTML Formatter con 133,796 instalaciones .

Después de la instalación, simplemente vuelva a cargar las ventanas y presione Ctrl+ Shift+ F, ¡y funcionó!

mumair
fuente
Sí, pero ¿solo 2 de 5 estrellas? ¿Seriamente?
kmoser
Solo un recordatorio: esta respuesta se escribió originalmente en 2017 y esa vez la funcionalidad de VS Code era prácticamente funcional a través de complementos u otros hacks, ninguna de las otras soluciones me funcionó esa vez, así que descubrí por mí mismo lo que realmente funcionó esa vez y no funcionó le importaba cuántas estrellas tiene :-) Ahora 2020 y el soporte de formato es fantástico fuera de la caja.
mumair
No creo que VS Code todavía sea compatible con el formato CSS de fábrica. Instalé el complemento Prettier ( prettier.io ) que maneja JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML. 5.6 millones de instalaciones y 4 estrellas.
kmoser
Me alegro de que hayas encontrado más bonito: P El soporte de formato está allí, pero no es tan bueno, utilizo más bonito como dependencia de desarrollo en todos mis proyectos con .prettierrcy plugin. Me temo que un día más bonito se fusionará con el código vs :)
mumair
8

Seleccione el texto, haga clic derecho en la selección y seleccione la opción "paleta de comandos":

Ingrese la descripción de la imagen aquí

Se abre una nueva ventana. Busque "formato" y seleccione la opción que tenga formato según el requisito.

Akhil Ghatiki
fuente
7

En Mac, use + Ky luego + F.

Gopal Devra
fuente
7

Para aquellos que quieran personalizar qué archivos JavaScript formatear, pueden usar cualquier extensión de la JSfilespropiedad. Lo mismo se aplica a HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Esto permitirá embellecer al guardar para TypeScript, y puede agregar XML a la opción HTML.

Almiar
fuente
1
¿Dónde pongo esto? También ayuda agregar que embellecer es una extensión ...
rotgers
Usted podría haber mencionado dónde poner este código.
gromit190
6

Si desea personalizar el estilo de formato de documento, debe utilizar la extensión Embellecer .

Consulte esta captura de pantalla:

img

Jerry Ni
fuente
6

Primero debe instalar el complemento apropiado (es decir, XML, C #, etc.).

El formato no estará disponible hasta que haya instalado el complemento correspondiente y guarde el archivo con una extensión adecuada.

Nigel Feasey
fuente
Beautify te pregunta si no sabe qué formateador usar, lo que permite diseñar cshtml.
Cees Timmerman el
6

La forma más simple que uso en Visual Studio Code (Ubuntu) es:

Seleccione el texto que desea formatear con el mouse.

Haga clic derecho y elija "Selección de formato" .

Ashutosh Jha
fuente
5

Este no. Utilizar este:

Archivo de menú → PreferenciasConfiguración del espacio de trabajo , "editor.formatOnType" : verdadero

杨恩锋
fuente
3
¿Este no qué? ¿Te refieres a otra respuesta? ¿Si sí, cual?
Peter Mortensen
2

Código de Visual Studio en Linux:

Ctrl+ [al bloque de código no sangrado y

Ctrl+ ]para hacer una sangría masiva

Hvitis
fuente