Herramientas Javascript en acción

Es impresionante ver dónde Javascript es hoy en día y cuánto ha evolucionado desdeES2015los días de var y $(.submitBtn) han quedado muy atrás. Como javascript sigue
evolucionando, las herramientas (formateador, linter, bundler) a su alrededor siguen mejorando, vamos a ver en este artículo cómo ESLint (linter), Más bonito (formateador) y Husky (Git hooks) pueden mejorar tu experiencia como desarrollador y tener un gran impacto en tu aplicación. Por el bien de este artículo vamos a utilizar un React pero ten en cuenta que estas herramientas se pueden utilizar con cualquier aplicación Javascript/Node. Empezaremos generando un React proyecto utilizando vite con estos pasos:

npm create vite@latest
Nombre del proyecto: js-tools
Seleccione un framework: react
Seleccione una variante: react
cd js-tools
npm install

ESLint para la calidad del código

ESLint es una herramienta que le ayuda a encontrar y solucionar problemas en su JavaScript código. Para añadirlo a nuestro
app seguiremos estos pasos:

cd js-tools
npm init @eslint/config
# tendremos que responder a estas preguntas para inicializar la configuración
¿Cómo desea utilizar ESLint? Para comprobar la sintaxis y encontrar problemas
¿Qué tipo de módulos utiliza su proyecto? Módulos JavaScript (importación/exportación)
¿Qué framework utiliza tu proyecto? React
¿Su proyecto utiliza TypeScript? No
¿Dónde se ejecuta su código? Navegador
¿En qué formato desea que esté su archivo de configuración? Javascript
¿Desea instalarlos ahora? Sí
¿Qué gestor de paquetes quieres usar? npm
# vamos a instalar plugins adicionales
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

Esto creará un .eslintrc.cjs que contiene nuestro ESLint config en la raíz de nuestra aplicación, vamos a
actualizar el archivo de configuración con nuestros plugins instalados y añadir un regla:

const error = 2;

module.exports = {
  env: {
    navegador: true
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recomendado',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  reglas: {
    'no-unused-vars': error,
  },
  configuración: {
    react: {
      versión: 'detect',
    },
  },
  ignorePatterns: ['node_modules', '.eslintrc.cjs', 'dist'],
};

Estamos utilizando la configuración recomendada para cada plugin e hicimos el no-unused-vars arroje un error, un paso adicional es añadir un pelusa a nuestro paquete.json como sigue:

{
  ...,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint --ext js,jsx ."
    },
  ...
}

Ahora que nuestro Configuración de ESLint vamos a actualizar nuestra aplicación para hacer algunas pruebas y ver
cómo funciona. Lo primero que hay que hacer es actualizar el App.jsx dentro del archivo src este componente contiene una imagen, un reproductor de vídeo básico y un botón que activa el reproductor de vídeo.
estados de reproducción/pausa al hacer clic:

import { useEffect, useRef, useState } from 'react';

export default function () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Hola ESLint + Prettier + Husky';

  useEffect(() => {
    if (!isPlaying) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  }, []);

  const togglePlay = () => setIsPlaying(!isPlaying);

  return (
    <div>
      <button type="button" onclick="{togglePlay}">
        {estáReproduciendo ? Pausa' : 'Reproducir'}
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

import { useEffect, useRef, useState } from 'react';

export default function () {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hola ESLint + Prettier + Husky';

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, []);

const togglePlay = () => setIsPlaying(!isPlaying);

return (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

Vamos a probar y ver lo que correr el pelusa informará sobre nuestro App.jsx código:

Tenemos 4 errores geniales o no tan geniales debería decir, acabamos de capturar múltiples tipos de errores algunos están relacionados con React, otros con a11y, y uno es debido a la regla que hemos añadido para prohibir variables no utilizadas. Lo bueno de ESLint es que detecta los errores por ti y nos da una indicación sobre la solución y todas las reglas están muy bien documentadas. Así que para arreglar nuestro código necesitaremos:

- Dar un nombre a nuestro componente

- Utiliza la variable `heading` o elimínala si no sirve para nada.

- Añadir una etiqueta `track` para los subtítulos en el reproductor de vídeo

- Añadir un atributo `alt` con texto significativo al elemento imagen

Después de aplicar estas correcciones ejecutando el comando `lint`, no recibimos errores, nuestro código corregido es el siguiente:

  import { useEffect, useRef, useState } from 'react';

export default function App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hola ESLint + Prettier + Husky';

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

const togglePlay = () => setIsPlaying(!isPlaying);

return (

{encabezado}

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="Rodaja de pomelo sobre un montón de otras rodajas"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Es un poco molesto tener que utilizar la tecla pelusa antes de cada commit y uno podría olvidarse de hacerlo, configurar un git hook podría ser útil para automatizar esta tarea y solucionar este problema y de eso es de lo que vamos a hablar en el artículo Husky sección.

Más bonito para el formato del código

Más bonito es un formateador de código opinable que soporta muchos lenguajes y se integra con muchos editores de código. Vamos a añadir prettier a nuestra aplicación:

npm install --save-dev --save-exact prettier

Necesitaremos crear dos archivos en la raíz de nuestra aplicación a .prettierignore para ignorar los archivos o carpetas que no queremos formatear:

node_modules/
dist/
public/

Y un .prettierrc.json que contendrá nuestra configuración más bonita:

{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true
}

Prettier config es personalizable, puedes jugar con el campo de juego de prettier para encontrar la configuración que más te convenga. Un paso adicional para hacer que prettier funcione bien con ESLint es instalar un plugin adicional de ESLint:

npm i --save-dev eslint-config-prettier

También tendremos que actualizar el .eslintrc.cjs añadiendo más bonito a la extiende tenemos que asegurarnos de ponerlo en el array último para anular otras configuraciones:

const error = 2;

module.exports = {
...,
extends: [
'eslint:recomendado',
'plugin:react/recomendado',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
],
...

Ejecutar prettier es fácil y sencillo, una forma es ejecutar el comando npx prettier --write . que formateará todo el código de su aplicación, una segunda forma es utilizarlo desde su editor, esto sacará el máximo partido de Prettier, ya sea a través de un atajo de teclado o automáticamente cada vez que guarde un archivo. Cuando una línea se ha hecho tan larga mientras codificabas que no cabe en tu pantalla, simplemente pulsa una tecla y verás como mágicamente se envuelve en múltiples líneas. O cuando pegue algún código y la sangría se desordene, deje que Prettier lo arregle por usted sin salir de su editor.

Pero aún así, ¿qué pasa si uno de los desarrolladores utiliza un editor que no es compatible con prettier y se olvida de utilizar la función más bonito hay una manera de solucionar este problema y ese es el tema de la Husky sección siguiente.

Husky para ganchos Git

Husky te ayuda a configurar git hooks para limpiar tus mensajes de commit, ejecutar tests, limpiar código, etc... cuando haces commit o push. Vamos a utilizarlo junto con lint-staged para automatizar la limpieza y el formateo del código antes de confirmarlo.

npx husky-init && npm install
npm i --save-dev lint-staged

Esto creará un .husky con una carpeta precommit archivo. El siguiente paso es actualizar el paquete.json para configurar en línea e indíquele que formatee cualquier archivo modificado en la confirmación actual:

{
...,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext js,jsx .",
"prepare": "husky install"
},
"lint-staged": {
"**/*.+(js|jsx|json|css)": "prettier --write --ignore-unknown"
},
...
}

El último paso es actualizar el precommit para configurar nuestro gancho para ejecutar el pelusa en todas las aplicaciones y formatee los archivos modificados con el comando en línea mando:

/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm run lint
npx lint-staged
```

Vamos a hacer un poco de refactorización a nuestra aplicación para ver cómo funciona todo esto, vamos a crear un componente VideoPlayer.jsx y utilizarlo en App.jsx:

``javascript
import { useEffect, useRef } from 'react';

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

return (

);
}

import { useState } from 'react';
import VideoPlayer de './VideoPlayer';

export default function App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hola ESLint + Prettier + Husky';

const togglePlay = () => setIsPlaying(!isPlaying);

return (
 
{encabezado}
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="Rodaja de pomelo sobre un montón de otras rodajas"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

Ahora que estamos contentos con nuestro código, vamos a confirmar nuestros cambios y ver cómo va.

Errores de nuevo esta vez está gritando debido a la falta de validación props y como se puede ver nuestra confirmación no tuvo éxito. Vamos a arreglar esto, instalando primero PropTypes npm i prop-tipos y actualizar el Reproductor de vídeo componente:

import { useEffect, useRef } de 'react';
import PropTypes de 'prop-types';

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

return (

);
}

VideoPlayer.propTypes = {
isPlaying: PropTypes.bool.isRequired,
videoSrc: PropTypes.string.isRequired,
trackSrc: PropTypes.string.isRequired,
};

Después de corregir estos errores nuestro commit fue exitoso después de ejecutar los comandos de linting y formateo de código. Como se puede ver con Husky básicamente automatizado linting y formato con este gancho pre-commit y esto evitará cualquier código no deseado en nuestra base de código y resolver problemas como incompatibilidades editores y olvidarse de ejecutar los comandos.

Resumen

ESLint, Más bonito y Husky son grandes herramientas que nos ayudan a mantener nuestro código. Combinadas, nos proporcionan una gran experiencia como desarrolladores y facilitan el mantenimiento de nuestro código.

Hemos hablado de linting y formateo en este artículo, pero las herramientas disponibles y las posibilidades son mucho más amplias, puedes configurar algunas pruebas para que se ejecuten en un hook pre-commit o si usas Typescript, añadiendo un comando de comprobación de tipos con Husky para omitir cualquier código no tipado en tu aplicación.

Más información:

Ventajas e inconvenientes del Vue

Cómo matar un proyecto con malas prácticas de codificación

React: Trucos y consejos