Lemoncode TV

VSCode + Prettier + Svelte

Si trabajas con Visual Studio Code, seguramente utilices el plugin de Prettier para formatear tu código de forma automática.

Cuando nos ponemos a desarrollar con Svelte, podemos ver que este plugin no se integra bien con los componentes que desarrollemos con Svelte

¿Qué podemos hacer?

Manos a la obra

Antes de empezar a tirarnos de los pelos y ponernos a darle al "tab tab tab" para que todo medio se coloque, vamos a ver una solución sencilla que nos permitirá que Prettier se entiendo con Svelte , todo pasa por instalar un paquete de npm a nivel de proyecto.

Partimos de un proyecto creado con Svelte, si te fijas este proyecto no formatea automáticamente el código aunque tengamos Prettier activado como nuestro formateador por defecto.

¿Qué podemos hacer? Vamos a instalar el paquete prettier-plugin-svelte, para ello abrimos el terminal integrado de VS Code (esto podemos hacerlo eligiendo la opción del menú View >> Terminal o usando los atajos de teclado)

npm install prettier-plugin-svelte --save-dev

Para asegurarnos que VSCode se ha enterado del cambio, vamos a hacer un reload del proyecto (para ello elegimos paleta de comandos y buscamos el comando reload).

Ahora si, tenemos nuestro componente de svelte, y podemos "descolocar el código" y al grabar este se formatea de manera automática.

Además de esto, este plugin añade opciones específicas de configuración para Svelte que podemos definir en un fichero .prettierrc

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.