[go: up one dir, main page]

DEV Community

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

Posted on • Edited on

Vite: Configuración para React

#spanish #react #vscode #vite

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-v8



npm install -D @vitest/coverage-v8
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-v8.



# 📄 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’s All Folks!
Happy Coding 🖖

cerveza

Fuentes:

Top comments (0)

Read next

joanroucoux profile image

Building a Scalable URL Shortener with Node.js (Part 2/2)

Joan Roucoux -

aidanldev profile image

How to use... "use", the new React 19 hook

Aidan -

adityanp1 profile image

C debugger Not able to Print or take Input when in debugger mode is On

Panchal Aditya Nileshbhai -

javadibrahimli profile image

Possible to Do Panoramic Image Stitching in React Native?

Javad İbrahimli -