ESLint es una herramienta poderosa que lo ayuda a hacer cumplir las convenciones de codificación consistentes y garantizar la calidad en su base de código JavaScript.
Las convenciones de codificación a veces son difíciles de decidir, y tener una herramienta que automatice su aplicación ayuda a evitar discusiones innecesarias. Garantizar la calidad también es una característica bienvenida: los linters son herramientas excelentes para detectar errores, como los relacionados con el alcance variable.
ESLint está diseñado para ser completamente configurable, brindándole la opción de habilitar / deshabilitar cada regla, o mezclar las reglas para satisfacer sus necesidades.
Con esto en mente, la comunidad de JavaScript y las empresas que usan JavaScript pueden extender la configuración de ESLint original. Hay varios ejemplos en el registro npm: eslint-config-airbnb es uno de los más conocidos.
En su rutina diaria, probablemente combinará más de una configuración, ya que no existe una configuración única para todos. Esta publicación mostrará cómo crear su propio repositorio de configuraciones, dándole la opción de centralizar todas sus definiciones de reglas.
Crea el proyecto
Primero deberá crear una nueva carpeta y un proyecto npm. Por convención, el nombre del módulo comienza con eslint-config-, como eslint-config-test.
mkdir eslint-config-test cd eslint-config-test npm init Tendrá un archivo package.json que se verá como el siguiente fragmento:
{ "name": "eslint-config-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } A continuación, es hora de agregar sus dependencias de ESLint:
npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier Los paquetes cambiarán según sus necesidades. En este caso, trabajo con bases de código React y uso Prettier para formatear mi código. La documentación menciona que si su configuración para compartir depende de un complemento, también debe especificarlo como peerDependency.
A continuación, crearé un .eslintrc.jscon mi configuración, esto es similar a lo que ya haces en tus aplicaciones:
module.exports = { extends: [ 'airbnb', 'eslint:recommended', 'plugin:import/errors', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', 'prettier/react', ], plugins: [ 'react-hooks', ], rules: { }, }; El rulesobjeto almacena cualquier regla que desee anular. El fragmento de arriba rulesestá vacío, pero siéntase libre de revisar mis anulaciones. En el repositorio de Airbnb / JavaScript, puede encontrar una lista de reglas anuladas por la comunidad.
Crea reglas personalizadas
Es hora de crear una .prettierrccon sus reglas personalizadas: esta es una parte complicada ya que Prettier y ESLint pueden entrar en conflicto con algunas reglas:
{ "tabWidth": 2 } Es importante mencionar que el .prettierrcarchivo debe residir en la raíz del proyecto que está usando su paquete. En este momento, lo estoy copiando manualmente.
El siguiente paso es exportar su configuración en el index.jsarchivo:
const eslintrc = require('./.eslintrc.js'); module.exports = eslintrc; Es técnicamente posible crear todas las configuraciones en el index.jsarchivo. Pero si hace esto, no obtendrá el objeto de configuración lindado (inserte su broma de Inception aquí).
¡Listo!
¡Voilà! Eso es todo lo que necesita para iniciar su propio paquete de configuraciones. Puede probar localmente su paquete de configuración ejecutando lo siguiente en un proyecto de JavaScript:
npm install /Users/leonardo/path/to/eslint-config-test Tenga en cuenta que también se pueden instalar las dependencias de su paquete de configuración.
Si todo se ve bien, puede publicar en el registro de npm:
npm publish Ejemplo completo
Tengo un proyecto funcional de GitHub que muestra la configuración de esta publicación: eslint-config-leozera. También puedes verlo a continuación:
Más sobre el proyecto
- Configuración de ESLint: documentos oficiales de ESLint. Ya sabes, lee los documentos
- Cómo publicar su primer paquete NPM: citando el subtítulo de la publicación: "todo lo que necesita saber para crear un paquete NPM".
- eslint-config-wesbos: un proyecto de Wes Bos que me ayudó mientras hacía este trabajo
También publicado en mi blog. Si te gusta este contenido, sígueme en Twitter y GitHub. Foto de portada de Susan Holt Simpson / Unsplash.