Uno de los mayores desafíos en el desarrollo de software es el tiempo. Es algo de lo que no podemos obtener más fácilmente, pero las fibras pueden ayudarnos a aprovechar al máximo el tiempo que tenemos.
Entonces, ¿qué es la pelusa?
lint , o linter , es una herramienta que analiza el código fuente para señalar errores de programación, errores, errores de estilo y construcciones sospechosas. //en.wikipedia.org/wiki/Lint(software)
En pocas palabras, un linter es una herramienta que escanea programáticamente su código con el objetivo de encontrar problemas que pueden provocar errores o inconsistencias con el estilo y la salud del código. ¡Algunos incluso pueden ayudar a solucionarlos!
Tomemos, por ejemplo, el siguiente ejemplo:
const test = 'I am a test'; console.log(`Test: ${test}`); const test = 'Another one.';Declaramos la constante testdos veces, por lo que nuestro motor javascript no estará contento. Con la configuración adecuada del linter y la configuración del reloj, en lugar de ser detectado más tarde como un error cuando se ejecuta el código, inmediatamente obtendrá un error a través de su linter ejecutándose en segundo plano:
10:9 error Parsing error: Identifier 'test' has already been declared 8 | const test = 'I am a test'; 9 | console.log(`Test: ${2}`); > 10 | const test = 'Another one.'; | ^Puede ser bastante obvio que tiene 2 constdeclaraciones iguales dado que son solo 3 líneas, pero en una aplicación más compleja, esto puede ahorrar mucho tiempo teniendo que buscar un error molesto que no siempre es obvio.
¿En qué puede ayudar el pelaje?
Muchas cosas, que incluyen pero no se limitan a:
- Marcar errores en su código por errores de sintaxis
- Dándole advertencias cuando el código puede no ser intuitivo
- Proporcionar sugerencias para las mejores prácticas comunes
- Seguimiento de TODO y FIXME
- Mantener un estilo de código consistente
La mayoría de las cosas en las que puede pensar probablemente ya existan de una forma u otra, y si no es así, ¡incluso puede crear reglas personalizadas que se adapten a sus necesidades!
¿Cómo está ayudando esto realmente o por qué debería importarme?
Probablemente, el tema más importante de la lista anterior es el hecho de que estos problemas se llamarán de inmediato. Estos problemas ya no le aparecerán en medio de la ejecución de su aplicación ni causarán ansiedad a alguien durante la revisión del código. Usted y su revisor ya no lucharán interminablemente de forma pasiva y agresiva a través de los comentarios sobre si incluir o no un punto y coma al final de las declaraciones de JS (¿debería?).
Todos esos momentos que le impiden ser productivo debido a un error de sintaxis tonto o las microinteracciones que usted y sus compañeros de equipo tienen durante una revisión toman tiempo. Se suman y terminan quitando el tiempo que puede dedicar a corregir otro error o desarrollar la próxima gran característica de su producto.
Entonces, ¿cómo empiezo realmente?
Aunque hay linters para la mayoría, si no todos, los otros lenguajes convencionales, para el propósito de esta publicación, me voy a centrar en Javascript. Se aplican los mismos principios, pero las herramientas pueden ser un poco diferentes.
Voy a explicar cómo se puede configurar para el linting básico en una aplicación React. Puede seguirlo fácilmente girando su propia aplicación React o usando mi inicio de Gatsby: //github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch
Tu Linter
Para empezar, primero necesitamos un linter. Probablemente el más popular en el mundo de Javascript es ESLint. Su linter será en realidad el motor para definir reglas y analizar sus archivos para probarlos. ESLint está disponible como un paquete npm por sí mismo y una vez instalado, listo para usar, le permite configurar un archivo de configuración básico y comenzar a ejecutarlo con algunas herramientas de línea de comandos.
Primero agreguemos nuestra dependencia de ESLint:
yarn add eslint -DEstamos instalando esto como devDependency(de ahí la -Dbandera), porque esto no es algo que nuestra aplicación necesite ejecutar. Una vez que se haya instalado correctamente, agreguemoslo a nuestro package.jsoncomo un script:
... "scripts": { ... "lint": "eslint . --ext .js" ... }, ...En lo anterior, estamos ejecutando nuestro linter en todo el directorio del proyecto en cualquier archivo que tenga la extensión .js. Si está trabajando con un proyecto grande con muchos tipos de archivos, tal vez incluso algunos que no desea agregar, puede cambiar esa marca o ser más específico con otras opciones.
Para admitir ESLint, tendremos que hacer una cosa más. Agreguemos un archivo en la raíz de nuestro proyecto (probablemente donde package.jsonestá el suyo ) llamado .eslintrc.jsy hagamos que el contenido del archivo sea simple:
module.exports = {};Una vez que esté listo, puede ejecutar yarn linty ... obtener un error.
Esto está bien y se espera en nuestro proyecto, así que sigamos adelante.
Tu analizador
Una herramienta común en la cadena para los desarrolladores de Javascript es Babel, que le permite escribir código con características que pueden no ser compatibles con todos los navegadores, como el uso de funciones de flecha, que están disponibles en ES6, y otras convenciones como importar archivos a través de import.
Es posible que el código que escribe ya se ejecute a través de Babel para funcionar en un navegador, pero eso no se aplica a ESLint de forma predeterminada, por lo que ESLint le permite especificar un analizador que permite que el procesamiento de linting mire el mismo código que ve su navegador. En este caso, querremos usar el analizador ESLint de Babel que está disponible para nosotros.
Para configurar eso, primero queremos instalar nuestra dependencia:
yarn add babel-eslint -DPor lo general, si está usando babel-eslint, querrá asegurarse de que babelesté instalado junto a él, pero en nuestro caso, Gatsby ya lo usa babel, por lo que no necesariamente necesitamos agregarlo. Una vez configurado, querremos actualizar nuestro .eslintrc.jsarchivo de configuración con algunas opciones nuevas:
module.exports = { "env": { "browser": true, "node": true, "es6": true }, "parser": "babel-eslint" };Aquí, le informamos a ESLint que nuestro entorno se ejecutará en el nodo (precompilación de Gatsby), dentro del navegador (la aplicación) y usará ES6. Esto ayuda a ESLint a saber cómo ejecutar su código. Además, queremos configurar nuestro analizador para que sea babel-eslint.
Una vez que estemos listos, corre de yarn lintnuevo y… bueno, no pasó nada.
Esto todavía se espera, ¡ya que no tenemos ninguna regla establecida!
Complementos para su código
¿Escribiendo una aplicación React? El analizador de Babel puede ayudarlo a transformar su código, pero es posible que tenga dificultades para ser productivo, ya que ESLint necesita comprender cómo debería funcionar para filtrar sus archivos React.
Parte de la belleza de ESLint es que le permite configurar complementos que tienen la oportunidad de crear y establecer reglas para usted. Afortunadamente, junto con nuestro analizador de Babel anterior que hace parte del trabajo pesado, tenemos un complemento React disponible que hace precisamente eso y se encarga de enlazar el JSX por nosotros.
Primero instalemos nuestra dependencia:
yarn add eslint-plugin-react -DAdemás, actualice nuestro .eslintrc.jsarchivo nuevamente:
module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "parser": "babel-eslint" };Lo que estamos agregando aquí es una configuración que detecta automáticamente qué versión de React está usando, lo cual es útil para permitir que su linting se analice correctamente y luego configure nuestro complemento de reacción que instalamos anteriormente.
For one last final time, we will run our lint script and get nothing:
Rules defined by others’s opinions
If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:
module.exports = { "settings": { "react": { "version": "detect" } }, "env": { "browser": true, "node": true, "es6": true }, "plugins": [ "react" ], "extends": [ "eslint:recommended" ], "parser": "babel-eslint" };And let’s run our yarn lint.
Woah! This will immediately give you a lot errors, it seems like something’s wrong.
Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:
"extends": [ "eslint:recommended", "plugin:react/recommended" ],Now if you run yarn lint, you get something a little more logical.
If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! ?
Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.
Some popular ones include:
- Airbnb’s config
- Semistandard
- Google’s JS Style Guide
Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.
Let it do the work (most of it)
You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.
If you noticed after we ran the command above, ESLint gave us an extra message:
So let’s give it a try! Let’s run:
yarn lint --fixAnd what do you know, it now only gives us 1 linting error.
Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.
Running one more time and finally nothing again! But this time because everything's looking good.
Go forth and write messy code!
Kidding ? The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.
This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.
Other linting tools to check out
- JSHint: an alternative to ESLint
- Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
- Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
- Webhint: linting tool for accessibility, speed, and more website best practices
- A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements
- ? Follow Me On Twitter
- ?️ Subscribe To My Youtube
- ✉️ Sign Up For My Newsletter
Originally published at //www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time