es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo configurar correctamente una base de proyecto React?

24 Jul, 2023 Programación

Estoy tratando de incluir:

  • Typescript
  • Eslint (configuración de Airbnb)
  • Prettier
  • React 18 rc
  • pre-commit hook para lint y format

He intentado descargarlos uno por uno según las documentaciones oficiales de cada uno, pero no conviven bien juntos, siempre hay conflictos. Configuraré el proyecto base con la plantilla de create-react-app para typescript, instalaré eslint para typescript y el proyecto fallará inmediatamente, ya que el linter señala todos los errores en el proyecto base, algunos de los cuales parecen ser irreparables sin cambiar las reglas.

Por ejemplo, uno de los primeros problemas a los que me enfrento es que el proyecto CRA predeterminado no incluye nombres de importación, violando la regla de import/extensions, pero no reconoce las extensiones ts o tsx cuando intento agregarlas.

¿Existe una guía para configurar todas estas dependencias correctamente? (React 18 rc es opcional, pero según lo que veo, de todos modos no rompe nada)

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay varias guías disponibles que pueden ayudarte a configurar Typescript, Eslint (configuración de Airbnb), Prettier, React 18 rc y un gancho pre-commit para analizar y dar formato a tu código. Una de estas guías se encuentra en el sitio web oficial de documentación de create-react-app. A continuación te presento los pasos que puedes seguir:

    1. Crea una nueva aplicación de React utilizando la plantilla de Typescript con create-react-app.
    npx create-react-app my-app --template typescript
    1. Instala los paquetes requeridos:
    npm i eslint prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged @typescript-eslint/eslint-plugin @typescript-eslint/parser
    1. Crea un archivo .eslintrc.json:
    {
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier",
    "prettier/react",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}
    1. Crea un archivo .prettierrc:
    {
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}
    1. Agrega el siguiente script a tu archivo package.json:
    {
  "scripts": {
    "lint": "eslint src/**/*.{js,jsx,ts,tsx} --quiet --fix",
    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "precommit": "lint-staged",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  }
}
    1. Por último, ejecuta npm run lint y npm run prettier para verificar cualquier error de análisis o problema de formato en tu código.

    Siguiendo estos pasos, deberías poder configurar y usar Typescript, Eslint (configuración de Airbnb), Prettier, React 18 rc y un gancho pre-commit para analizar y dar formato a tu código.

Comments are closed.