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

¿Qué es el equivalente a Ctrl + K + F y Ctrl + K + D en Windows en Visual Studio para formatear o “embellecer” el código en el editor de Visual Studio Code?

El formato del código está disponible en el Código VS a través de los siguientes accesos directos:

  • En Windows Shift + Alt + F
  • En Mac Mayús + Opción + F
  • En Ubuntu Ctrl + Shift + I

Alternativamente, puede encontrar el acceso directo, así como otros accesos directos, a través de la funcionalidad de búsqueda provista en el editor con Ctrl + Shift + P (o Comando + Shift + P en Mac), y luego buscar el documento de formato .

Acceso directo al formato de código:

VSCode en Windows – Shift + Alt + F

VSCode en MacOS – Mayús + Opción + F

VSCode en Ubuntu – Ctrl + Shift + I

También puede personalizar este acceso directo usando la configuración de preferencia si es necesario.

Formato de código al guardar el archivo:

El código de Visual Studio permite al usuario personalizar las configuraciones predeterminadas.

Si desea formatear automáticamente su contenido mientras lo guarda, agregue este fragmento de código a continuación en la configuración del espacio de trabajo del código de Visual Studio.

Archivo -> 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 formate any files based on extensions type. "beautify.JSfiles": [ "js", "json", "jsbeautifyrc", "jshintrc", "ts" ] } 

Nota: ahora puede formatear automáticamente archivos de mecanografía verifique mi actualización

Puede agregar una combinación de teclas en Archivo -> Preferencias -> Accesos directos del teclado .

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

O Visual Studio como:

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

La combinación de teclas correcta es shift + alt + f

También tenga en cuenta que a partir de hoy el formato está disponible para estos idiomas:

  • xml (lo eliminaron , demasiados errores)
  • html
  • json
  • javascript
  • typescript
  • do#

VS Code 1.6.1 es compatible con ” Format On Save ” que recogerá automáticamente las extensiones de formateador instaladas pertinentes y formateará todo el documento en cada guardado.

Habilite “Formato al guardar” configurando

 "editor.formatOnSave": true 

Y hay atajos de teclado disponibles (Código VS 1.7 y superior):

Formatear documento completo : Shift + Alt + F

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

En Linux Ctrl + Shift + I. En Windows Alt + Shift + F . Probado con HTML / CSS / JS y VsCode 1.18.0.

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

  1. Haga clic derecho en el archivo
  2. Seleccione Formatear documento ( Alt + shift + f ) desde el cuadro de menú.

enter image description here

En ubuntu es Ctrl + Shift + i

Simplemente haga clic derecho en el texto y seleccione “código de formato”.

VS Code usa js-beautify internamente, pero carece de la capacidad de modificar el estilo que desea usar. La extensión “embellecer” le permite agregar configuraciones

Por alguna razón, Alt + Shift + F no funcionó para mí en Mac VSC 1.3.1, en realidad el comando “Formato de documento” no funcionaba en absoluto. Pero el comando Formatter funcionó muy bien.

Para que pueda usar Command + Shift + P y escriba Formatter o haga su propio atajo en Preferencias / Atajos de teclado Comando + K Comando + S luego escriba Formatter y agregue su atajo. Vea ejemplo: enter image description here

Shift + Alt + f hace el trabajo bien en 1.17.2 y superior.

Para Fedora

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

La mía leyó "key": "ctrl+shift+i"

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


Puede agregar un enlace de clave 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 clave cmd es solo para Mac. Para Windows y Fedora (teclado de Windows) use Ctrl

En Visual Studio Code, Shift + Alt + F hace lo que Ctrl + K + D está haciendo en Visual Studio.

En Mac Shift+Alt+F funciona para mí.

Siempre puede verificar las asociaciones de teclas en el menú:
Code -> Preferences -> Keyboard Shortcuts y filtro por palabra clave ‘formato’.

El atajo 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 ( Mayús + Alt + F ) funcionaba solo para los archivos .json .

Si bien el cambio del comportamiento predeterminado de Visual Studio Code requiere extensión, puede anular el comportamiento predeterminado en el espacio de trabajo o el nivel de usuario y funciona para la mayoría de los idiomas admitidos (puedo garantizar html, javascript, c #)

Nivel de espacio de trabajo

Beneficios

  • No requiere extensión
  • Puede ser compartido entre el equipo

Resultados

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

¿Cómo?

  1. Vaya a: Archivo -> Preferencias -> Configuración del espacio de trabajo

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

Nivel de entorno del usuario

Beneficios

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

Resultados

  • settings.json del usuario. settings.json se modifica (ver ubicación por sistema operativo a continuación)

¿Cómo?

  1. Vaya a: Archivo -> Preferencias -> Configuración de usuario

  2. Agregue o cambie el valor de "editor.formatOnType": false a "editor.formatOnType": true en la configuración del usuario.json

La ubicación de settings.json de tu usuario de Visual Studio Code es:

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

Windows% APPDATA% \ Code \ User \ settings.json Mac $ HOME / Biblioteca / Application Support / Code / User / settings.json Linux $ HOME / .config / Code / User / settings.json El archivo de configuración del espacio de trabajo se encuentra debajo del .vscode carpeta en su proyecto.

Más detalles se pueden encontrar aquí

Código de formato en Visual Studio.

He intentado formatear en Windows 8.

Solo sigue capturas de pantalla.

paso 1. haga clic en ver en la barra de menú superior y luego haga clic en Command Pallete. enter image description here

  1. Entonces Textbox aparecería donde necesitamos el tipo Format

shift + alt + f

enter image description here

Archivo-> Preferencias -> Configuraciones

 "editor.formatOnType": true 

cuando ingresas el punto y coma, se formateará

Simplemente instale Visual Studio Keymap by Microsoft. Problema resuelto. :pag

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

enter image description here

Se abre una nueva ventana, busque “formato” y seleccione la opción que tiene formato según el requisito.

Esta clave no funcionaba para mí en HTML, CSS, documento JS.

Después de buscar, encontré este popular plugin JS-CSS-HTML Formatter con 133,796 instalaciones después de la instalación, solo recargué Windows y presioné CTRL + MAYÚS + F ¡ y funcionó!

En Mac, use + K y luego + F.

Primero debe instalar el complemento apropiado (es decir, XML, C #, etc.). El formateo no estará disponible hasta que haya instalado el complemento correspondiente y guardado el archivo con una extensión adecuada.

La forma más sencilla que uso en vscode (ubuntu) es:

Seleccione el texto que desea formatear con el mouse.

Right click y elija "format selection"

no esta, use esto: Archivo -> Preferencias -> Configuración del espacio de trabajo “editor.formatOnType”: true

Para aquellos que desean personalizar qué archivos JavaScript formatear, puede usar cualquier extensión en la propiedad JSfiles , lo mismo que HTML.

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

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

Usa la extensión …

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

Inicie VS Code Quick Open ( Ctrl + P ), pegue el siguiente comando y presione enter.

ext install format-on-save

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

Si desea personalizar el estilo de formato-documento, debe usar la extensión Beautify .

Consulte esta captura de pantalla:

img

Visual Studio Code LINUX:

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

Ctrl + ] para hacer una sangría masiva

    Intereting Posts