Flujo de desarrollo seguro y consistente con ESLint y Prettier

Si estan en windows solo quítenle la comillas simples al patron en el sript y ya les funciona.

"format": "prettier --write {*.js,src/**/*.{js,jsx}}"

Comando para instalar eslint:

• Demanera global

 npm install -g eslint

• Plugins de eslint

npm install eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Luego creas un archivo con el siguiente nombre .eslintrc y pegas lo siguiente:

{
  "extends": [
    "airbnb",
    "prettier"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "react/prop-types": 0,
    "no-underscore-dangle": 0,
    "import/imports-first": [
      "error",
      "absolute-first"
    ],
    "import/newline-after-import": "error"
  },
  "globals": {
    "window": true,
    "document": true,
    "localStorage": true,
    "FormData": true,
    "FileReader": true,
    "Blob": true,
    "navigator": true
  },
  "parser": "babel-eslint"
}

IMPORTATE ESTUDIATES 2022:
Es altamente probable que les salte errores, por lo que la configuracion correcta es :

npm install eslint @babel/eslint-parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D

Y el archivo .eslintrc debe ir el siguiente contenido

{
    "extends": [
        "airbnb",
        "prettier"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "react/jsx-filename-extension": [
        1,
        {
            "extensions": [
            ".js",
            ".jsx"
            ]
        }
        ],
        "react/prop-types": 0,
        "no-underscore-dangle": 0,
        "import/imports-first": [
        "error",
        "absolute-first"
        ],
        "import/newline-after-import": "error"
    },
    "globals": {
        "window": true,
        "document": true,
        "localStorage": true,
        "FormData": true,
        "FileReader": true,
        "Blob": true,
        "navigator": true
    },
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "requireConfigFile": false
    }
}

Deberan ir a la siguiente pagina si ya instalaron segun la clase
https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/

Éxitos y feliz año 2022!

Comando para instalar prettier:

npm install prettier eslint-plugin-prettier eslint-config-prettier

Creamos un archivo con el nombre .prettierrc y realizamos la siguiente configuración:

{
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true
}

En Windows me funcionó de esta forma:

"format": "prettier --write \"{*.js,src/**/*.{js,jsx}}\"",

Chicos este fue el script que me funciono para que el prettier me formateara todos mis documentos dentro de src, ya que los scripts del curso no me localizaban la carpeta src. No formateo el archivo de webpack pero si todos los demas.

Los scripts de Package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production",
    "format": "prettier --write '{*.jsx,src/**/*.{js,jsx}}'",
    "lint": "eslint src/ --fix"
  }
}

Por si tienen problemas con arrow-body-style, desactivar la regla con 0, y agregar “env” en el .eslintrc

{
  extends: "airbnb",
  rules: {
    "arrow-body-style": 0
  },
  "env": {
    "jest": true
  }
};```

Al instalar el paquete de babel-eslint nos aparece un warning que nos avisa que este paquete esta deprecated

npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

Para corregirlo tenemos que instalar el paquete que nos sugiere npm, cambiando este paquete nos quedaría de la siguiente manera:

npm install eslint @babel/eslint-parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Si ya hemos instalado el paquete de babel-eslint podemos removerlo de la siguiente manera:

npm uninstall babel-eslint

Para mas información pueden revisar el articulo que seguí.

Comando de prettier format para windows

"format": "prettier --write \"{*.js,./src/**/*.{js,jsx}}\" ",```

Si está trabajando con React 18 estas notas te pueden ser útiles:

• Si después de ejecutar npm run format y te aparece prettier not fun. Debes instalarlo de manera global. En mi caso fue necesario darle permisos, intenta instalarlo sin el comando sudo y si aun persiste el fallo agrégale permisos:

sudo npm i -g prettier

• A la fecha de este comentario babel-slint ha sido descontinuado y es necesario cambiarlo por

@babel/eslint-parser

• Tambien debes cambiar la configuracion .eslintrc en la sección de parcer que es la ultima, la linea de comando quedaría:

"parser": "@babel/eslint-parser"

• Estas son las dependencias que he instalado, en caso de necesitarlas remplazalas en tu package.json y en la terminal después de guardar ejecuta:

npm i

• Dependencias Package.json:

"dependencies": {
    "react": "^18.2.0",
    "react-autocomplete": "^1.8.1",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "css-loader": "^6.7.1",

    "@babel/core": "^7.18.5",    
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "babel-loader": "^8.2.5",

    "@babel/eslint-parser": "^7.18.2",
    "eslint": "^8.17.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    
    "html-loader": "^3.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2"
  }

Si con ESlint les aparece el error:

error Parsing error: require() of ES Module

Esto sucede porque babel-eslint esta deprecada y no soporta ES6 modules.

Esto se soluciona instalando el siguiente comando :

npm install @babel/eslint-parser

Y en su archivo de .eslintrc deben cambiar la línea:

"parser": "babel-eslint"

por

"parser": "@babel/eslint-parser" 

Y ya debería funcionar.

Utilizando solamente la extension de eslint en vscode y con esta regla en .eslintrc, el IDE resalta los errores de prettier como si fueran de eslint.

  "rules": {
    "prettier/prettier": 2, // Means error

y ademas podemos hacer que se arreglen los errores automaticamente agregando a las settings de vscode lo siguiente

   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

En Windows me funcionó de esta forma:

"format": "prettier --write \"{*.js,src/**/*.{js,jsx}}\"",

Si les salta error en la importacion de react.
installen @babel/eslint-parser en vez de babel-eslint y en archivo .eslintrc cambien el parser a este “parser”: “@babel/eslint-parser”

Mi configuración de prettier:

{
  "printWidth": 90,
  "tabWidth": 2,
  "useTabs": true,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": true,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}

Documentación

La configuración varia en función de los gustos de cada cual 😃

Hola a tod@s también pueden usar el comando

npx eslint --init

Para inicializar la configuración del eslint de forma automática, de esta manera solo nos hará unas cuantas preguntas y de manera muy fácil y visual nos configurará desde la terminal todas las dependencias necesarias para nuestro proyecto.

Para los que tengan problemas con las importaciones y otras cosas de ESLINT pueden ver esto

Si con el comando npm run lint les aparece el siguiente error:

Oops! Something went wrong! :(

ESLint: 8.15.0

No files matching the pattern "src/" were found.
Please check for typing mistakes in the pattern.

Deben cambiar el script en su package.json a:

"lint": "eslint \"src/**/*.{js,jsx}\" --fix"

Si alguno prefiere la tabulacion en vez de 2 espacios para el codigo agreguen la regla "tabWidth": 4 al archivo .prettierrc

Eslint 2023
En la versiones de @babel/preset-react arriba de 7.1
en la configuración del archivo .eslintrc en la parte de parser
colocar en ves de “parser”: “babel-eslint” colocar la referencia “parser”: “@babel/eslint-parser” con eso se quitar el error de Parsing error: require() of ES Module

Son muchos los plugins a instalar, loaders a instalar así como configuraciones a establecer. Esto sin duda va a cambiar con el tiempo. Es decir, habrán nuevas versiones de plugins o loaders, otros dejarán de usarse, etc. Más que ir narrando lo que se va instalando, sería de mucha mayor utilidad mencionar la fuente donde encontrar las instrucciones para saber que instalar y que no instalar, así como configurar las diversas herramientas.

Si están en Mac

"format": "prettier --write {*.js,src/**/*.{js,jsx}}",

Wow, creo que esto le da mucha más profesionalidad al proyecto 😮

Les dejo por aki un repo con todas las configuraciones de un proyecto de WebPack tal cual nos ha indicado el profesor.
React WebPack Structure

En la pagina del modulo de Airbnb eslint recomienda instalar la dependencias mediante

npx install-peerdeps --dev eslint-config-airbnb

https://www.npmjs.com/package/eslint-config-airbnb

¿Todas estas dependencias no son desarrollo?

el profesor Oscar olvido instalar las dependencies con el flag -D (para que quede en devDependencies).
A pesar de que al final de la clase pone todo en su lugar, hay que hacer npm i para que quede configurado correctamente

Estoy utilizando typescript. Tengo que modificar la configuracion de las dependencias que instalamos?

me gusta mas standardjs combinado con prettier

StandardJS es una herramienta para JavaScript que establece un conjunto de reglas de estilo de código simples y consistentes para mejorar la calidad del código y la legibilidad del mismo. Ayuda a detectar y corregir automáticamente los errores de estilo de código y es fácil de usar porque no requiere configuración adicional.

por que mejor no se uso Create-react-app ? ya me perdi

Me quede esperando que instalara Husky

Les recomiendo este video de **midudev ** en el cual realiza cuna configuración similar y explica muy bien a detalle el cómo y el porqué de cada configuración.

Pues no sirve su configuración. solo marca errores esos lint en todo

No es necesario configurar eslint y prettier por separado, pueden convivir en el mismo archivo de .eslintrc, esto evita que creemos 2 comandos para fixear el código (estética y sintácticamente), instalen:

1. eslint-plugin-prettier
2. eslint-config-prettier
3. prettier

Como devDependencies, luego su archivo .eslint agregan:

{
  "extends": [
    "prettier",
    "eslint-config-prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "arrowParens": "avoid",
        "bracketSpacing": true,
        "htmlWhitespaceSensitivity": "css",
        "insertPragma": false,
        "jsxBracketSameLine": false,
        "jsxSingleQuote": true,
        "printWidth": 80,
        "proseWrap": "preserve",
        "quoteProps": "as-needed",
        "requirePragma": false,
        "semi": false,
        "singleQuote": true,
        "tabWidth": 2,
        "trailingComma": "none",
        "useTabs": false,
        "vueIndentScriptAndStyle": false
      }
    ]
  }
}

O bueno, las configuraciones de prettier que ustedes prefieran y listo, ya tendrán todo configurado.

Éste es el capítulo de la suerte 11:11 xD

Buenas les dejo mí configuración optimizado para React, con Prettier y ESLint. Debajo del .eslitnrc.js, están las dependencias necesarias.
Espero le sea de utilidad.

Les dejo un pequeño aporte de configuración por si quieren usar alias de webpack con eslint para tener imports más organizados.
_
Note un pequeño error al momento de ejecutar el script de lint ya que no toma en cuenta ningun archivo jsx, asi que lo primero que tenemos que hacer es editar el script que creo el profesor en el package.json para que eslint también nos escanee los archivos jsx, esto lo hacemos de la siguiente manera:

"lint": "eslint src/ --ext jsx,js --fix"

Para configurar los alias en webpack basta con añadirle esto en la sección resolve del archivo webpack.config.js

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@styles': path.resolve(__dirname, 'src/styles'),
    }
},

Necesitaremos instalar un par de dependencias para que ESLint los reconozca

npm i eslint-plugin-import eslint-import-resolver-webpack -D

Por ultimo agregaremos las configuraciones necesarias en el archivo .eslintrc

"settings": {
   "import/resolver": {
      "alias": {
        "map": [
          ["@styles", "./src/styles"]
        ]
       },
       "extensions": [".js", ".sass", ".json", ".jsx"]
    }
},
"plugins": [
    "prettier",
    "plugin:import/recommended"
],

Adicionalmente si utilizan vscode y quieren que funcione el intellisense para estos imports pueden crear un archivo a nivel raiz llamado jsconfig.json con el siguiente contenido

{
  "compilerOptions": {
    "target": "esnext",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@styles/*": ["src/styles/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

Espero les sirva 🤟🏼

Yo lo deje de esta manera para ejecutar solo el comando de ‘yarn lint o npm run lint’

"format": "prettier --write '{*.jsx,src/**/*.{js,jsx}}'",
"lint": "eslint src/ --fix && yarn format"

n

Se puede hacer que el eslint ejecute tus reglas de prettier de esta forma no hay que correr el prettier por aparte. Ademas se puede configurar vsCode para que arregle todo lo que este mal del eslint automáticamente al guardar.

https://github.com/prettier/eslint-plugin-prettier

así luce mi configuración de eslint hasta el momento

{
  "extends": [
    "airbnb", 
    "airbnb/hooks",
    "airbnb/whitespace",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": ["warn", {
      "trailingComma": "es5",
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "singleQuote": true
    }]
  }
}

y mi config de vscode

"editor.codeActionsOnSave": {
    "source.fixAll": true
  },

Me gusta trabajar con Prettier como plugin para VS Code, y realizar su configuración desde la propia configuración del editor.

Esto es muy importante tanto ESlint y Prettier pero para grupos de trabajo ya consolidados, pero no está de más aprender xD.

Les facilito la pagina de eslint para que puedan profundizar mas en su configuración

Hola, estoy siguiendo este proyecto en Nextjs. Les dejo mi repositorio:

https://github.com/danyel117/platzi-conf-store