ESLint / Prettier
Los linters son herramientas que examinan el código y ayudan a corregir errores de sintaxis, código incorrecto, malas prácticas y ayudan a seguir unas normas de estilo, favoreciendo escribir código de calidad.
Los formatters se encargan de formatear el código de manera automática siguiendo unas normas de estilo definidas por el equipo de desarrollo. Para ello, analiza el código y lo re-escribe cada vez que se ejecuta el formateador. Su objetivo es acabar con los debates sobre el estilo del código.
ESLint
ESLint es la herramienta predominante para la tarea de examinar código JavaScript tanto en el servidor como en el navegador.
Instalación
npx eslint --init
> y
> y
> To check syntax, find problems, and enforce code style
> JavaScript modules (import/export)
> React
> No
> Browser
> Use a popular style guide
> Standard: https://github.com/standard/standard
> JSON
> Yes
> npm
Configuración
El plugin plugin:react/jsx-runtime indica a ESLint que el código funciona con React sin necesidad de incluir import React from 'react' en cada fichero de JSX.
loading...
Se añade la opción settings.react.version para indicar a ESLint la versión de React utilizada en el proyecto.
loading...
El fichero .eslintignore especifica los directorios y archivos sobre los cuales no actuará ESLint.
loading...
Ejecución
Para visualizar los problemas sin aplicar cambios.
npx eslint . --ext .js,.jsx
Para aplicar las correcciones que ESLint puede resolver automaticamente.
npx eslint . --fix --ext .js,.jsx
Prettier
Prettier es una herramienta para formatear el código, tiene soporte para HTML, CSS, JavaScript, JSX, TypeScript, GraphQL... entre otros.
Se encarga de garantizar que el código se ajuste a un estilo consistente de manera automática.
Instalación
npm i --save-dev prettier
Configuración
Reglas de Prettier.
loading...
El fichero .prettierignore especifica los directorios y archivos sobre los cuales no actuará Prettier.
loading...
Conflictos con ESLint
Al utilizar ESLint junto con Prettier entran en conflicto las reglas establecidas por ESLint con las reglas definidas por el equipo en Prettier, para garantizar que la prioridad de las reglas de Prettier se añade la depedencia eslint-config-prettier.
npm i --save-dev eslint-config-prettier
loading...
Ejecución
Analizar y visualizar el código formateado sin aplicar los cambios.
npx prettier .
Analizar y aplicar los cambios.
npx prettier . --write
Scripts
Es posible configurar package.json con los comandos para ejecutar tanto ESLint como Prettier.
loading...
npm run lint
npm run format