Vite: Configuración para React
Tags: spanish, react, vscode, vite
Published: 2022-05-09 15:56:35

Idiomas: [🇺🇸] [English](https://dev.to/equiman/vite-powerful-react-project-g4m) - [🇪🇸] [Español](https://dev.to/equimancho/vite-configuracion-para-react-3hf2)

---

[Vite](https://vitejs.dev/) es de lejos la mejor alternativa para crear proyectos de React hoy en día.

```bash
npm create vite@latest <project-name> -- --template <react-swc|react-swc-ts>
# npm 7+, extra double guion es requerido

cd <project-name>
npm install
npm run dev
```

Con estos comandos creamos un proyecto muy básico y limpio que sirve como punto de inicio, pero que va a necesitar algunas herramientas extras para automatizar tareas que pueden facilitar tu vida y la de tu equipo de desarrollo.

---

# VSCode

Se recomienda hacer estas configuraciones en los **ajustes del proyecto** y no en los ajustes globales.

Empezaremos creando una carpeta `.vscode` con un archivo `settings.json` dentro.

```json
# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{
    "explorer.fileNesting.patterns": {
        "*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js, $(capture)*.snap",
        "*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx, $(capture)*.snap",
        "*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts, $(capture)*.snap",
        "*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx, $(capture)*.snap",
    },
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}
```
  
> Existen muchas extensiones y configuraciones para VSCode por ahí. Si necesitas un toque extra, les recomiendo darle una mirada a [VSCode - Essentials](https://dev.to/equiman/my-essential-visual-studio-code-extensions-and-configurations-5197) y [VSCode - React Flavored](https://dev.to/equiman/vscode-react-flavored-134h).

## Depuración

No hay necesidad de instalar una extension extra para hacer depuración de React desde VSCode. 

```json
# 📄 File: /.vscode/launch.json
-----------------------------------

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome", // o "msedge"
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
```

Desactive la apertura automática del navegador adicionando `BROWSER=none` al archivo `.env` en tu proyecto. También hay que cambiar el script `dev` para que use el mismo puerto.

```diff
# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
-   "dev": "vite",
+   "dev": "vite --port 3000",
  }
}
```

Ejecute el comando `npm run dev` e inicie el navegador desde el panel de Depuración. Ahora puedes adicionar puntos de interrupción (break points) directamente en VSCode.

## Extensiones

Si quiere que VSCode muestre extensions recomendadas cuando abra el proyecto.

```json
# 📄 File: /.vscode/extentions.json
-----------------------------------

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "stylelint.vscode-stylelint",
        "ZixuanChen.vitest-explorer"
    ]
}
```

---

## Linter

- Extensión [ES Lint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

```diff
# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{ 
+    "editor.formatOnSave": true,
+    "javascript.format.enable": false,
+    "javascript.validate.enable": true,
+    "typescript.format.enable": false,
+    "typescript.validate.enable": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
}
```
  
Instale este paquete en la carpeta del proyecto:

```bash
npm install -D eslint
npm init @eslint/config
```

Pueden elegir la configuración que deseen, pero la que recomiendo es:

```bash
Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No #o Yes si tu proyecto lo usa
Run: Browser #y Node si usa Next.js
Style guide: Popular -> Standard #JS sin punto y coma ;
Format: JSON
```

> **Excepción de los punto y coma**  
> Debido a que la guía de estilos `standard` no usa puno y como debes tener presente los siguiente. Si la línea de código siguiente comienza con alguno de los siguientes operadores `[`, `(`, `+`, `\`*, `/`, `-`, `,`, `.`, será reconocida como una expresión perteneciente a la línea anterior. Por lo tanto, vas a necesitar empezar la línea con `;` si quieres que la reconozca como una nueva sentencia de código.

Al finalizar va preguntar si desea instalar uno paquetes extras. La respuesta debe ser: **yes** (si). Cuando finalice, actualice las configuraciones de las reglas así:

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "rules": {
+     "no-console": "warn",
+     "react/prop-types": "off",
+     "react/self-closing-comp": "warn",
+     "react/react-in-jsx-scope": "off"
    },
+   "settings": {
+     "react": {
+       "version": "detect"
+     }
+   }
}
```

Si estas usando `TypeScript` también debes adicionar esta configuración:

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "parserOptions": {
+     "project": ["tsconfig.json"],
+     "createDefaultProgram": true
    },
    "rules": {
      "no-console": "warn",
      "react/prop-types": "off",
      "react/self-closing-comp": "warn",
+     "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+     "@typescript-eslint/explicit-function-return-type": "off",
  },
}
```

Cree un archivo `.eslintignore` en la raíz del proyecto:

```config
# 📄 Archivo: .eslintignore
-----------------------------------

build
coverage
dist
```

> No es necesario adicionar los `node_modules` porque los ignora por defecto.

Si no quieres usar la extensión de `ES Lint`, adicione los comandos `list` (listar) y `fix` (corregir) *al final* de la lista de `scripts`:

```diff
# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}
```

### Evitar error import React

> Desde React 17, no es necesario usar `import React` cuando solo se usa JSX, pero si lo debemos hacer para usar Hooks o los otros métodos que provee React.

Para evitar que `ES Lint` nos alerte sobre el `import React` debemos adicionar el siguiente plugin a la configuración:

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "extends": [
      "plugin:react/recommended",
      "standard-with-typescript",
+     "plugin:react/jsx-runtime",    
    ],
}
```

### Lineas en Blanco

Si quiere preservar líneas en blanco después de las definiciones.

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "rules": {
+       "padding-line-between-statements": [
+           "error",
+           {
+               "blankLine": "always",
+               "prev": "*",
+               "next": "return"
+           },
+           {
+               "blankLine": "always",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": "*"
+           },
+           {
+               "blankLine": "any",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": [
+                   "const",
+                   "let",
+                   "var"
+               ]
+           }
+       ]
    },
}
```

### Auto ordenar

Si no quieres lidiar manualmente con el ordenamiento de propiedades o imports, o que cada persona en el equipo lo haga de forma diferente, adiciona estas configuraciones.

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "rules": {
+       "import/order": [
+           "warn",
+           {
+               "pathGroups": [
+                   {
+                       "pattern": "~/**",
+                       "group": "external",
+                       "position": "after"
+                   }
+               ],
+               "newlines-between": "always-and-inside-groups"
+           }
+       ],
+       "react/jsx-sort-props": [
+           "warn",
+           {
+               "callbacksLast": true,
+               "shorthandFirst": true,
+               "noSortAlphabetically": false,
+               "reservedFirst": true
+           }
+       ]
    },
}
```

---

## Formato

> `ES Lint` podría ser suficiente y Prettier es totalmente opcional, pero recomiendo usarlo porque tiene mejor rendimiento a la hora de hacer formateo que `ES Lint`. El problema es que a veces se "pelean" entre ellos, así que hay que saber configurarlos para que trabajen juntos.

Si también lo quieres usar estos son los pasos.

- Extensión [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

```diff
# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    }
+    "eslint.probe": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+    "[javascript][typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": false,
         // Corre primero Prettier y luego ESLint
+        "editor.codeActionsOnSave": [
+            "source.formatDocument",
+            "source.fixAll.eslint"
+        ],
+    }
}
```
  
Instalar Prettier:

```bash
npm install -D prettier 
```

Y ESLint (JS) para prettier:

```bash
npm install -D eslint-config-prettier
```

O TSLint (TS) para prettier:

```bash
npm install -D tslint-config-prettier
```

Cree un archivo `.prettierignore` en la raíz del proyecto:

```config
# 📄 Archivo: .prettierignore
-----------------------------------

build
coverage
dist
package-lock.json
```

> No es necesario adicionar los `node_modules` porque los ignora por defecto.

Cree un archivo `.prettierrc.json` en la raíz del proyecto

```json
# 📄 Archivo: .prettierrc.json
-----------------------------------

{
    "semi": false,
    "singleQuote": true
}
```

Adicione la siguiente configuración *al final* de `extends`:

```diff
# 📄 Archivo: .eslintrc.json
---

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
+       "prettier", //de ultimo
    ],
}
```

Si no quieres usar la extensión de `Prettier`, adicione los comandos `check` (chequear) y `write` (escribir) *al final* de la lista de `scripts`:
  
```diff
# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write"
  }
}
```

---

## HTML Linter

- [HTMLHint](https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint)

```bash
npm install -D htmlhint
```

Si también desea que se haga revision del HTML con `eslint` instale este plugin:

```bash
npm install -D eslint-plugin-html
```

Adicione `html` a la lista de plugins

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "plugins": [
        "react",
+       "html"
    ],
}
```

---

## CSS Linter

- Extensión [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

Instale y configure en el proyecto:

```bash
npm install -D stylelint stylelint-config-standard stylelint-config-idiomatic-order
```

Cree un archivo de configuración llamado `.stylelintrc.json` en la raíz del proyecto.

```json
# 📄 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-idiomatic-order"
  ],
  "rules": {
    "declaration-colon-newline-after": "always-multi-line"
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}
```

Si planea usar `styled components` también instale

```bash
npm install -D stylelint-config-styled-components
```

```diff
# 📄 File: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-idiomatic-order",
+   "stylelint-config-styled-components"
  ],
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
-   "**/*.jsx", 
    "**/*.ts",
-   "**/*.tsx" 
  ] 
}
```

Para prevenir que tanto VSCode como Stylelint reporten los mismos errores, debemos deshabilitar los que trae VSCode por defecto.

```diff
# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint",
+        "editor.codeActionsOnSave": [
+            "source.fixAll.stylelint"
+        ],
+    }
}
```


Stylelint tiene cerca de 170 regalas. Algunas veces te va a mostrar errores que literalmente te van a causar problemas a futuro.

---

## Git Linter

Si el proyecto aún no tiene configurado un repositorio de git, primero debe correr el comando:

```bash
git init
```

- [Lint Staged](https://github.com/okonet/lint-staged)

Usa [Husky](https://github.com/typicode/husky) por debajo y solo corre el linter contra los archivos en `staged`. Con esto nos aseguramos que no se suban cambios sin ser revisados antes por los linters configurados.

Instale y configure en el proyecto:

```bash
npx mrm@3 lint-staged
```

---

## Pruebas

Usaremos [Vitest](https://vitest.dev/) que es compatible con el API de Jest, así que no toca reaprender demasiado sobre la sintaxis.

```bash
npm install -D vitest
```
  
Con la configuración `global` no vas a necesitar importar las dependencias en cada archivo, adicionando automáticamente soporte a Jest.

```diff
# 📄 Archivo: vitest.config.ts
-----------------------------------

- import { defineConfig } from 'vite'
+ import { defineConfig } from 'vitest/config'

export default defineConfig({
+  test: {
+    globals: true,
+  },
})
```

Si estas usando typescript, también adiciona esta configuración.

```diff
# 📄 Archivo: tsconfig.json
-----------------------------------

{ 
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  }
}
```

El siguiente paso no es requerido, pero si quieres sacar ventaja del IntelliSense es recomendado iniciar los archivos así:

```javascript
# 📄 Archivos: *.test.js
-----------------------------------

import { it, expect, describe } from "vitest";
```

Actualiza los scripts para poder correr las pruebas desde la terminal:

```diff
# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "test":    "vitest --run --reporter verbose",
+    "test:w":  "vitest",
+    "test:ui": "vitest --ui",
  }
}
```

### Instantáneas

Si desea que las instantáneas (snapshots) se generen al mismo nivel que los archivos de prueba en lugar de la carpeta `__snapshots__`. Adicione esta propiedad.

```diff
# 📄 Archivo: vitest.config.ts
-----------------------------------

export default defineConfig({
   test: {
     globals: true,
+    resolveSnapshotPath: (testPath, snapExtension) => testPath + snapExtension,
   },
})
```

### Cobertura

Para los reportes de cobertura, necesitaremos instalar `@vitest/coverage-v8`

```bash
npm install -D @vitest/coverage-v8
```

Actualiza los scripts con estos otros dos comandos:

```diff
# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "test:c":  "vitest run --coverage",
+    "test:cw": "vitest watch --coverage"
  }
}
```

Y adiciona la siguiente configuración de `@vitest/coverage-v8`.

```diff
# 📄 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    reporters: ['verbose'],
+    coverage: {
+     all: true,
+      reporter: ['text', 'html', 'lcov'],
+      include: ['**/src/**/*.{js,jsx,ts,tsx}'],
+      exclude: [
+        '**/src/main.{js,jsx,ts,tsx}',
+        '**/*.types.{ts,tsx}',
+        '**/*.test.{js,jsx,ts,tsx}',
+        '**/src/vite-env*',
+      ],
+      statements: 0,
+      branches: 0,
+      functions: 0,
+      lines: 0,
+    },
  },
})
```

### RTL (React Testing Library)

Ejecute este comando para instalar `RTL`.

```bash
npm install -D @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom
```

También se necesita instalar `jsdom` (o `happy-dom`)

```bash
npm install -D jsdom
```

Y adicionarlo como `environment`

```diff
# 📄 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    environment: 'jsdom',
   },
})
```

Con el `setupFiles` se pueden extender los `matchers` de `jest-dom` forma global sin la necesidad importarlas en cada archivo.

```diff
# 📄 Archivo: .vitest/setup.ts
-----------------------------------

+ /* Extend Matchers */
+ import '@testing-library/jest-dom'
```

```diff
# 📄 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
+   setupFiles: '.vitest/setup.ts',
  },
})
```

Si elegiste user `eslint` es buena idea adicionar estos linters de RTL con este comando:

```bash
npm install --D eslint-plugin-testing-library eslint-plugin-jest-dom
```

Y adicionar estas condiciones al archivo de configuración de `eslint`.

```diff
# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
        "prettier",
+       "plugin:testing-library/react",
+       "plugin:jest-dom/recommended"
    ],
    "plugins": [
        "react",
        "html",
+       "testing-library",
+       "jest-dom"
    ],
    "rules": {
+       "testing-library/await-async-query": "error",
+       "testing-library/no-await-sync-query": "error",
+       "testing-library/no-debugging-utils": "warn",
+       "testing-library/no-dom-import": "off",
+       "jest-dom/prefer-checked": "error",
+       "jest-dom/prefer-enabled-disabled": "error",
+       "jest-dom/prefer-required": "error",
+       "jest-dom/prefer-to-have-attribute": "error"
    },
}
```

Adicionar al `setupFiles` la configuración para que los matchers globales no colisionen con los de `jest-dom`.

```diff
# 📄 Archivo: .vitest/setup.ts
-----------------------------------

/* Extend Matchers */
import '@testing-library/jest-dom'
+ import '@testing-library/jest-dom/extend-expect'
```

### Mock Service Worker

Si también vas a usar [msw](https://mswjs.io/) para probar los HTTP requests necesitas correr este comando.

```bash
npm install -D msw cross-fetch
``` 

Y adicionar esta configuración global.

```diff
# 📄 Archivo: .vitest/setup.ts
-----------------------------------

+ /* Mock Service Worker */
+ import { afterAll, afterEach, beforeAll } from 'vitest'
+ import { fetch } from 'cross-fetch'
+ import { server } from './mocks/server'

+ // Add `fetch` polyfill.
+ global.fetch = fetch

+ // Establish API mocking before all tests
+ beforeAll(() => server.listen({ onUnhandledRequest: `error` }))

+ // Reset any request handlers that we may add during the tests,
+ // so they don't affect other tests
+ afterEach(() => server.resetHandlers())

+ // Clean up after the tests are finished
+ afterAll(() => server. Close())
```

### Depuración

Para una depuración visual de las pruebas.

- Extensión [Vitest - Test Explorer Adapter](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer)
 
---

## Depuración

- [clic-to-component](https://github.com/ericclemmons/click-to-component) ⭐

Esta no es una extensión. Se trata de un paquete de `npm` que se debe instalar en el proyecto y que ayuda en el proceso de depuración.

```bash
npm install -S click-to-react-component
```

Aun cuando `click-to-react-component` es adicionado como `dependencies`, al crear el `build` de producción el paquete va a ser removido con la ayuda de [tree-shaking](https://esbuild.github.io/api/#tree-shaking).

![beam me up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clcw1jzihrlwzx3dfq7t.gif)

Usando la tecla `alt` (u `option` en macOS) y con una combinación de identificadores y clicks sobre el componente en el navegador, nos vamos a poder **transportar** al código del componente en el editor.

![clic-to-component](https://github.com/ericclemmons/click-to-component/raw/main/.github/vite.gif)

Funciona con `vite` agregando estas configuraciones al proyecto:

```diff
# 📄 Archivo: /src/main.jsx
-----------------------------------

import React from "react"
import ReactDOM from "react-dom/client"
+import { ClickToComponent } from "click-to-react-component"

import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
)
```

> ⚠ Desafortunadamente, no es compatible con WSL

---

## Estilos

### PostCSS

- [PostCSS](https://postcss.org/)

Actualmente prefiero usar `PostCSS` que `Sass` porque es muchísimo más rápido y sigue más de cerca el estándar de CSS (presente o futuro) y no necesita renombrar las extensiones de los archivos. Así que, en un futuro, inclusive podrías remover `PostCSS` de tu proyecto y continuaría trabajando sin la necesidad de hacer una  migración.

```bash
npm install -D postcss-cli postcss
```

Para mi estos son los plugins esenciales:

```bash
npm install -D @csstools/postcss-nesting-experimental autoprefixer
```

> Instale `Autoprefixer` solamente si necesita darles soporte a navegadores antiguos. Hay muchos plugins `PostCSS`, traten de no instalar demasiados o algunos que hagan cosas demasiado raras que se alejen del estándar actual o propuesto de CSS.

Cree un archivo `postcss.config.cjs` en la raíz del proyecto:

```json
# 📄 Archivo: postcss.config.cjs
-----------------------------------

module.exports = {
    "plugins": {
        "@csstools/postcss-nesting-experimental": true,
        "autoprefixer": true
    }
}
```

> El orden de los plugin es importante porque se requiere que el `nesting` corra antes del `autoprefixer`

Si también estas usando Stylelint. Agrega este paquete: 

```bash
npm install --D postcss-syntax
```

Agrégalo como `customSyntax` en el archivo `.stylelintrc.json`

```diff
# 📄 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard"
  ],
+ "customSyntax": "postcss-syntax"
}
```

### Sass

- [Sass](https://sass-lang.com/)

- Extension [Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)

Si en vez de PostCSS quieres seguir usando Sass. Vite tiene soporte de `SCSS` incorporado, pero necesita que se instale este paquete:

```bash
npm install -D sass
```

> Tener cuidado de usar el paquete `sass` y no `node-sass` porque ya está obsoleto.

Si decidiste usar Stylelint. Reemplaza estos paquetes: 

```bash
npm remove stylelint-config-standard
npm install --D stylelint-config-standard-scss
```

Reemplázalos como `extends` en el archivo `.stylelintrc.json` 

```diff
# 📄 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss"
  ]
}
```

Luego renombra manualmente todos los archivos con extensión `.css` a `.scss` y actualiza `src/App.js` para que importe `src/App.scss`.

---

## Despliegue

Si va a publicar el proyecto en GitHub pages sin usar un dominio personalizado se deben cambiar algunas rutas.

```diff
# 📄 Archivo: vite.config.js
-----------------------------------

export default defineConfig({
  plugins: [react()],
+ base: "./",
+ build: {
+   outDir: './docs'
+ }
})
```

---

**That’s All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)

---

> Fuentes:
> - [Stylelint: Linter CSS](https://lenguajecss.com/css/calidad-de-codigo/stylelint/)