0
315
Visualizações¿Cómo se integra ESLint en la aplicación Create React?
Cuando ejecuto npx create-react-app ... , se crea un proyecto React básico para mí. Cuando luego miro en package.json , parece haber alguna evidencia de que ESLint está presente, ya que hay esto:
"eslintConfig": { "extends": "react-app" }, Sin embargo, cada vez que instalo ESLint como una dependencia de desarrollo y lo configuro, como hago normalmente, VS Code parece detectarlo. En este caso, VS Code no parece reconocer que hay algún tipo de linter presente/configurado. Esto no es muy sorprendente, ya que ESLint no es una dependencia del proyecto React que acabo de generar, al menos no de acuerdo con package.json . Cuando trato de ejecutar eslint . dentro del directorio raíz del proyecto, dice "comando no encontrado".
Traté de darle vida a esta configuración de ESLint expandiéndola, así que ahora tengo esto:
"eslintConfig": { "extends": ["react-app", "eslint:recommended", "google"], "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } },Esto no cambia nada. Manipulé el código fuente de una manera que sé que viola la configuración anterior, sin embargo, no me han señalado ninguna irregularidad.
Esto me lleva a una pregunta simple: ¿Los proyectos generados por create-react-app vienen con algún tipo de configuración de ESLint y, de ser así, cómo lo habilito y amplío correctamente?
Como me refiero al éxito número uno de Google que aparece al buscar "crear eslint de aplicación de reacción" , que obviamente he leído, permítanme aclarar lo que quiero decir:
ESLint obviamente está integrado en Create React App de una manera diferente a como lo sería si se hubiera agregado manualmente al proyecto usando like so . Esto no solo es evidente por la gran cantidad de personas que publican sobre sus dificultades para lograr que los dos trabajen juntos. Esto también es evidente como...
- ...no se puede ejecutar el comando
eslinten la raíz del proyecto. - ...ESLint no parece ser una dependencia dentro de
package.json. - ... VS Code no detecta que hay ESLint presente.
- ...no hay ningún archivo
.eslintrc.*en la raíz del proyecto. - ...etc.
Entonces: ¿Cómo hago ESLint en el contexto de Create React App? Para empezar: ¿Cómo lo ejecuto? ¿Cómo lo amplío? ¿Y por qué VS Code no lo detecta, aunque generalmente nota la presencia de ESLint?
2 Respostas
Responde à pergunta0
Sí, create-react-app viene con la configuración de eslint .
¿Cómo lo habilito y lo extiendo correctamente?
Puedes consultar cómo extenderlo aquí .
{ "eslintConfig": { "extends": ["react-app", "shared-config"], "rules": { "additional-rule": "warn" }, "overrides": [ { "files": ["**/*.ts?(x)"], "rules": { "additional-typescript-only-rule": "warn" } } ] } }¿Cómo lo habilito?
Necesitas integrarlo con tu IDE .
¿Cómo lo ejecuto?
Después de integrarlo, un servidor eslint se ejecutará en segundo plano y habilitará el linting para su IDE (a veces se requiere reiniciar el IDE).
Revisé todos sus reclamos después de ejecutar npx create-react-app example :
...no se puede ejecutar el comando eslint en la raíz del proyecto.
Puede:
eslint se instala como parte de la dependencia del proyecto, simplemente ejecutando eslint globalmente ( eslint [cmd] ), debe asegurarse de que esté instalado globalmente (no recomendado).
...ESLint no parece ser una dependencia dentro de package.json.
¿Por qué debería serlo? Es por eso que usa un motor de arranque como CRA. Es una dependencia interna, no tienes que preocuparte por eso, ese es el trabajo de CRA.
... VS Code no detecta que hay ESLint presente.
Lo hace, verifique la pestaña OUTPUT y busque ESLint para ver la salida del servidor.
...no hay ningún archivo .eslintrc.* en la raíz del proyecto.
Obtiene la configuración predeterminada de CRA (que está oculta para usted por centrarse en la codificación). Agregue dicho archivo si desea anularlo (también puede extenderlo, consulte los documentos).
Es muy útil entender qué es en realidad eslint y cómo lo usamos Desarrollo de React, consulte la pregunta relacionada "¿Los ganchos de React realmente tienen que comenzar con "uso"?" .
0
Para ampliar la respuesta del comentario superior:
...ESLint no parece ser una dependencia dentro de package.json.
¿Por qué debería serlo? Es por eso que usa un motor de arranque como CRA. Es una dependencia interna, no tienes que preocuparte por eso, ese es el trabajo de CRA.
Un proyecto creado con create-react-app tendrá react-scripts como dependencia.
react-scripts tiene eslint instalado como una dependencia, como se ve en react-scripts package.json .
Puede ver si un paquete está instalado (y dónde) ejecutando npm ls <package> en la raíz de su proyecto.
npm ls eslint muestra:
└─┬ react-scripts@4.0.3 └── eslint@7.21.0Esto muestra el árbol de dependencias que investigamos manualmente al buscar en GitHub los scripts de reacción.
Entonces, un proyecto hecho con create-react-app viene con eslint. Como es una dependencia, no algo instalado globalmente, debe ejecutarse con un script npm.
Esta es la razón por la que se ejecuta eslint . en tu terminal no funciona, pero usando
"lint": "eslint .", entonces npm run lint lo hace. (aunque puede hacer el comando eslint --ignore-path .gitignore . debido a un error actual ).
Del mismo modo, las configuraciones de eslint se instalan en react-scripts y luego se hace referencia en el propio package.json de la salida predeterminada del proyecto.