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

¿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?

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 .

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ú → Preferencias → Configuració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.

Puede agregar una combinación de teclas en el menú Archivo → Preferencias → 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" }

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

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

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.

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.

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

En Ubuntu es Ctrl+ Shift+ I.

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.

Archivo de menú → Preferencias → Configuración

"editor.formatOnType": true

Cuando ingrese el punto y coma, se formateará.

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

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

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ú Archivo → Preferencias → Atajos de teclado → Command+ K Command+ Sluego escribir Formatter y agregar su acceso directo.

Ver un ejemplo:

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.

   

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

   Shift+ Alt+F

   

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

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.

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

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

Menú Archivo → Preferencias → Atajos de teclado y filtro por palabra clave 'formato'.

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ú → Preferencias → Configuració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).

   

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ú Archivo → Preferencias → Configuració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í .

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

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

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

Simplemente instale Visual Studio Keymap de Microsoft. Problema resuelto. :pags

En Mac, use ⌘+ Ky luego ⌘+ F.

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.

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

Consulte esta captura de pantalla:

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.

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

Este no. Utilizar este:

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

Usar extensión ...

Permite el formateo automático del código cuando guarda un archivo.

Inicie Visual Studio Code y Quick Open ( Ctrl+ P), pegue el siguiente comando y presione Enter.

ext instalar formato al guardar

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Código de Visual Studio en Linux:

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

Ctrl+ ]para hacer una sangría masiva