Es necesario que instales las siguientes herramientas, en este orden:
Home
Artículos
nvm install 22.9.0Dentro de Visual Studio Code, te recomendamos que crees un perfil vacío y lo asocies a tus nuevos proyectos Svelte (podés ver cómo se trabaja con perfiles en VSCode en este video. También te dejamos este tutorial muy piola - en inglés y la documentación oficial).
Opción 1: podés importar este archivo que trae todas las extensiones para Svelte
O si no, podés instalar las extensiones del Visual Studio Code manualmente. Para 2024 son los que ya instalaste para trabajar con HTML/CSS y los siguientes:
Typescript es el lenguaje de programación base en el que vamos a trabajar. Tranquilo, es muy similar a los lenguajes orientados a objetos en los que ya trabajaste. Para iniciarte o para hacer consultas te dejamos estos links:
npx sv create lala
┌ Welcome to the Svelte CLI! (v0.6.5)
│
◇ Which template would you like?
│ SvelteKit minimal
│
◇ Add type checking with Typescript?
│ Yes, using Typescript syntax
│
◆ Project created
│
◆ What would you like to add to your project? (use arrow keys / space bar)
│ ◼ prettier
│ ◼ eslint
│ ◼ vitest
│ ◼ playwright (browser testing - https://playwright.dev)
│ ◻ tailwindcss
│ ◻ drizzle
│ ◻ lucia
│ ◻ mdsvex
│ ◻ paraglide
│ ◻ storybook
└
◇ Which package manager do you want to install dependencies with?
│ yarn
│
◆ Successfully setup add-ons
│
◇ Installing dependencies with yarn...
Repasamos las opciones
Para levantar la aplicación Svelte ejecutás
npm run dev
Luego en un navegador pedís la siguiente url: http://localhost:5173.
Para ejecutar los tests de un proyecto, te posicionás en el directorio raíz y ejecutás desde la consola
npm test
Te recomendamos que dentro del proyecto crees una carpeta .vscode y dentro un archivo settings.json que tenga este contenido:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"editor.tabSize": 2
}
Dentro del archivo package.json del raíz de tu proyecto hay que agregar lint:fix (para poder corregir errores simples del linter) y test:ci (para que al ejecutar el build de Github Actions tengas la cobertura):
"scripts": {
"lint:fix": "eslint . && prettier --write .",
"test:unit": ...,
"test:ci": "npm run test:unit -- --run --coverage"
},
Ejecutá este comando para agregar las siguientes dependencias:
yarn add @testing-library/jest-dom @testing-library/svelte @testing-library/user-event @types/eslint @vitest/coverage-v8 jsdom
Tener un archivo .nvmrc es conveniente si todo el equipo trabaja con NVM (el versionador de Node). El contenido especifica qué versión de Node vamos a utilizar:
22.9.0
Agregamos estas líneas al archivo .gitognore:
vite.config.ts.timestamp-*
# ... empezamos acá ...
# Coverage
coverage
# VSCode
.history
En el archivo .prettierrc vamos a configurar el tabSize a 2 posiciones y comillas simples, además de eliminar punto y coma:
{
"useTabs": true,
"singleQuote": true,
// acá ubicamos estas dos líneas
"tabWidth": 2,
"semi": false,
Cada vez que grabamos un archivo se ejecuta automáticamente el proceso que corrige los errores de linter. Para activarlo manualmente debemos hacer
npm run lint:fix
El archivo vitest-setup.js tiene que incorporar el plugin de testing de Svelte. Te dejamos el archivo completo:
import { defineConfig } from 'vitest/config'
import { svelteTesting } from '@testing-library/svelte/vite'
import { sveltekit } from '@sveltejs/kit/vite'
export default defineConfig({
plugins: [sveltekit(), svelteTesting()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}'],
globals: true,
environment: 'jsdom',
setupFiles: ['./vitest-setup.js'],
coverage: {
include: ['src']
}
}
})
Te dejamos este archivo de ejemplo que tenés que guardar en .github/workflows/build.yml. Descargalo y reemplazá XXXXXXXXX por el nombre de la carpeta donde está tu proyecto.
Para agregar el badge del build de Github Actions, seguí estas instrucciones
Para agregar el badge del porcentaje de cobertura, tenés que agregar la imagen que genera el mismo build de Github Actions (reemplazando XXXXXXX por el nombre de la carpeta donde está tu proyecto):
