Creando la página Home y configurando ESLINT y PRETTIER en nuestro proyecto

Vamos a configurar Eslint y Prettier en nuestro proyecto basándonos en las reglas de Standard. Explicaremos cómo hacerlo paso a paso e integrarlo en nuestro editor gracias a las extensiones de Visual Studio Code.

Seguiremos avanzando el proyecto creando nuestra página home creando algunos componentes.

~Segmentos 📹 ~

00:00 - Presentación del vídeo
03:45 - ¿Qué es ESLint?
06:25 - Añadiendo ESLint a nuestro proyecto
08:15 - Iniciando la configuración de ESLint
13:28 - Usando ESLint en nuestro proyecto y haciendo fix
21:35 - Desactivar reglas de ESLint y StandardJS
25:18 - Volviéndose loco ESLint y Prettier. ¡Lo solucionamos!
27:15 - Mejorando la configuración de ESLint
28:32 - Diferencias entre ESLint y Prettier
30:16 - ¿Qué es Prettier?
32:00 - LA DIFERENCIA entre ESLint y Prettier
35:20 - Preguntas y respuestas I
36:39 - ¿Por qué instalar dependencias como desarrollo con npm?
40:34 - ¿Cómo instalamos Prettier para convivir con ESLint?
43:17 - Instalando Prettier
49:45 - Configurando Prettier para que no use puntos y coma
51:17 - NO uséis paquetes extraños con ESLint y Prettier
53:47 - Configurando reglas de precommit con ESLint, Prettier y husky
01:02:00 - Creando el componente Avatar con React y CSS Modules
01:18:55 - ¿Qué extensión usar .js o .jsx para nuestros componentes de React?
01:24:22 - ¡Usando el nuevo logo para Devter!
01:30:36 - Arreglando el bug de inicio de sesión
01:33:33 - Creando la página Home

-~-~~-~~~-~~-~-
¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore"
-~-~~-~~~-~~-~-

[fd]

viajero del tiempo. volviendo a ver este video para recordar cositas :3 saludos midu!!!

[davidprado]

grande midu!... gracias por esas clases magistrales que nadie logra explicar y peor tan bien como lo haces tu!

[chemedev]

Genio hace como 1 año que empcé a programar y todavía no había entendido del todo cual era la mejor forma de configurar las extensione de prettier y eslint juntas! Lo tuyo es fenomenal y si bien sigo varios developers en yt con más de 100k de subs a vos se te nota un nivel de conocimiento igual o mayor que otros... ojalá consigas las subs que mereces con el tiempo! Exitos!

[carsdfj]

Excelente video llevo un buen tiempo sin poder ver una serie de videos de midudev e estado muy ocupado la verdad que quería ver esta serie para salir de algunas dudas con nextjs y para reforzar pues soy bastante nuevo . Los vídeos de este Canal han Sido de los mejores que e podido ver gracias midu !!🙂

[equiman]

Miguel muchas gracias por este video tan completo y detallado, ahora voy directo a lo que quiero y no me quedo horas configurando.

Para la parte que te pide los paquetes a instalar y que lo lanzas manualmente porque usaste Yarn, deberías probar adicionar esta configuracion: "eslint.packageManager": "yarn" asi el VSCode toma a yarn como manejador de paquetes de eslint. Espero que te sirva.

[santiagoguastavino]

Estoy empezando a aprender Next.js y te elegí a vos y tu tutorial! Me lo voy a ver y codear todo a la par. Gracias, un abrazo!

[edmundodominguezagurcia]

Excelente Miguel, me va encantando este tutorial, no pude verlo live, pero esta genial.

[armandochindoy]

Muy genial el video, hace rato queria usar eslint y prettier pero por la frustración de la configuración no lo habia logrado.

[edgardejesusmendozaortegon]

Muchas gracias por un gran video, eres el

[CarlosLopez-ndyf]

Gracias por aportar amplío conocimiento CRACK. Lo malo es que voy a pasitos con React y ahora quiero integrar Next. jajaja.

[javierabad]

Excelente video, gracias por tu esfuerzo

[ghccristia]

Genial todo el contenido bro, eres grande 💪💪

[byRedHunter]

Genial eh, saludos desde Perú, para ese pequeño problema de maquetación yo use css-grid.

[jolfrann]

59:37 Eso funciona también para react-native? Cómo sería la configuración?

[danielgutierrez]

muy buena explicacion de las configuraciones, muchas gracias, una pregunta, cuando puedes sacar un video de Microfrontends mostrando la configuracion de webpack.. de nuevo gracuas por el vide :D

[valentino]

Buen dia, una consulta, cuando configuro en un proyecto react y configuro eslint con ts me instala unas dependencia pero me dan error, como la puedo solucionar

[JoelRdz]

A eslint-prettier-plugin le veo dos ventajas, una es que no necesitas instalar la extensión de Prettier, usas sólo ESLint para que se encargue de todo, y la segunda y más importante es que en el panel de Problems de vscode te marca también (explícitamente) los errores relacionados a Prettier.

[SimaDamian]

Genial! muchas gracias. comentario: prefiero mucho más la configuracion de prettier embebida en eslint y no usar el plugin de prettier en vscode. segun mis pruebas queda mucho mejor integrado

[bryanmuentes]

Muy buenos vídeos, cuando es el siguiente directo ?

[cristianandres]

Pero que calidad de contenido! muchas gracias! Una consulta, que extensión usas para saber si la versión de tu dependencia es la última 'latest'?