- ¿Qué tipo de herramientas son?
- ¿Qué es Prettier y para qué sirve?
- Cómo instalar y usar Prettier paso a paso
- Usar npx para ejecutar herramientas locales
- Instalación global vs local: ¿Cuál conviene más?
Cuando trabajamos en proyectos de JavaScript, usamos muchas herramientas que nos ayudan a que el código funcione mejor, sea más ordenado o esté listo para ejecutarse en el navegador. Algunas de estas herramientas no se usan dentro del código como funciones o librerías, sino que funcionan desde la terminal del sistema, es decir, como programas que ejecutamos por comandos.
Vamos a ver qué tipos de herramientas encontramos y cómo usarlas de forma sencilla en nuestros proyectos.
¿Qué tipo de herramientas son?
Aquí vemos algunas herramientas comunes que usamos desde la línea de comandos:
| Tipo de herramienta | Ejemplos | Qué hacen |
|---|---|---|
| Formateo de código | prettier | Organizan el código según reglas de estilo comunes |
| Compiladores / Transpiladores | babel | Transforman nuestro código para que funcione en más lugares |
| Automatización de tareas y empaquetado | gulp, webpack | Agrupan archivos, optimizan imágenes, compilan CSS, etc. |
Estas herramientas no se importan en el código con import o require. En vez de eso, las usamos directamente en la terminal con comandos como npx, npm run, o incluso escribiendo la ruta completa del ejecutable. Veamos un ejemplo práctico usando una de las más conocidas: Prettier.
¿Qué es Prettier y para qué sirve?
Mira este código sin formatear:
const fn = (a, b) => {
const c = a + b; return c;
} // Es válido, pero cuesta leerlo, ¿cierto?
Después de aplicarle Prettier
const fn = (a, b) => {
const c = a + b;
return c;
};
Ahora se ve claro y ordenado. Además, todos los miembros del equipo pueden mantener el mismo formato automáticamente.
Cómo instalar y usar Prettier paso a paso
Vamos a ver cómo instalar Prettier en un proyecto.
Paso 1: Instalar como dependencia de desarrollo
Como Prettier es algo que usamos durante el desarrollo y no cuando el proyecto está funcionando en el navegador, lo instalamos con la siguiente instrucción:
npm install --save-dev prettier
Esto instala el paquete dentro de la carpeta del proyecto, en una carpeta que se llama node_modules.
Paso 2: Usar Prettier desde la terminal
Podemos pedirle a Prettier que formatee todos los archivos de nuestro proyecto ejecutando:
prettier --write .
Pero… si lo hacemos así directamente, puede que aparezca este error:
command not found: prettier
¿Qué está pasando?
Pero sí está en una ruta especial que crea npm:
node_modules/.bin/prettier
Entonces podríamos escribir:
node_modules/.bin/prettier --write .
Funciona, pero es demasiado largo y poco práctico. Aquí es donde entra una herramienta muy útil que se llama npx.
Usar npx para ejecutar herramientas locales
npx es una utilidad que viene incluida desde npm v5.2 en adelante. Sirve para ejecutar paquetes sin necesidad de instalarlos globalmente ni escribir rutas largas.
Con npx, simplemente escribimos:
npx prettier --write .
Y npx se encarga de:
- Buscar Prettier dentro del proyecto.
- Ejecutarlo usando la versión instalada localmente.
- Si no lo encuentra localmente, lo descarga temporalmente y luego lo borra.
Usamos npx con muchas otras herramientas, como:
# Analiza la calidad del código
npx eslint .
# Compila y empaqueta el proyecto
npx webpack
Esto nos ahorra tiempo y mantiene nuestro entorno limpio.
Instalación global vs local: ¿Cuál conviene más?
También podríamos instalar Prettier globalmente:
npm install -g prettier
Esto haría que puedas ejecutar prettier desde cualquier carpeta, pero tiene sus problemas:
| Problema | Por qué es un inconveniente |
|---|---|
| Cada dev debe instalarla por separado | No todos tienen lo mismo instalado |
| Pueden existir versiones diferentes | Diferencias en el formato del código o errores inesperados |
¿Cuál es la mejor opción entonces?
Siempre que sea posible, instala Prettier como dependencia local del proyecto y ejecútalo con npx. Así todos los que trabajen contigo usarán la misma versión, sin complicaciones.
Resumen
- Algunas herramientas como Prettier, Babel o Webpack se ejecutan desde la terminal, no desde el código.
- Si se instalan localmente, los ejecutables no están en el sistema (PATH), por eso no funcionan directamente.
- Por defecto,
npmguarda los ejecutables ennode_modules/.bin. - Para ejecutar estas herramientas fácilmente, usamos
npx, que busca y ejecuta los ejecutables locales. - Evita instalar paquetes globalmente para no tener diferencias entre entornos de desarrollo.
- La forma recomendada es instalar Prettier localmente y usarlo con
npxpara mantener consistencia en el equipo.
Trabajo independiente
🎨 Usa Prettier para dar formato automático
Prettier es una herramienta que corrige la indentación y el estilo del código automáticamente, para que se vea más ordenado y consistente.
1️⃣ Instala Prettier como dependencia de desarrollo (solo se usará en tu entorno local):
npm install --save-dev prettier
2️⃣ Usa npx para ejecutar Prettier sin necesidad de instalarlo globalmente. Este comando dará formato a todos los archivos:
npx prettier --write .
3️⃣ En VS Code, instala la extensión Prettier desde la sección de extensiones (ícono de cuadrados a la izquierda).
4️⃣ Luego, abre la configuración del editor (archivo settings.json) y agrega esta línea para que el código se formatee automáticamente al guardar:
"editor.formatOnSave": true
5️⃣ Sube los archivos formateados a GitHub:
git add . git commit -m "Aplicado Prettier" git push origin main
⚠️ Si formateas todo el proyecto, puede que veas muchos cambios en archivos. ¡No te asustes! Solo es el estilo visual del código.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
