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!
