Configurar Prettier en Visual Studio Code

Autor: | Última modificación: 5 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

En el mundo de la programación existen muchas herramientas que nos permiten facilitar el proceso de escribir código. Algunas de estas se dedican a automatizar procesos que, normalmente, toman mucho tiempo, como puede ser formatear nuestros proyectos. En este post, te enseñaremos cómo configurar Prettier en Visual Studio Code, una extensión muy útil para mejorar la legibilidad de nuestro código.

¿Qué es Prettier?

Prettier es un formateador de código que puede usarse en distintos softwares para hacer que nuestras líneas sigan un determinado formato de manera automática. Esto quiere decir que ya no tendremos que pensar en escribir las comillas de determinada manera o pensar en dividir las líneas en un largo, pues Prettier lo hace por nosotros.

En nuestro post sobre cómo utilizar Prettier en Visual Studio Code te explicamos más sobre esta poderosa herramienta, cómo instalarla y cómo usarla en el editor de código Visual Studio Code. Sin embargo, hay configuraciones que puedes hacer para personalizar aún más este formateador. Por ello, a continuación, te enseñamos cómo configurar Prettier en Visual Studio Code.

¿Cómo configurar Prettier en Visual Studio Code?

Una vez tienes instalada esta extensión, es muy sencillo configurar Prettier en Visual Studio Code. Para ello, deberás ir a la esquina superior izquierda y seleccionar file, preferences, settings. Esto nos da acceso a la UI. Allí podrás buscar Prettier y ver todos los settings que puedes manipular para configurar Prettier en Visual Studio Code.

Te recomendamos buscar format on save en esta sección para asegurarte de que Prettier ajuste tu código al formato deseado cada vez que se guarde el archivo. Para ello, esta opción debe ir marcada. También puedes definir format on paste, format on type o format on save mode.

Ahora, si lo que quieres es acceder a esta misma configuración pero en formato JSON, debes hacer otro proceso. Si no conoces este formato, te invitamos a leer nuestro post sobre qué es un archivo JSON.

En Visual Studio Code, la combinación de teclas CTRL + SHIFT + P nos saca el menú. Esto también se puede lograr con F1 en distintos ordenadores, te invitamos a probar cuál te funciona. En el menú que obtienes podrás buscar settings, es decir, configuración. Allí podrás ver las opciones open setting (UI) y open settings (JSON).

Entonces, basta con elegir la opción JSON para ver las configuraciones en este formato. Este archivo es el resumen de las elecciones que haces en el formato UI. Esto también puede suceder en el sentido contrario. Es decir, configurar Prettier en Visual Studio Code desde JSON se reflejará en el UI.

Algunos settings para configurar Prettier en Visual Studio Code

Uno de los settings que tenemos como base en nuestro archivo JSON es el siguiente:

«editor.defaultFormatter»: «esbenp.prettier-vscode»;

La anterior configuración se refiere a que el formateador por defecto se instalará como Prettier. En este JSON también puedes ver el formatOnSave:

«editor.formatOnSave»:true,

Luego podemos aplicar algunas de las opciones de Prettier, como las siguientes:

«prettier.arrowParens»:»avoid»,

«prettier.singleQuote»: true,

«prettier.trailingComma»: «all»,

Las opciones anteriores definen que queremos manejar siempre las comillas simples y las trailingComma. Además, la primera opción dice que, cuando pueda, el formateador nos quite los paréntesis de los arrow functions.

Otra manera de configurar Prettier en Visual Studio Code es crear un archivo en la raíz del proyecto que sea prettierrc. Allí podemos crear un objeto que sobrescriba las configuraciones que tenemos.

¿Quieres seguir aprendiendo?

Ahora que sabes cómo configurar Prettier en Visual Studio Code para facilitar la escritura de código, ¡te invitamos a que empieces a escribir tus propios proyectos! Si quieres seguir aprendiendo a desarrollar proyectos de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva en el que aprenderás todo lo necesario para convertirte en un desarrollador web profesional en pocos meses. ¿Quieres seguir aprendiendo con nosotros? ¡Inscríbete ya y cambia tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!