DEV Community

Cover image for Vite: Configuraci贸n para React
Camilo Martinez for equimancho

Posted on • Updated on

Vite: Configuraci贸n para React

Idiomas: [馃嚭馃嚫] English - [馃嚜馃嚫] Espa帽ol


Vite es de lejos la mejor alternativa para crear proyectos de React hoy en d铆a.

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
Enter fullscreen mode Exit fullscreen mode

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.

# 馃搫 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,
}
Enter fullscreen mode Exit fullscreen mode

Existen muchas extensiones y configuraciones para VSCode por ah铆. Si necesitas un toque extra, les recomiendo darle una mirada a VSCode - Essentials y VSCode - React Flavored.

Depuraci贸n

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

# 馃搫 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}"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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.

# 馃搫 Archivo: package.json
-----------------------------------

{
  "scripts": {
-   "dev": "vite",
+   "dev": "vite --port 3000",
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

# 馃搫 File: /.vscode/extentions.json
-----------------------------------

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "stylelint.vscode-stylelint",
        "ZixuanChen.vitest-explorer"
    ]
}
Enter fullscreen mode Exit fullscreen mode

Linter

# 馃搫 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
+    }
}
Enter fullscreen mode Exit fullscreen mode

Instale este paquete en la carpeta del proyecto:

npm install -D eslint
npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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铆:

# 馃搫 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"
+     }
+   }
}
Enter fullscreen mode Exit fullscreen mode

Si estas usando TypeScript tambi茅n debes adicionar esta configuraci贸n:

# 馃搫 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",
  },
}
Enter fullscreen mode Exit fullscreen mode

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

# 馃搫 Archivo: .eslintignore
-----------------------------------

build
coverage
dist
Enter fullscreen mode Exit fullscreen mode

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:

# 馃搫 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

# 馃搫 Archivo: .eslintrc.json
-----------------------------------

{
    "extends": [
      "plugin:react/recommended",
      "standard-with-typescript",
+     "plugin:react/jsx-runtime",    
    ],
}
Enter fullscreen mode Exit fullscreen mode

Lineas en Blanco

Si quiere preservar l铆neas en blanco despu茅s de las definiciones.

# 馃搫 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"
+               ]
+           }
+       ]
    },
}
Enter fullscreen mode Exit fullscreen mode

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.

# 馃搫 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
+           }
+       ]
    },
}
Enter fullscreen mode Exit fullscreen mode

聽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.

# 馃搫 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"
+        ],
+    }
}
Enter fullscreen mode Exit fullscreen mode

Instalar Prettier:

npm install -D prettier 
Enter fullscreen mode Exit fullscreen mode

Y ESLint (JS) para prettier:

npm install -D eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

O TSLint (TS) para prettier:

npm install -D tslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

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

# 馃搫 Archivo: .prettierignore
-----------------------------------

build
coverage
dist
package-lock.json
Enter fullscreen mode Exit fullscreen mode

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

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

# 馃搫 Archivo: .prettierrc.json
-----------------------------------

{
    "semi": false,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Adicione la siguiente configuraci贸n al final de extends:

# 馃搫 Archivo: .eslintrc.json
---

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

Si no quieres usar la extensi贸n de Prettier, adicione los comandos check (chequear) y write (escribir) al final de la lista de scripts:

# 馃搫 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write"
  }
}
Enter fullscreen mode Exit fullscreen mode

HTML Linter

npm install -D htmlhint
Enter fullscreen mode Exit fullscreen mode

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

npm install -D eslint-plugin-html
Enter fullscreen mode Exit fullscreen mode

Adicione html a la lista de plugins

# 馃搫 Archivo: .eslintrc.json
-----------------------------------

{
    "plugins": [
        "react",
+       "html"
    ],
}
Enter fullscreen mode Exit fullscreen mode

CSS Linter

Instale y configure en el proyecto:

npm install -D stylelint stylelint-config-standard stylelint-config-idiomatic-order
Enter fullscreen mode Exit fullscreen mode

Cree un archivo de configuraci贸n llamado .stylelintrc.json en la ra铆z del proyecto.

# 馃搫 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" 
  ] 
}
Enter fullscreen mode Exit fullscreen mode

Si planea usar styled components tambi茅n instale

npm install -D stylelint-config-styled-components
Enter fullscreen mode Exit fullscreen mode
# 馃搫 File: .stylelintrc.json
-----------------------------------

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

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

# 馃搫 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"
+        ],
+    }
}
Enter fullscreen mode Exit fullscreen mode

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:

git init
Enter fullscreen mode Exit fullscreen mode

Usa 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:

npx mrm@3 lint-staged
Enter fullscreen mode Exit fullscreen mode

Pruebas

Usaremos Vitest que es compatible con el API de Jest, as铆 que no toca reaprender demasiado sobre la sintaxis.

npm install -D vitest
Enter fullscreen mode Exit fullscreen mode

Con la configuraci贸n global no vas a necesitar importar las dependencias en cada archivo, adicionando autom谩ticamente soporte a Jest.

# 馃搫 Archivo: vitest.config.ts
-----------------------------------

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

export default defineConfig({
+  test: {
+    globals: true,
+  },
})
Enter fullscreen mode Exit fullscreen mode

Si estas usando typescript, tambi茅n adiciona esta configuraci贸n.

# 馃搫 Archivo: tsconfig.json
-----------------------------------

{ 
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  }
}
Enter fullscreen mode Exit fullscreen mode

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

# 馃搫 Archivos: *.test.js
-----------------------------------

import { it, expect, describe } from "vitest";
Enter fullscreen mode Exit fullscreen mode

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

# 馃搫 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "test":    "vitest --run --reporter verbose",
+    "test:w":  "vitest",
+    "test:ui": "vitest --ui",
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

# 馃搫 Archivo: vitest.config.ts
-----------------------------------

export default defineConfig({
   test: {
     globals: true,
+    resolveSnapshotPath: (testPath, snapExtension) => testPath + snapExtension,
   },
})
Enter fullscreen mode Exit fullscreen mode

Cobertura

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

npm install -D @vitest/coverage-c8
Enter fullscreen mode Exit fullscreen mode

Actualiza los scripts con estos otros dos comandos:

# 馃搫 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "test:c":  "vitest run --coverage",
+    "test:cw": "vitest watch --coverage"
  }
}
Enter fullscreen mode Exit fullscreen mode

Y adiciona la siguiente configuraci贸n de @vitest/coverage-c8.

# 馃搫 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,
+    },
  },
})
Enter fullscreen mode Exit fullscreen mode

RTL (React Testing Library)

Ejecute este comando para instalar RTL.

npm install -D @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode

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

npm install -D jsdom
Enter fullscreen mode Exit fullscreen mode

Y adicionarlo como environment

# 馃搫 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    environment: 'jsdom',
   },
})
Enter fullscreen mode Exit fullscreen mode

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

# 馃搫 Archivo: .vitest/setup.ts
-----------------------------------

+ /* Extend Matchers */
+ import '@testing-library/jest-dom'
Enter fullscreen mode Exit fullscreen mode
# 馃搫 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

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

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

npm install --D eslint-plugin-testing-library eslint-plugin-jest-dom
Enter fullscreen mode Exit fullscreen mode

Y adicionar estas condiciones al archivo de configuraci贸n de eslint.

# 馃搫 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"
    },
}
Enter fullscreen mode Exit fullscreen mode

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

# 馃搫 Archivo: .vitest/setup.ts
-----------------------------------

/* Extend Matchers */
import '@testing-library/jest-dom'
+ import '@testing-library/jest-dom/extend-expect'
Enter fullscreen mode Exit fullscreen mode

Mock Service Worker

Si tambi茅n vas a usar msw para probar los HTTP requests necesitas correr este comando.

npm install -D msw cross-fetch
Enter fullscreen mode Exit fullscreen mode

Y adicionar esta configuraci贸n global.

# 馃搫 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())
Enter fullscreen mode Exit fullscreen mode

Depuraci贸n

Para una depuraci贸n visual de las pruebas.


Depuraci贸n

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.

npm install -S click-to-react-component
Enter fullscreen mode Exit fullscreen mode

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.

beam me up

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

Funciona con vite agregando estas configuraciones al proyecto:

# 馃搫 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>
)
Enter fullscreen mode Exit fullscreen mode

鈿 Desafortunadamente, no es compatible con WSL


Estilos

PostCSS

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.

npm install -D postcss-cli postcss
Enter fullscreen mode Exit fullscreen mode

Para mi estos son los plugins esenciales:

npm install -D @csstools/postcss-nesting-experimental autoprefixer
Enter fullscreen mode Exit fullscreen mode

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:

# 馃搫 Archivo: postcss.config.cjs
-----------------------------------

module.exports = {
    "plugins": {
        "@csstools/postcss-nesting-experimental": true,
        "autoprefixer": true
    }
}
Enter fullscreen mode Exit fullscreen mode

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:

npm install --D postcss-syntax
Enter fullscreen mode Exit fullscreen mode

Agr茅galo como customSyntax en el archivo .stylelintrc.json

# 馃搫 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard"
  ],
+ "customSyntax": "postcss-syntax"
}
Enter fullscreen mode Exit fullscreen mode

Sass

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

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

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

Si decidiste usar Stylelint. Reemplaza estos paquetes:

npm remove stylelint-config-standard
npm install --D stylelint-config-standard-scss
Enter fullscreen mode Exit fullscreen mode

Reempl谩zalos como extends en el archivo .stylelintrc.json

# 馃搫 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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.

# 馃搫 Archivo: vite.config.js
-----------------------------------

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

That鈥檚 All Folks!
Happy Coding 馃枛

cerveza


Fuentes:

Top comments (0)