El caso es que queremos evitar tener errores en nuestro código, obviamente.
Para eso se utilizan herramientas que se llaman linters,
que al final es una herramienta que detecta y te señala los errores
que tiene cualquier lenguaje de programación.
En este caso, pues JavaScript, en especial cuando estamos trabajando con Node.js.
No solo errores, sino que también el linter te puede decir cosas de code styling, ¿vale?
De qué estilo de código estás utilizando.
Por ejemplo, estás utilizando dos espacios y el proyecto debería ser con cuatro espacios.
Estás utilizando punto y coma y yo no utilizo punto y coma.
Lo que te ayuda es a tener un code styling, ¿vale?
Así que el linter es la primera herramienta que deberías instalar en todos los proyectos.
El linter más extendido es slint, ¿vale?
Así que vamos a instalar ese.
Para ello, pues aquí tenemos la terminal.
Voy a hacer npm install slint-de, porque es de desarrollo, ¿vale?
Es una dependencia de desarrollo.
Ahora que me lo he instalado en el pack JSON, pues puedo ver que tengo, por un lado,
las dependencias de desarrollo, que es slint y nodemon.
Mira, me ha puesto el caret otra vez, pues se lo voy a quitar por si acaso.
Y dependencias, que es express, por ahora.
Vale, pues aquí hay diferentes formas de hacerlo.
Ahora, como estamos empezando, lo mejor es que entiendas que puedes ejecutar un binario
que se llama slint y pasarle la posibilidad de inicializarte la configuración.
Con esto, pues directamente empiezas desde cero y te va haciendo unas preguntas
de cómo tiene que hacer cada cosa y tal.
Por ejemplo, vamos a darle.
Ya te pregunta.
¿Qué quieres que haga slint?
Pues me chequea la sintaxis, me encuentra problemas y me obliga a tener un estilo de código.
Yo está la que te recomiendo, ¿vale?
Ahora, ¿qué tipo de módulos estás utilizando en tu proyecto?
Pues ya hemos dicho que estamos utilizando CommonJS.
No estamos utilizando los JavaScript módulos.
Así que CommonJS.
¿Qué framework estamos utilizando en nuestro proyecto?
Ninguno de estos, en este proyecto.
Tenemos TypeScript, no por ahora, pero más adelante sí que lo veremos.
¿Dónde estamos ejecutando esto?
¿En Node?
Ay, me ha seleccionado browser.
Bueno, luego lo arreglo.
¿Cuál es el estilo que te gustaría en tu código?
Bueno, podría ser uno popular, inspeccionar...
Le vamos a decir que me pregunte.
Y ahora me va preguntando.
¿Cómo te gustan los archivos de configuración?
JavaScript.
¿Qué utilizas?
¿Tabs o espacios?
Espacios.
¿Utilizas comillas dobles?
Single.
Estoy en Unix.
No quiero semicolons.
A mí no me gustan los semicolons.
A cada uno que le guste o no le guste.
Ahí lo puedes hacer.
Vale.
Todo esto, al final lo que ha hecho es crearme este slintrc.
¿Vale?
Que tiene toda la configuración del linter.
De esta forma hemos iniciado con algo y no nos tenemos que preocupar.
Si ahora voy al index.js, pues tengo un montón de errores en mi código.
¿Por qué?
Porque no estoy siguiendo las reglas que le he dicho en el linter.
O sea, me he saltado cosas aquí.
Por ejemplo, aquí me dice que la indentación está mal porque tiene 4.
Esto ya os digo que no lo voy a...
Eso lo voy a cambiar porque no me gusta la indentación de 4 espacios.
Me gusta la de 2.
Pero bueno, si yo ahora...
¿Por qué me ha estado dando todos estos errores en el editor?
Porque tengo una extensión que es la del linter, ¿vale?
Que tienes que instalar sí o sí, que es esta.
Es slint.
Y esta, al final lo que te hace es leerte la configuración que tienes en tu proyecto.
Y dice, vale, pues con esta configuración que tienes en tu proyecto, estos son los errores que tienes en tu código.
Si además quieres que te enseñe en la misma línea el error, ¿vale?
Porque por defecto no te lo enseña así.
Te puedes instalar esta, error lens, ¿vale?
Para que te enseñe en la misma línea el error.
Esto lo hace una extensión diferente, ¿vale?
Que la del linter.
Esto me lo han preguntado mil millones de veces.
La de error lens.
Si me hubieran dado un euro cada vez que me han preguntado esto.
Sería rico.
Vale.
Ahora que tenemos esto, se puede configurar slint.
Tiene un montón de configuraciones.
Lo mejor que podéis hacer es darle a esta ruedecita y vais aquí a extension settings.
Aquí tenéis, bueno, que os podéis aburrir.
Una de ellas es, por ejemplo, las acciones que puede hacer cuando se guarda.
Cada cuánto tiene que ver los errores.
Puedes, por ejemplo, configurar si cuando guardas el archivo te los arregla.
Por ejemplo, si yo ahora guardo el archivo, me va a arreglar todos los errores.
¡Pum!
Me los ha arreglado.
Yo, porque tengo que cuando se guarde el archivo, justamente que me haga el modo fix de slinter y ya está.
Pero, mira, hay alguno, este no lo ha podido arreglar.
No lo arregla todo.
Hay algunos que sí, otros que no.
Esto sería en el editor, pero es importante también saber que tenemos el binario, no un módulo, que hemos utilizado antes y lo podemos ejecutar para que nos detecte los errores.
En este caso, no me lo ha detectado porque me he saltado.
No he puesto dónde tiene que buscar, ¿vale?
Tenemos que ponerle punto para que sea en el proyecto este.
¿Ves?
El error que tengo aquí en la línea 60 también me he encontrado aquí.
Así que lo mejor es que en el package.json, igual que teníamos lo de antes, pues tengamos aquí lint y hagamos un node.
Ay, no, un módulo no.
Es lint, punto.
Y así lo mismo, ¿no?
NPM run, lint y ya está.
Así, pues ya tenemos una forma de lintar nuestro código.
Además del editor.
¿Por qué?
Porque el editor a lo mejor hay gente que no lo utiliza o no tiene configurado el linter, así que es importante una forma de tener este comando, ¿vale?
En nuestro proyecto.
Ahora, para arreglar esto sería borrar y darle al espacio otra vez.
Esto es un error muy típico que te dice que tienes los espacios irregulares porque a lo mejor ese no es un espacio...
No sé, lo ha detectado de otra forma.
A mí me gusta, por ejemplo, esto...
Que la indentación me gusta con 2 en lugar de con 4, ¿vale?
Porque me da más espacio y se lee lo suficientemente bien.
Por ejemplo, un error de no decirle...
¿Ves que me ha puesto browser true?
¿Qué pasa?
Que ahora este puerto, si yo utilizase aquí el process.env.port, por ejemplo, que esto ahora os explicaré para qué sirve.
¿Ves este process que me dice que no está definido?
Esto no es verdad, porque en Node esto es una variable que está definida.
Pues para solucionar esto tendría que decirle...
Oye, no, es que esto lo vamos a utilizar en el entorno en lo que lo estamos ejecutando.
Esto es Node, ¿vale?
Y es true.
Si guardo esto, ¿ves?
Ya me deja de dar problemas.
Esto lo utilizaremos ahora en un momentito.
Esto sería una forma que funciona, ¿vale?
Hay diferentes formas.
Puedes decir, hay gente que le encanta el Airbnb Slint.
Airbnb Slint que ya tiene una guía de estilo.
Y de hecho, cuando te está preguntando la configuración, puedes utilizar la de Airbnb.
Hay un montón de formas, de configuraciones y tal.
Yo os voy a decir la que yo utilizo y la que a mí me gusta más y la que utilizo en todos mis proyectos.
No os voy a explicar todas las razones de por qué, que son un montón.
Pero os la voy a enseñar y la vamos a dejar en el proyecto porque a mí es la que más me gusta.
Y bueno, pues además no tiene configuración y todo lo que no tenga configuración para mí es un win.
Esto es la configuración, ¿vale?
Entonces, la que yo utilizo es una que se llama Standard.
Que básicamente ya te viene con un montón de reglas preestablecidas
y que está basada en no utilizar semicolons, puntos y comas en JavaScript.
Y ya te arregla todos los problemas que puedas tener al respecto.
Te viene con un montón de reglas y no tienes que pensar en ellas y tal.
Para utilizar Standard, lo mejor que puedes hacer, ¿vale?
Una sería, ya hemos visto, utilizando el linter a mano.
Esta sería una.
Para utilizar Standard, lo mismo que hemos hecho antes.
npm install standard menos d, ¿vale?
Así que le voy a dar, vamos al Packet JSON y ya voy a eliminar la de Slint porque esta no la necesitamos.
¿Por qué?
Porque Standard en realidad utiliza Slint por detrás.
Ahora voy a eliminar el caret, importante.
Esta configuración la voy a quitar, ya no la necesito.
Y lo que voy a hacer en el Packet JSON es añadir un Slint config, que es otra forma de indicar la configuración del linter.
Y lo que vamos a decir es que vamos a extender de la configuración que tenemos en NodeModules, Standard, SlintRC.json.
SlintRC.json, a ver que no valía.
Vale, guardamos los cambios.
Y ahora se supone que esta, ¿ves?
Esta configuración está utilizando la de Standard, ¿vale?
Ya no tengo la configuración del linter que tenía antes, ahora tengo esta de Standard.
¿Ves?
Ahora me está detectando otros cambios.
Por ejemplo, me está diciendo, mira, esto lo estás haciendo con comillas cuando no es necesario.
También te puede encontrar espacios que no he estado utilizando.
¿Ves?
Aquí tengo espacios que no los estoy utilizando.
Es un poquito más amplio que lo que teníamos antes.
Vale, pues ahora voy a guardar los cambios y ya vemos que me lo ha dejado súper bien.
A mí es el que más me gusta por un montón de motivos, pero cada uno que utilice la que quiera.
Lo mejor de esto es que cada uno puede utilizar lo que prefiera y seguir siendo feliz.