⚙️Integración de Prettier en VS Code para JS

Creación de proyecto

Para comenzar, haremos un proyecto en Vite con JavaScript.

$ npm create vite@latest

Elegimos el nombre de nuestro proyecto y seleccionamos "Vanilla" como elección de framework. Luego, "JavaScript", como elección de lenguaje.

✔ Project name: … ex-js-vite-02
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

Scaffolding project in /Users/ae-mx-10093/Web/SANDBOX/js-project...

Accedemos a la carpeta, instalamos sus dependencias y levantamos el proyecto inicial a través de los comandos:

$ cd [NOMBRE DE TU PROYECTO]
$ npm install
$ npm run dev

Instalación de extensión

Entramos a Visual Studio Code.

Posteriormente, instalamos la extensión "Prettier":

Una vez instalado, debemos de indicarle a Visual Studio Code que cada vez que nosotros salvemos un archivo, realice un proceso de formateo de código.

Para esto, crearemos una carpeta, la cual incluirá la configuración específica para este proyecto que estamos ejecutando, usando Prettier.

Creamos ".vscode" como carpeta, y dentro, `settings.json`.

|- .vscode
   |- settings.json

En settings.json, establemos una configuración personalizada para este proyecto relacionado con Visual Studio Code, para que, al salvar, ejecute Prettier.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Configuración con Prettier

A continuación, crearemos un archivo llamado ".prettierrc", el cual, incluirá la configuración de nuestro formato de código. Así quedaría nuestra estructura de carpetas.

projecto-javascript
├── .gitignore
├── .prettierrc
├── .vscode
│   └── settings.json
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
└── style.css

Entonces, accedemos al archivo .prettierrc.

A través de la documentación, podremos identificar propiedades para agregar o modificar a nuestro gusto lo que se necesite formatear.

{
    "semi": true
}

Esta primera propiedad, indica que todos los "semicolon" o punto y coma al terminar una sentencia, se apliquen en nuestro código.

Entramos a main.js y lo probamos. Salva tu código, incluso aunque no haya ningún cambio. Observa cómo se agregan los puntos y coma.

Listo. Tenemos integrado Prettier en nuestro proyecto.