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!
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.
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 !!🙂
Midu querido, tengo una consulta importante, vale la pena todavía configurar webpack, y babel?, o ya no es necesario?, muchas gracias!, :D, pd: necesitamos un curso de next con typescript, o como incluirle porfa!
Hola midu! Tengo una duda, como haces tu para hacer que VScode conviva con diferentes configuraciones de linter y format en diferentes proyectos? Por ejemplo, en tu curso avanzado de React de Platzi tan sólo utilizamos standard y en el package.json decimos que el linter de ese proyecto sea el archivo eslint que tiene el package Standard. Sin embargo, aquí hemos configurado eslint y prettier para este proyecto. No sé si me he explicado bien... Pero tengo que andar comentando y descomentando la siguiente linea para que en cada proyecto actue de una manera u otra. prettier.disableLanguages": ["javascript", "javascriptreact"]
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
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
Si siguiéramos tu todos tus vídeos, en que nivel de React nos pondrías generalizando claro ! macho un saludo. nos los he podido ver todos porque soy un esclavo, y no he tenido tiempo libre.
Hola Erick! Es difícil de saber, pero desde luego creo que os quedaríais a un muy buen nivel. Todavía quedan cosas y situaciones a tocar, pero creo que es una base bastante importante. Bueno, poco a poco te los ves Erick!
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.
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
Gracias por todo el material, deberias poner un PayPal o algo para enviarte una contribucion, RUclips algo tiene que no me deja enviar dinero. Y con el libro, pues apenas este a la venta, voy con los dientes por delante!, Un saludo!
A mi me funciona el comando, pero al guardar el documento me formatea con comillas dobles y otras cosas que detecta como error, según entiendo es prettier el que lo formatea así, pero no sé como cambiarlo, alguna ayuda?
disculpen, alguien sabe porque cuando formateo el codigo con prettier me agrega espaciado entre llaves en las variables pero no dentro del codigo jsx?? necesito espaciado entre llaves tambien en el codigo html dentro del jsx { asi } {no asi}
todo impecable hasta llegar al husky. en ese paso ya no me ha funcionado. genero la variable sin usar, y husky le da lo mismo y le hace commit sin asco. ajaj de igual forma. Agradecido Linter y Prettier me salvan.
Hola buenas Miguel Angel, tengo una configuración con prettier que no me aparece como a tí, he buscado y releido toda la documentación y por lo que veo la version 2.0 es la que me hace el cambio y no me gusta nada, he intentado instalar la version 1.19 pero pasa de mí 😭..........., el problema lo tengo con los operadores ternarios que en vez de dejármelos en una fila cada uno, les añade paréntisis feísimos que deja el código mas ilegible. A ver si tu pudieras ayudarme con esto!!! Lo quiero así : { this.state.usedSearch ? this._renderResults() : Use the form to search a movie } Y me hace sto................. {this.state.usedSearch ? ( this._renderResults() ) : ( Use the form to search a movie )}
No me quedó claro, qué sentido tiene usar ambos a la vez si Prettier sobre escribe las reglas de ESLint y Standard? BTW: NIO son córdobas Nicaragüenses, Saludos desde Nicaragua
Un poco mas de detalle, como donde esta el archivo que estas abriendo sino uno se pierde y ya no puede continuar. Gracias por el video aunque a mi puntualmente no me sirvio
19:55 eso que dices es incorrecto Midu, prettier no tiene nada que ver con eslint ni está configurado para pasar eslint cuando tengas prettier... lo que hace que eslint se ejecute es el editor.codeActionsOnSave que tienes más abajo en las settings...
He hecho todas las configuraciones y el ESLint sigue sin formatearme el código onSave, además tengo este warning: Warning: React version not specified in eslint-plugin-react settings. See github.com/yannickcr/eslint-plugin-react#configuration . :/
Tienes razón midudev no se porque en mi navegador me salía desde que estabas haciendo el init del eslint gracias por tu aporte hace unas semanas estuve buscando como configurar el eslint para un proyecto de nestjs
_Sígueme también en:_
► *Instagram* : bit.ly/instagram-frontend
► *Twitter* : bit.ly/twitter-frontend
viajero del tiempo. volviendo a ver este video para recordar cositas :3 saludos midu!!!
😁 jajajaja
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!
Juan, muchas gracias por tu comentario! Me alegra mucho leer eso porque es justo por lo que quería explicarlo detalladamente! :)
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.
grande midu!... gracias por esas clases magistrales que nadie logra explicar y peor tan bien como lo haces tu!
Gracias por aportar amplío conocimiento CRACK. Lo malo es que voy a pasitos con React y ahora quiero integrar Next. jajaja.
Bueno Carlos, semana a semana los viernes vamos a ir viendo más y más de NextJS! 😊
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!
Muy genial el video, hace rato queria usar eslint y prettier pero por la frustración de la configuración no lo habia logrado.
Gracias!! saludos desde Argentina
Gracias a ti Lucio! 🚀
Que bueno y lindo se ve el directo.
Gracias! 😊
Genial eh, saludos desde Perú, para ese pequeño problema de maquetación yo use css-grid.
Bien hecho Jhonny!!!
Excelente Miguel, me va encantando este tutorial, no pude verlo live, pero esta genial.
Gracias, saludos Edmundo!!!
Muchas gracias, Miguel
Gracias a ti Miguel!!! 🤗
Muchas gracias por un gran video, eres el mejor!!!!!!!
Gracias a ti!!!
Super genial, muy buenos videos.
Gracias German! 😊
59:37 Eso funciona también para react-native? Cómo sería la configuración?
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 !!🙂
Excelente video, gracias por tu esfuerzo
Con mucho gusto Javier! 🤗
Midu querido, tengo una consulta importante, vale la pena todavía configurar webpack, y babel?, o ya no es necesario?, muchas gracias!, :D, pd: necesitamos un curso de next con typescript, o como incluirle porfa!
esta configuración se puede hacer de manera global y no para cada proyecto?
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'?
Muchas gracias Cristian 🙇♂️ La extensión es "Version Lens". ¡Muy recomendada!
Brutal!, genial video!
Excelente Midu.
Una consulta MiduDev a mi me creo una carpeta .husky esa debo subirla al github o la debo agregar al gitignore
Hola midu! Tengo una duda, como haces tu para hacer que VScode conviva con diferentes configuraciones de linter y format en diferentes proyectos?
Por ejemplo, en tu curso avanzado de React de Platzi tan sólo utilizamos standard y en el package.json decimos que el linter de ese proyecto sea el archivo eslint que tiene el package Standard.
Sin embargo, aquí hemos configurado eslint y prettier para este proyecto.
No sé si me he explicado bien... Pero tengo que andar comentando y descomentando la siguiente linea para que en cada proyecto actue de una manera u otra.
prettier.disableLanguages": ["javascript", "javascriptreact"]
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
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
Cuando actu de como configurar Eslinter y prettier, habrá cambiado el como supongo ❤
Hola.. Muy atento...
Hola, muchas gracias Cesar!!! Te agradezco el comentario! 🚀
Si siguiéramos tu todos tus vídeos, en que nivel de React nos pondrías generalizando claro ! macho un saludo. nos los he podido ver todos porque soy un esclavo, y no he tenido tiempo libre.
Hola Erick! Es difícil de saber, pero desde luego creo que os quedaríais a un muy buen nivel. Todavía quedan cosas y situaciones a tocar, pero creo que es una base bastante importante. Bueno, poco a poco te los ves Erick!
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.
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
Genial todo el contenido bro, eres grande 💪💪
Midudev el mejor!!
Es complicado encontrar una explicacion como las que haces, definitivamente tienes un don para enseñar
los shortcuts de git como el "gaa" los configuraste manualmente como aliases de tu shell?
Yo creo que si, yo asi lo uso con bash
Que se llaman *bash aliases* y es muy productivo la verdad
Gracias por todo el material, deberias poner un PayPal o algo para enviarte una contribucion, RUclips algo tiene que no me deja enviar dinero. Y con el libro, pues apenas este a la venta, voy con los dientes por delante!, Un saludo!
Muchas gracias Michael! Pronto voy a poner una suscripción al canal para, los que quieran, puedan aportar para ayudarme a seguir haciendo vídeos! :)
A mi me funciona el comando, pero al guardar el documento me formatea con comillas dobles y otras cosas que detecta como error, según entiendo es prettier el que lo formatea así, pero no sé como cambiarlo, alguna ayuda?
Como haces para que te salgan esos iconos al instalar las dependencias en el terminal?
Muy buenos vídeos , cuando es el siguiente directo ?
14 de agosto! Suscríbete y dale a la campanita para que te llegue la notificación.
¿Al final salió el libro?
Todavía estoy en ello! :D
Tengo los euros fresquitos!! :D @@midudev
disculpen, alguien sabe porque cuando formateo el codigo con prettier me agrega espaciado entre llaves en las variables pero no dentro del codigo jsx?? necesito espaciado entre llaves tambien en el codigo html dentro del jsx { asi } {no asi}
Yo aprendí a hacerlo de esa forma porque es mas comodo para leer, es como con las funciones, que se escriben abajo y no seguido de los brackets
todo impecable hasta llegar al husky. en ese paso ya no me ha funcionado. genero la variable sin usar, y husky le da lo mismo y le hace commit sin asco. ajaj
de igual forma. Agradecido Linter y Prettier me salvan.
Gracias
Hola buenas Miguel Angel, tengo una configuración con prettier que no me aparece como a tí, he buscado y releido toda la documentación y por lo que veo la version 2.0 es la que me hace el cambio y no me gusta nada, he intentado instalar la version 1.19 pero pasa de mí 😭..........., el problema lo tengo con los operadores ternarios que en vez de dejármelos en una fila cada uno, les añade paréntisis feísimos que deja el código mas ilegible. A ver si tu pudieras ayudarme con esto!!!
Lo quiero así :
{
this.state.usedSearch
? this._renderResults()
: Use the form to search a movie
}
Y me hace sto.................
{this.state.usedSearch ? (
this._renderResults()
) : (
Use the form to search a movie
)}
1 Error Cannot find module nrm-task-lint-staged, fix -> npm install -g mrm mrm-task-lint -staged,
2 typescript no working, fix (pacakage.json in lint-staged) -> "*.(ts|tsx)": ["eslint"]
El número magico 49 magico que hablas..da como resultado..el numero 13...zimboligia ilumina
Sigo paso a paso todo y cuando llegas al momento que linter empieza a detectar errores el mio no hace nada...
No me quedó claro, qué sentido tiene usar ambos a la vez si Prettier sobre escribe las reglas de ESLint y Standard?
BTW: NIO son córdobas Nicaragüenses, Saludos desde Nicaragua
como seria "yarn add eslint-config-prettier -D" con npm
npm install eslint-config-prettier -D
 muchas Gracias
no tengo toda esa configuración en settings.json tengo muchisimas lineas de codigo menos
es normal ? por que me trabo en esa parte
@@MrGabrielcaba Si, es normal, esa es la config que el tiene en su editor
Un poco mas de detalle, como donde esta el archivo que estas abriendo sino uno se pierde y ya no puede continuar. Gracias por el video aunque a mi puntualmente no me sirvio
Mmmm qué raro, creo que se va viendo los archivos que voy abriendo! Pero gracias por el feedback! :
19:55 eso que dices es incorrecto Midu, prettier no tiene nada que ver con eslint ni está configurado para pasar eslint cuando tengas prettier... lo que hace que eslint se ejecute es el editor.codeActionsOnSave que tienes más abajo en las settings...
No llegue a tiempo para el directo
No pasa nada Jose, lo importante es llegar, aunque sea en diferido! 🤗
He hecho todas las configuraciones y el ESLint sigue sin formatearme el código onSave, además tengo este warning:
Warning: React version not specified in eslint-plugin-react settings. See github.com/yannickcr/eslint-plugin-react#configuration . :/
Me pasa lo mismo
Creo que lo solucione, checa esto github.com/yannickcr/eslint-plugin-react/issues/2157#issuecomment-473680689
6:30
el video no esta completo falta una parte del inicio :(
Está completo! Empieza en el minuto 5 o así. :)
Tienes razón midudev no se porque en mi navegador me salía desde que estabas haciendo el init del eslint gracias por tu aporte hace unas semanas estuve buscando como configurar el eslint para un proyecto de nestjs
Como haces para que te salgan esos iconos al instalar las dependencias ?