¿Cómo formatea el código al guardar en VS Code?

185

Me gustaría formatear automáticamente el código TypeScript utilizando el formateador incorporado cuando guardo un archivo en Visual Studio Code.

Conozco las siguientes opciones, pero ninguna de ellas es lo suficientemente buena:

  • Formatear manualmente Shift + Alt + F
  • Formato en tipo "editor.formatOnType": true
    • Formatea la línea cuando presiona enter. Desafortunadamente, lo deja sin formato cuando hace clic con el mouse en otra línea o presiona la flecha arriba / abajo.
  • Usar extensión existente
    • He intentado esto uno , pero no parece funcionar muy bien.
  • Usar embellecer "beautify.onSave": true
    • No funciona con TypeScript
  • Escribir extensión personalizada
    • Es complicado si desea manejar autoguardados y compilaciones correctamente.
visual-studio-code vscode-settings code-formatting Tomás Nikodym
fuente

Respuestas:

279

A partir de septiembre de 2016 (VSCode 1.6), esto ahora es oficialmente compatible .

Agregue lo siguiente a su settings.jsonarchivo:

"editor.formatOnSave": true
Tomás Nikodym
fuente
55
¿Hay alguna manera de excluir algunos archivos? es decir, solo quiero formatear archivos .js, no archivos .html.
gabrielAnzaldo
@ gabodev77prettier en VS Code tiene opciones para esto (por ejemplo, prettier.javascriptEnable, prettier.cssEnable ...) aunque no para HTML.
Freewalker
77
¿Se puede formatear en Autoguardar? formatOnSave funciona para mí solo cuando presiono manualmente Cmd + S.
Freewalker
@gabrielAnzaldo Vea esta pregunta sobre cómo excluir ciertos archivos / tipos de archivos: stackoverflow.com/questions/44831313/…
Gama11
@LukeWilliams Esto no es posible actualmente, hay una solicitud de función aquí: github.com/microsoft/vscode/issues/45997
Gama11
63

Para formatear automáticamente el código al guardar:

  • Presione Ctrl ,para abrir las preferencias del usuario

  • Ingrese el siguiente código en el archivo de configuración abierto

    {
    "editor.formatOnSave": true
}

  • Guardar el archivo

Fuente

Zameer
fuente
33

Si desea formatear automáticamente al guardar solo con fuente Javascript, agregue este en Users Setting(presione Cmd,o Ctrl,):

"[javascript]": { "editor.formatOnSave": true }
Long Nguyen
fuente
mi versión, comencé a buscar "formatOnSave" y solo tuve que hacer clic en una casilla de verificación en la IU de configuración de código Vs
Akin Hwan
25

Ya no es necesario agregar comandos. Para aquellos que son nuevos en Visual Studio Code y buscan una manera fácil de formatear el código al guardar, sigan los pasos a continuación.

  1. Abra Configuración presionando [Cmd+,]en Mac o usando la siguiente captura de pantalla.

Código VS - Abrir imagen de comando de configuración

  1. Escriba ' formato ' en el cuadro de búsqueda y active la opción ' Formatear al guardar '.

ingrese la descripción de la imagen aquí

Estás listo. Gracias.

Balasubramani M
fuente
4

Para usuarios de MAC , agregue esta línea a su Configuración predeterminada

La ruta del archivo es: / Users / USER_NAME / Library / Application Support / Code / User / settings.json

"tslint.autoFixOnSave": verdadero

La muestra del archivo sería:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}
Ricardo
fuente