Configuración de ESLint

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.

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.

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 😄

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"]

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?

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

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 }) => {

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??

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

1. No me reconoce los estilos del componente Search
2. Si bien Se puede iniciar sesión, cuando se da click en Registro no regresa a la pantalla principal.
3. Lo mismo ocurre cuando se da click en registro.
4. 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.

Esta actualmente deprecated el plugin

Se debe usar este plugin: eslint-webpack-plugin

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…

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

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

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?

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?

Si presentan algún problema como este en uno de sus componentes:

Se puede solucionar agregando 2 nuevas reglas en el archivo .eslintrc

Dejo mi aporte con la ultima version de eslint-webpack plugin

npm install eslint-webpack-plugin --save-dev

const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    isDev
      ? new ESLintPlugin({
          extensions: ["js", "jsx"],
          exclude: "./node_modules/",
        })
      : () => {},
  ],
  // ...
};

Que bonito ver como se arreglan los errores heheheh

El plugin de eslint para Webpack ahora se llama: eslint-webpack-plugin.

Lo pueden instalar con: npm i eslint-webpack-plugin -D

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.