Es necesario que instales las siguientes herramientas, en este orden:
Home
Artículos
nvm install 22.9.0
npm install --global yarn
Dentro 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 2025 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
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",
"source.removeUnusedImports": "explicit",
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript"
],
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
}
}
El archivo tsconfig.json define cómo vamos a utilizar el intérprete de Typescript. Es conveniente agregar al final estas líneas:
"compilerOptions": {
...,
"module": "ES2015",
"lib": [
"ES2015"
],
"moduleResolution": ...
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": "eslint src",
"lint:fix": "eslint src --fix",
"test:unit": ...,
"test:ci": "npm run test:unit -- --run --coverage"
},
Cuando agregues los tests e2e podés definir estos scripts:
"scripts": {
"test:e2e": "playwright test --ui",
"test": "npm run test:e2e",
"test:ci": "npm run test:unit -- --run --coverage && playwright test"
}
Con eso vas a correr tanto los test escritos con Vitest como los de Playwright (los veremos más adelante).
Es conveniente hacer el siguiente cambio al archivo svelte.config.js:
...
const config = {
// agregamos `{ script: true } al preprocesador para tener acceso a los syntactic sugar de TS
preprocess: vitePreprocess({ script: true }),
//
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
Para agregar dependencias de los tests e2e:
yarn add @playwright/test
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 .gitignore:
vite.config.ts.timestamp-*
# ... empezamos acá ...
# Coverage
coverage
# VSCode
.history
# Playwright
test-results
Cada vez que grabamos un archivo se ejecuta automáticamente el proceso que analiza el código y diagnostica errores de sintaxis y oportunidades de mejora, proceso que se conoce como Linter. El archivo eslint.config.js debe tener el siguiente contenido:
// eslint.config.cjs
// import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginSvelte from 'eslint-plugin-svelte'
import js from '@eslint/js'
import svelteParser from 'svelte-eslint-parser'
import tsEslint from 'typescript-eslint'
import tsParser from '@typescript-eslint/parser'
import globals from 'globals'
export default [
js.configs.recommended,
...tsEslint.configs.strict,
...eslintPluginSvelte.configs['flat/recommended'],
{
languageOptions: {
globals: {
...globals.browser,
},
},
rules: {
quotes: [
'warn',
'single',
{ avoidEscape: true, allowTemplateLiterals: true },
],
semi: ['error', 'never'],
indent: ['warn', 2],
'no-extra-parens': 'warn',
'no-nested-ternary': 'error',
'linebreak-style': ['error', 'unix'],
'no-cond-assign': ['error', 'always'],
'no-console': 'error',
'@typescript-eslint/sort-type-constituents': 'error',
},
},
{
files: ['**/*.svelte'],
languageOptions: {
parser: svelteParser,
parserOptions: {
parser: tsParser,
},
},
rules: {
'svelte/no-target-blank': 'error',
'svelte/no-at-debug-tags': 'error',
'svelte/no-reactive-functions': 'error',
'svelte/no-reactive-literals': 'error',
'@/semi': ['error', 'never'],
'@/quotes': ['warn', 'single'],
'@/indent': ['warn', 2],
}
}
]
Indirectamente el plugin de Svelte para VSCode utiliza Prettier, un formateador de código. Agregamos entonces un archivo .prettierrc con el siguiente contenido:
{
"useTabs": false,
"singleQuote": true,
"tabWidth": 2,
"semi": false,
"trailingComma": "none",
"printWidth": 100,
"plugins": [
"prettier-plugin-svelte"
],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
Si queremos ejecutar el proceso que corrige los errores del linter podemos hacerlo desde la línea de comando:
yarn run lint:fix
Si al ejecutar este comando o yarn run lint te aparece este mensaje de error
TypeError: Error while loading rule '@typescript-eslint/no-unused-expressions': Cannot read properties of undefined (reading 'allowShortCircuit')
la solución es desinstalar e instalar la versión 8.15.0 ó superior de typescript-eslint:
yarn remove typescript-eslint
yarn add typescript-eslint
El archivo vite.config.ts 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. Después veremos cómo agregar para que ejecuten los tests e2e.
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):
Para levantar la aplicación Svelte ejecutás
yarn 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
yarn test