Skip to main content

SvelteKit example

SvelteKit is built on Svelte, a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It's a love letter to web development.

cd apps && npm create svelte@latest <project>

You will be prompted to choose between select templates, TypeScript, ESLint, Prettier, Playwright and Vitest among other options. moon supports and has guides for many of these tools.

We highly suggest reading our documentation on using Vite (and Vitest) with moon, using ESLint with moon and using Prettier with moon for a more holistic view.


Since SvelteKit is per-project, the associated moon tasks should be defined in each project's moon.yml file.


We suggest inheriting SvelteKit tasks from the official moon configuration preset.

# Inherit tasks from the `sveltekit` preset
tags: ['sveltekit']

ESLint integration

SvelteKit provides an option to setup ESLint along with your project, with moon you can use a global lint task. We encourage using the global lint task for consistency across all projects within the repository. With this approach, the eslint command itself will be ran and the svelte3 rules will still be used.

# Extends the top-level lint
- '--ext'
- '.ts,.svelte'

Be sure to enable the Svelte parser and plugin in a project local ESLint configuration file.

module.exports = {
plugins: ['svelte3'],
ignorePatterns: ['*.cjs'],
settings: {
'svelte3/typescript': () => require('typescript'),
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],

TypeScript integration

SvelteKit also has built-in support for TypeScript, but has similar caveats to the ESLint integration. TypeScript itself is a bit involved, so we suggest reading the official SvelteKit documentation before continuing.

At this point we'll assume that a tsconfig.json has been created in the application, and typechecking works. From here we suggest utilizing a global typecheck task for consistency across all projects within the repository. However, because Svelte isn't standard JavaScript, it requires the use of the svelte-check command for type-checking.


The moon configuration preset provides the check task below.

exclude: ['typecheck']

command: 'svelte-check --tsconfig ./tsconfig.json'
- 'typecheck-sync'
- '@group(svelte)'
- 'tsconfig.json'

In case Svelte doesn't automatically create a tsconfig.json, you can use the following:

"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true



We suggest against root-level configuration, as SvelteKit should be installed per-project, and the vite command expects the configuration to live relative to the project root.


When creating a new SvelteKit project, a svelte.config.js is created, and must exist in the project root. This allows each project to configure SvelteKit for their needs.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult
// for more information about preprocessors
preprocess: vitePreprocess(),

kit: {
adapter: adapter(),

export default config;