Recientemente cambié mi computadora portátil y todos los días encuentro un nuevo problema y ninguna solución. Solía crear una aplicación de reacción y si olvidaba devolver el jsx en un componente de reacción, veía en Chrome algo como "Error: aplicación (...) No se devolvió nada del procesamiento ... etc. No recuerdo si hubo un error en vscode pero juraría que también lo hubo.

Ahora, lo hago en el momento, creé una nueva aplicación de reacción con npx create-react-app y eliminé el retorno de la aplicación y realicé un inicio de sesión en la consola en la función del componente. Cuando inicio npm, puedo ver la consola iniciar sesión en las herramientas de desarrollo, no hay error en vscode, no hay error en Chrome. ¡Solo pantalla blanca y el terminal tampoco muestra ningún error!

En otros proyectos, siempre uso eslint + prettier + airbnb, pero traté de eliminar todo (excepto los complementos en vscode de eslint y prettier) e hice una nueva aplicación de creación y reacción sin nada, con el mismo resultado, así que asumo que ese no es el problema.

Además, también me gustaría preguntar si mi configuración de eslint tiene algún problema o si todo está bien. ¿Modificarías algo? Sobre todo para reaccionar.

Otro problema, cuando agrego "prettier/prettier": "error" en eslintrc para ver todos los errores más bonitos, me obliga a poner comillas dobles, aunque mi extensión dice comillas simples y mi archivo .prettierrc también hace singleQuote true. La única solución es eliminar la regla eslintrc, pero ya no puedo ver errores más bonitos.

 { "env": { "browser": true, "es2021": true }, "extends": [ "plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended" ], "parser": "@babel/eslint-parser", "parserOptions": { "requireConfigFile": false, "babelOptions": { "presets": ["@babel/preset-react"] }, "ecmaFeatures": { "jsx": true }, "ecmaVersion": 13, "sourceType": "module" }, "plugins": ["prettier", "react", "react-hooks"], "rules": { "prettier/prettier": "error", "react/function-component-definition": [ "error", { "namedComponents": "arrow-function" } ] } }