Creo que mucha gente sabe que en los proyectos serios en estos días es costumbre usar herramientas especiales para verificar si el código tiene errores y coincide con el estilo adoptado en el equipo.
Hoy quiero tocar ESLint, una gran herramienta para verificar los proyectos de JavaScript en busca de errores.
No escribiré en este artículo sobre puntos obvios, como la configuración de eslint para su proyecto: espero que pueda leer la documentación de esta parte usted mismo y conectarla con usted mismo. Y aquí discutiremos qué "kit" adicional puede conectar a la herramienta original y cómo puede configurarlo para que funcione para su mayor ventaja.
Ahora usamos la configuración preparada con las reglas del equipo de airbnb como base de las reglas. Su estándar para escribir código JavaScript ahora tiene más de 73 mil estrellas en el github y es utilizado por muchas organizaciones conocidas . Creo que puedes confiar en él.
Esta configuración conecta varios paquetes importantes al proyecto a la vez: eslint , eslint-plugin-import , eslint-plugin-react y eslint-plugin-jsx-a11y , que contienen reglas adicionales para validar su código. Cabe señalar que este archivo de configuración implica que usa React.js en su proyecto. Si esto no es así, siempre puede instalar la configuración eslint-config-airbnb-base , que contiene todo lo mismo, con la excepción de la dependencia del complemento para React.js.
Echemos un vistazo más de cerca a los paquetes de complementos y descubramos qué controles agregarán a su código de proyecto:
Este complemento agregará validación para todas sus importaciones a su proyecto y garantizará que todas las dependencias importadas estén presentes en el proyecto, conectadas en un orden conveniente para el trabajo posterior, y así sucesivamente.
El complemento le permite escribir más código correcto en React.js y lo guarda de antipatterns comunes, y también lo obliga a atribuir a todos sus componentes descripciones de los tipos de datos que aceptan.
Este complemento también se aplica a proyectos en React.js y también es extremadamente útil en el trabajo. Te obligará a escribir HTML que será mucho mejor en línea con los estándares de accesibilidad. Sus proyectos serán mucho más convenientes para las personas con discapacidad.
En general, este conjunto de reglas hará que sus proyectos estén mucho mejor escritos, así como también expandirá su conocimiento de los estándares modernos para escribir código.
Pero en nuestro mundo no solo existen estos complementos para eslint, sino muchos otros. Ya hay un maravilloso proyecto impresionante-eslint en el github sobre este tema. En los últimos días, decidí estudiar este tema y quiero presentarle a su tribunal las cosas más interesantes que se encontraron, probaron personalmente e implementaron en mi proyecto actual, en el que estoy trabajando actualmente.
Complementos adicionales para ESLint
Puede estudiar el proyecto anterior por su cuenta y encontrar complementos interesantes para usted personalmente, pero escribiré aquí lo que me interesa.
Un complemento diseñado específicamente para proyectos Node.js. Creo que muchos pueden ser útiles si aún no lo usan en casa.
Este complemento te hará "amar" a Lodash y reescribir la mayoría de los métodos nativos de JS a los métodos de Lodash, y también contiene muchas recomendaciones para escribir código que usa cadenas lodash. En general, es muy interesante, pero hasta ahora no he implementado esto simplemente porque ahora tenemos que reescribir demasiado código para cumplir con las reglas de este complemento. Pero para el futuro, lo tomé para mí.
Este complemento le permite directamente durante el desarrollo verificar la compatibilidad del código que escribió con los navegadores actuales a los que se dirige en su proyecto en este momento. Por el momento, no lo conecté a mi proyecto porque ahora utilizamos el servicio polyfill.io , que conecta automáticamente todos los polyfills necesarios a cada navegador individual, por lo que el problema de la compatibilidad del código en su conjunto está de alguna manera ausente. Pero para el futuro también estoy haciendo una nota para mí: ¿qué pasa si la necesito?
Un complemento que te dice cómo optimizar tus expresiones regulares. ¿Por qué no instalar? No será superfluo, pensé.
Uno de los hallazgos más interesantes de esta lista de kits de cuerpo adicionales. Este complemento contiene un conjunto completo de comprobaciones, gracias a las cuales encuentra secciones de código mal escritas, las mismas funciones y construcciones simplemente sin sentido, y ofrece reescribirlas (es una pena que él mismo no sepa cómo reescribirlas: D). Si no le gusta descomponer su código en pequeños bloques claros y escribir funciones complejas en más de 100 líneas, espere las advertencias de este complemento de que la complejidad cognitiva de tales lugares en el proyecto es demasiado alta para el soporte a largo plazo y debe reescribirse.
Este complemento simplemente te maldecirá cuando quieras escribir bucles estándar o while. Hoy en día, se ha acostumbrado a usar para cada forEach , map , reduce , etc. Generalmente estoy de acuerdo con el autor y conecté el complemento a mi proyecto.
Un complemento que le impedirá extender prototipos de objetos JavaScript estándar. Di no! Parches de mono. Y eso es correcto.
Un complemento que lo ayuda a escribir las promesas correctas y lo protege de errores comunes al trabajar con ellos. También es muy útil, creo.
Aquí hay una lista de complementos al final. ¿Qué utilizas en tus proyectos para probar tu código?
En conclusión, dejaré una configuración de ejemplo de nuestro archivo .eslintrc del proyecto actual:
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }