Instalar y configurar Prettier y Eslint

Instalación de Prettier

npm install --save-dev prettier

npm install --save-dev prettier @typescript-eslint/parser

npm install vite-plugin-prettier --save-dev

Creación de archivo .prettierrc.json

El archivo de configuración .prettierrc.json es donde se especifican las reglas que Prettier debe seguir para formatear el código. Aquí tienes el contenido que mencionas:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "parser": "@typescript-eslint/parser"
}

• printWidth: Establece el número máximo de caracteres por línea antes de que Prettier se divida automáticamente. En este caso, se limita a 80 caracteres.
• tabWidth: Define el número de espacios que se usará para un tabulador. En este caso, son 2 espacios.
• useTabs: Define si se deben usar tabs en lugar de espacios. En este caso, se utiliza espacios.
• semi: Define si se deben agregar puntos y comas al final de las sentencias. En este caso, se agrega un punto y coma.
• singleQuote: Define si se deben usar comillas simples o dobles. En este caso, se usa dobles.
• trailingComma: Define si se deben agregar comas al final de las propiedades. En este caso, se agrega una coma al final de las propiedades.
• bracketSpacing: Si se establece en true, Prettier agregará un espacio entre las llaves de los objetos. Ejemplo
• jsxBracketSameLine: Si se establece en true, Prettier colocará el cierre de la etiqueta > en la misma línea que el último atributo en JSX (como en las etiquetas auto-cerradas).
• arrowParens: Controla si Prettier debe poner paréntesis alrededor de los parámetros de las funciones flecha. Con 'always', siempre se usarán paréntesis, incluso si solo hay un parámetro.
• proseWrap: Controla el ajuste de línea de los textos en Markdown. 'preserve' mantiene el comportamiento original sin forzar un ajuste automático.
• parser: Especifica el parser que Prettier debe usar para analizar los archivos. En este caso, se ha configurado para usar el parser de TypeScript (@typescript-eslint/parser) para que Prettier entienda y formatee correctamente el código TypeScript.

Configuración de vite.config.ts

// ...
import PrettierPlugin from 'vite-plugin-prettier';

export default defineConfig({
  // ... otras configuraciones ...
  plugins: [
    react(),
    PrettierPlugin(),
  ],
});

Configurar tsconfig.json

{
  // ...
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "build",
    "rootDir": "src"
  }
}

• target: Especifica que el código TypeScript se transpile a ECMAScript 6 (ES6). Esto asegura que se utilicen características modernas de JavaScript como let, const, clases, etc.
• module: Indica que el sistema de módulos que se usará es CommonJS. Esto es común en entornos deNode.js.
• sourceMap: Genera archivos de mapa de origen (.map), lo que facilita el depurado del código en el navegador.
• outDir: Especifica la carpeta donde se guardarán los archivos generados después de la compilación.
• rootDir: Especifica que la carpeta de origen de los archivos TypeScript es src.
• forceConsistentCasingInFileNames: Asegura que los nombres de los archivos sean consistentes, evitando problemas por el uso inconsistente de mayúsculas y minúsculas.
• strict: Activa las verificaciones estrictas de TypeScript, lo que implica un control más riguroso de los tipos, lo que mejora la calidad y seguridad del código.
• allowSyntheticDefaultImports: Permite importar módulos que no tengan una exportación default como si la tuvieran. Esto facilita la compatibilidad entre diferentes tipos de módulos.

Instalación de Eslint

npm install eslint --save-dev

npm install @typescript-eslint/parser --save-dev
npm install @typescript-eslint/eslint-plugin --save-dev

Configuración de .eslintrc.json

Crea un archivo .eslintrc.json en la raíz de tu proyecto con el siguiente contenido:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "rules": {
    // Aquí puedes agregar reglas personalizadas
  }
}