Teoría: NPX

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:

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

Con npx, simplemente escribimos:

npx  prettier  --write  .

Y npx se encarga de:

1. Buscar Prettier dentro del proyecto.
2. Ejecutarlo usando la versión instalada localmente.
3. 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:

¿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.