Configuración de ESLint

Clase 19 de 22 • Curso de Server Side Render con Express

Miguel Angel Muñoz Pozos

student•

Un **Lint **es una herramienta de programación; originalmente lint era el nombre de una herramienta de programación utilizada para detectar código sospechoso, confuso o incompatible entre distintas arquitecturas en programas escritos en C; es decir, errores de programación que escapan al habitual análisis sintáctico que hace el compilador. En la actualidad, se utiliza este término para designar a herramientas que realizan estas tareas de comprobación en cualquier lenguaje de programación. Las herramientas de tipo lint generalmente funcionan realizando un análisis estático del código fuente.

Las construcciones sospechosas que se suelen buscar son usos de variables antes de ser inicializadas o creadas, condiciones que no varían bajo ninguna circunstancia (Son siempre verdaderas o siempre falsas) y cálculos cuyos resultados probablemente caigan fuera del rango permitido por las variables utilizadas.

Tatiana Karina Valencia Hernández

student•

Muy buen aporte, gracias!

Ulises Rojas González

student•

Si cuando corren npm run start:dev no hace la compilación, es porque probablemente están en modo producción. Recuerden cambiar el ENV a 'development' en el archivo .env . A mí me estaba pasando eso, jeje.

Mariela de Jesus Rivas Hernandez

student•

Me has salvado! estoy agradecida!

Jose Anibal Garcia Giraldo

student•

A día de hoy eslint-loader se encuentra deprecated, por ende se utiliza eslint-webpack-plugin, es mucho más sencillo de configurar. Pueden revisar el repo allí indican todo sobre el nuevo plugin. https://github.com/webpack-contrib/eslint-webpack-plugin

Sin embargo aquí les muestro como lo implementé en mi código :D

Dilan Santiago Ariza Cañon

student•

Gracias! :)

Andres Evaristo Ruiz Gonzalez

student•

Excelente gracias!

Nicolas David Pastran Zamora

student•

Me genero este error:

containers\Home.jsx
  20:50  error  Prop spreading is forbidden  react/jsx-props-no-spreading
  30:48  error  Prop spreading is forbidden  react/jsx-props-no-spreading
  39:48  error  Prop spreading is forbidden  react/jsx-props-no-spreading

Y apague esta regla para no complicarme, en el archivo .eslintrc asi:

"react/jsx-props-no-spreading": ["off"]

Jose Daniel Molina

student•

Usar ESLint es toda una complicación, pero sé que es realmente importante usarlo cuando se desarrolla colaborativamente, creo que podríamos automatizar el proceso de fixing con Gulp y adicional utilizar Prettier para que el código además se formatee con unas reglas previamente definidas por el equipo. Reto personal, no lo creen?

Laura Camila Pregonero

student•

::::::::::::::::::::::::::::::::::::::

Gerson Montenegro

student•

Personalmente me gusta más hacer el destructuring desde los mismos parámetros, que de hecho, es la recomendación de Airbnb

const Player = ({ match: { params: { id } }, playing, history }) => {

Nelson Cadenas

student•

Buenas noches, alguien sabrá como habilitar en vs.code esos códigos de colores (azul y rojo) que marcan los nombres en el directorio de archivos del proyecto (área izquierda de vs.code) al momento de utilizar eslint??

Nestor Ruben Rodriguez Caro

student•

Hola nca1478, tenes que tener el archivo .eslintrc (en la misma carpeta donde esta package.json) con la configuracion de eslint ejemplo: https://gist.github.com/ruben-xe/032b7f6c09a8ddeb73f45f76ac3de815 y en tu VScode tener installado el plugin de Eslint ("Integrates ESLint JavaScript into VS Code") este plugin va a leer la configuracion que tiene el archivo .eslintrc espero te sirva. saludos.

Fernando Cordero

student•

En las clases del curso practico de react te enseñan a hacer esa configuración. Saludos

Javier Armando Vargas Vega

student•

Bueno. Hasta el momento la aplicación funcionó medianamente bien, pues tiene los siguientes problemas (por lo menos a mí me han salido):

No me reconoce los estilos del componente Search
Si bien Se puede iniciar sesión, cuando se da click en Registro no regresa a la pantalla principal.
Lo mismo ocurre cuando se da click en registro.
Cuando se desactiva el javascript, no visualiza el Header y el Footer.

Está todo tal cual se hace en las clases. No sé a qué pueda deberse esos errores.

Si alguien puede darme una idea de ello, lo agradezco.

Iván B.

student•

En el caso del Header y Footer lo que hice en mi <StaticRouter> fue incluir mi <Layout>

  <StaticRouter location={req.url} context={{}}>
    <Layout>{renderRoutes(serverRoutes)}</Layout>
  </StaticRouter>

Fernando Cordero

student•

Hermano, lea su código. Es el mejor consejo que le puedo dar. Deber tener muchos typos. Lee con tranquilidad y paciencia.

Cesar Fonseca

student•

Esta actualmente deprecated el plugin

Cesar Fonseca

student•

Se debe usar este plugin: eslint-webpack-plugin

Dilan Santiago Ariza Cañon

student•

Gracias! :)

Llego rato buscando porque no me corregia los errores!

Elvis Saavedra

student•

Me di cuenta que el Header lo están llamando en todas las páginas, es por eso que no usa el Layout en la parte de express...

Rubén Jiménez Torres

student•

oooo, nunca lo hubiera visto, gracias !!!

john fredy quimbaya orozco

student•

el compañero que haya podido resolver este error me seria de gran utilidad la configuración del curso no es la optima y me sale este error


WARNING in ./src/frontend/utils/gravatar.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
No ESLint configuration found in /Users/desarrollomp/Documents/GitHub/PlatziVideoRender/src/frontend/utils.
 @ ./src/frontend/components/Header.jsx 14:0-41 47:9-17
 @ ./src/frontend/containers/Home.jsx
 @ ./src/frontend/routes/App.js 12:0-38 23:15-19
 @ ./src/frontend/index.js 17:0-31 27:36-39

18 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in Conflict: Multiple assets emit different content to the same filename assets/.gz

ERROR in Conflict: Multiple assets emit different content to the same filename assets/.gz

webpack 5.50.0 compiled with 2 errors and 18 warnings in 15960 ms

Héctor Eduardo López Carballo

student•

Hola!

Podrías compartir tu repositorio? Parece que hay un problema con algún import.

Carlos Alfonso Garcia Rivera

student•

si ya tenemos instalado eslint, ¿tengo que volverlo a instalar?

John Cardenas

student•

Hola :D

No es necesario volverlo a instalar. Simplemente podrías modificarlo para la forma en la cual se usa en el curso y listo

Carlos Alfonso Garcia Rivera

student•

gracias por resolver mi duda

Fernando Cordero

student•

Tengo problemas al momento de hacer login y register, no funcionan los botones y no entiendo porque, a alguien le ha pasado en este punto del curso?

Jose Daniel Hernandez Quiceno

student•

Te aseguraste de habilitar Javascript?

Fernando Cordero

student•

@josedanielhq37 si

Fernando Cordero

student•

A alguien le paso que ahora el proyecto a la hora de login o hacer un register no funcionan los botones respectivamente, es decir, no hace nadaaaaa, como si el botón no tuviera la acción implementada?

john fredy quimbaya orozco

student•

el compañero que haya podido resolver este error me seria de gran utilidad la configuración del curso no es la optima y me sale este error

ERROR in Conflict: Multiple assets emit different content to the same filename assets/.gz

ERROR in Conflict: Multiple assets emit different content to the same filename assets/.gz

Juan Jose Arcani

student•

Es curioso, ahora que instalé la extensión de ESLint para VSCode me salen mensajes que algunas de mis dependencias deberían ser de desarrollo y otras de producción, al menos en los files del servidor. Ni modo jeje

Didier Zúñiga

student•

Chicos.

Estoy usando localStorage para almacenar unos datos, funciona bien pero cuando la pagina se recarga (F5) aparece el error ReferenceError: localStorage is not defined

Me imagino que ya no funciona por el hecho de renderearse en el server.

Alguna manera optima para solucionar esto?

Esdras Benjamín Pavón

student•

Hola Didier! Yo lo solucioné guardando la información en cookie, asi puedo acceder tanto desde el sv como desde el cliente.

Cualquier otra idea, es bienvenida!

Cesar Fonseca

student•

Estan verificando el uso de hash al guardar estos archivos?

Fernando Cordero

student•

Tengo problemas al momento de hacer login y register, no funcionan los botones y no entiendo porque, a alguien le ha pasado en este punto?

containers\Home.jsx
50  error  Prop spreading is forbidden  react/jsx-props-no-spreading
48  error  Prop spreading is forbidden  react/jsx-props-no-spreading
48  error  Prop spreading is forbidden  react/jsx-props-no-spreading

WARNING in ./src/frontend/utils/gravatar.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
No ESLint configuration found in /Users/desarrollomp/Documents/GitHub/PlatziVideoRender/src/frontend/utils.
 @ ./src/frontend/components/Header.jsx 14:0-41 47:9-17
 @ ./src/frontend/containers/Home.jsx
 @ ./src/frontend/routes/App.js 12:0-38 23:15-19
 @ ./src/frontend/index.js 17:0-31 27:36-39

18 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in Conflict: Multiple assets emit different content to the same filename assets/.gz

ERROR in Conflict: Multiple assets emit different content to the same filename assets/.gz

webpack 5.50.0 compiled with 2 errors and 18 warnings in 15960 ms

Configuración de ESLint

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas