Prettier Visual Studio Code

Formatear código de forma consistente puede ser un desafío, pero con la extensión «PRETTIER» haremos que sea posible mantener automáticamente la consistencia en toda la base de código que desarrollaremos.

Para trabajar con Prettier en Visual Studio, deberemos instalar la extensión. Para hacer esto, busque Prettier – Code Formatter en el panel de extensión.

Con la extensión Prettier instalada, ahora puede usarla para formatear su código. Para comenzar, vamos a explorar el uso del comando Format Document. Este comando hará que su código sea más consistente con el espaciado formateado, el ajuste de líneas y las comillas.

Para abrir la paleta de comandos, puede usar CTRL + SHIFT + P , en la paleta de comandos, busque format y seleccione Format Document.

Quizá se le pida elegir qué formato usar. Para hacerlo, haga clic en el botón Configure:

Seleccione Prettier – Code Formatter.

Hasta ahora, ha tenido que ejecutar manualmente un comando para formatear su código. Para automatizar este proceso, podemos elegir un ajuste en VS Code para que sus archivos se formateen automáticamente cuando se guarde.

Para hacer este ajuste, pulse CTRL + , para abrir el menú Settings. Una vez abierto el menú, busque Editor: Format On Save y asegúrese de que la opción está seleccionada

Una vez configurado esto, puede escribir su código de la forma habitual y se formateará automáticamente cuando guarde el archivo.

Para toda la configuración, esta es la página oficial:

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Peacock - Visual Studio Code

Cuando tenemos 2 o mas proyectos abiertos en visual studio nos podemos confundir porque no sabemos cual es el proyecto que estoy buscando en ese momento, por lo cual para hacer mas fácil ubicarlo instalamos la extensión «PEACOCK» que lo que hace es cambiarle el color almarco de trabajo, y así reconocerlo más fácilmente.

Para toda la configuración, esta es la página oficial:
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Material Icon Theme - Visual Studio Code

«Material Icon Theme» sirve para colocar iconos alusivos a las páginas creadas. Por ejemplo: si se crea una página HTML se coloca un icono alusivo a ella y así sucesivamente.

Para toda la configuración, esta es la página oficial: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Para instalarlo en Visual Studio ver el video de abajo:

Dobri Next - Visual Studio Code

Aunque Visual Studio Code ya viene con un tema o fondo de escritorio predeterminado, personalmente prefiero usar el complemento «Dobri Next» el cual viene con 23 colores de fondo  diferentes.

Para su instalación vea el video adjuntado debajo:

Instalación de Visual Studio Code

Para la descarga del archivo ejecutable «Visual Studio Code» debemos de ir al siguiente link:  https://code.visualstudio.com/  dentro de esta página oficial, empezaremos la descarga e instalación. Para mayor referencia puede ver el video insertado a continación: