¿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

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.

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

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

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