sv add eslint TypeScript and Prettier support
The eslint add-on is configured to work with TypeScript and Prettier if those packages are already being used in the project.
Svelte · CLI and AI tooling · all subjects
cli/overview
141 notes in this subject, read out of this brain and free to use. This is page 2 of 3.
sv check --tsconfig option
The --tsconfig <path> option passes a path to a tsconfig or jsconfig file. The path can be relative to the workspace path or absolute. When provided, only files matched by the files/include/exclude pattern of the config file are diagnosed, and errors from TypeScript and JavaScript files are reported. If not given, the tool traverses upwards from the project directory looking for the next jsconfig/tsconfig.json file.
sv check command overview
sv check finds errors and warnings in your project, including unused CSS, accessibility hints, and JavaScript/TypeScript compiler errors. It requires Node 16 or later and depends on the svelte-check package being installed as a dev dependency.
sv check installation
Install svelte-check as a dev dependency using npm i -D svelte-check
sv check basic usage
Run sv check using the command: npx sv check
sv check --workspace option
The --workspace <path> option specifies the path to your workspace. All subdirectories except node_modules and those listed in --ignore are checked.
sv check --output option
The --output <format> option controls how errors and warnings are displayed. Valid values are: human, human-verbose, machine, and machine-verbose.
sv check --watch option
The --watch option keeps the process alive and watches for changes to files in the project.
sv check --preserveWatchOutput option
The --preserveWatchOutput option prevents the screen from being cleared in watch mode.
sv check --no-tsconfig option
The --no-tsconfig option checks only Svelte files found in the current directory and below, ignoring any .js/.ts files which will not be type-checked.
sv check --ignore option
The --ignore <paths> option specifies files/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example: npx sv check --ignore "dist,build". When used with --no-tsconfig, it only affects watched files. When used with --tsconfig, it only affects watched files, not diagnosed files which are determined by the tsconfig.json.
sv check --fail-on-warnings option
The --fail-on-warnings option causes sv check to exit with an error code if warnings are found.
sv check --compiler-warnings option
The --compiler-warnings <warnings> option takes a quoted, comma-separated list of code:behaviour pairs where code is a compiler warning code and behaviour is either 'ignore' or 'error'. Example: npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"
sv check --diagnostic-sources option
The --diagnostic-sources <sources> option takes a quoted, comma-separated list of sources that should run diagnostics on code. By default all sources are active. Valid sources are: js (includes TypeScript), svelte, and css. Example: npx sv check --diagnostic-sources "js,svelte"
sv check --threshold option
The --threshold <level> option filters the diagnostics. Valid values are: warning (default, shows both errors and warnings) and error (shows only errors).
sv check machine-readable output format
Setting --output to 'machine' or 'machine-verbose' formats output for machine reading, such as in CI pipelines. Each row corresponds to a new record with columns separated by a single space. The first column contains a timestamp in milliseconds. The second column contains the row type (START, ERROR, WARNING, COMPLETED, or FAILURE), which determines the number and types of subsequent columns.
sv check machine output START record
The first row of machine-readable output is of type START and contains the workspace folder wrapped in quotes, preceded by a timestamp. Example: 1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
sv check machine output ERROR/WARNING records
In machine output format, ERROR and WARNING records have identical structure. They contain: timestamp, record type, filename (relative to workspace, quoted), starting line and column numbers separated by colon, and error message (quoted). Example: 1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
sv check machine-verbose output ERROR/WARNING records
In machine-verbose output format, each diagnostic is represented as an ndjson line prefixed by timestamp. The JSON contains: type (ERROR or WARNING), filename (relative to workspace), start object with line and character, end object with line and character, message, code, source (js/svelte/css), and a human-friendly description. Example: 1590680326283 {"type":"ERROR","fn":"codeaction.svelte","start":{"line":1,"character":16},"end":{"line":1,"character":23},"message":"Cannot find module 'blubb' or its corresponding type declarations.","code":2307,"source":"js"}
sv check machine output COMPLETED record
Machine-readable output concludes with a COMPLETED message that summarizes total numbers of files, errors, warnings, and files with problems. Example: 1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
sv check machine output FAILURE record
If the application experiences a runtime error, this error appears as a FAILURE record with timestamp and error message. Example: 1590680328921 FAILURE "Connection closed"
sv check does not support checking only specific files
There is no option to check only specific files because svelte-check needs to see the whole project for checks to be valid. For example, if you rename a component prop but don't update usage sites, those become errors that would be missed if checks only ran on changed files.
mdsvex purpose and features
mdsvex is a markdown preprocessor for Svelte components, comparable to MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.
mdsvex add-on installation result
Installing mdsvex with 'npx sv add mdsvex' installs and configures mdsvex in your svelte.config.js file.
mdsvex add-on installation command
The mdsvex add-on can be installed using the command: npx sv add mdsvex
sv add playwright installation
The command 'npx sv add playwright' installs Playwright browser testing into a Svelte project.
sv add playwright artifacts
Running 'npx sv add playwright' adds: scripts to package.json, a Playwright config file, an updated .gitignore file, and a demo test.
sv add paraglide languageTags option
The languageTags option specifies which languages to support, using IETF BCP 47 language tags. Usage example: 'npx sv add paraglide="languageTags:en,es"' to add paraglide with English and Spanish language support.
sv add paraglide command
Paraglide can be added to a SvelteKit project using the command 'npx sv add paraglide'. Paraglide is a compiler-based i18n library from Inlang that emits tree-shakable message functions with small bundle sizes, no async waterfalls, and full type-safety.
sv add paraglide what you get
Running 'npx sv add paraglide' adds the following to your project: Inlang project settings, paraglide Vite plugin, SvelteKit reroute and handle hooks, text-direction and lang attributes in app.html, updated .gitignore file, and an optional demo page showing how to use paraglide.
sv add paraglide demo option
The demo option controls whether to generate an optional demo page showing how to use paraglide. Usage example: 'npx sv add paraglide="demo:yes"' to include the demo page.
sv add experimental command usage
The command 'npx sv add experimental' enables Svelte and SvelteKit experimental features and allows opting your project into their next pre-release versions.
sv add experimental features option
The 'features' option controls which experimental flags to enable: async (await in components), remoteFunctions (remote functions), explicitEnvironmentVariables (explicit environment variables, SvelteKit ^2 only), handleRenderingErrors (rendering error boundaries), forkPreloads (forked preloading). Usage: npx sv add experimental="features:async,remoteFunctions"
sv add experimental versions option
The 'versions' option controls which packages to move to their next pre-release version. The 'kit' value moves @sveltejs/kit@next and also bumps your adapter and required peers. Usage: npx sv add experimental="versions:kit"
sv add experimental what you get
Using 'sv add experimental' provides: the selected experimental flags set in your config, and optionally @sveltejs/kit (and your adapter) moved to their next line.
sv add prettier artifacts
When you run 'sv add prettier', it adds scripts to your package.json, creates .prettierignore and .prettierrc files, and updates your eslint config if the eslint package is being used.
sv add prettier command
Use 'npx sv add prettier' to add Prettier, an opinionated code formatter, to your Svelte project.
Storybook add-on what you get
When adding Storybook via `sv add storybook`, the setup includes: running `npx storybook init` automatically from the `sv` CLI, Storybook configuration for either SvelteKit or Svelte & Vite with default config provided, easy mocking of many SvelteKit modules, and automatic link handling.
sv add storybook command
The command `npx sv add storybook` adds Storybook integration to a Svelte project. Storybook is a frontend component workshop.
sv add tailwindcss installs and configures Tailwind setup
Running `npx sv add tailwindcss` sets up Tailwind following the Tailwind for SvelteKit guide, includes the Tailwind Vite plugin, and updates layout files (`layout.css` and `+layout.svelte` for SvelteKit, or `app.css` and `App.svelte` for non-SvelteKit Vite apps).
sv add tailwindcss plugins option
The `plugins` option for `sv add tailwindcss` allows selecting which Tailwind plugin to use. Available options are: `typography` (installs `@tailwindcss/typography`) and `forms` (installs `@tailwindcss/forms`). Example usage: `npx sv add tailwindcss="plugins:typography"`.
sv add tailwindcss integrates with prettier
The `sv add tailwindcss` command integrates with `prettier` if that package is already installed in the project.
sv add tailwindcss command
To add Tailwind CSS to a project, run `npx sv add tailwindcss`.
sv add vitest usages option
The usages option for sv add vitest specifies which test types to use. Valid values are 'unit' for unit testing and 'component' for component testing. Multiple values can be specified as a comma-separated list. The command format is: npx sv add vitest="usages:unit,component"
Vitest is a Vite-native testing framework
Vitest is a testing framework that is native to Vite and is used for testing in Svelte projects.
sv add vitest command
The command to add Vitest testing framework to a Svelte project is: npx sv add vitest
sv add vitest installation results
Running sv add vitest installs relevant packages, adds scripts to package.json, sets up client/server-aware testing for Svelte in the Vite config file, and provides demo tests.
adapter option values
The adapter option for sveltekit-adapter supports the following values: auto (@sveltejs/adapter-auto - automatically chooses the proper adapter but is less configurable), node (@sveltejs/adapter-node - generates a standalone Node server), static (@sveltejs/adapter-static - allows SvelteKit as a static site generator), vercel (@sveltejs/adapter-vercel - deploy to Vercel), cloudflare (@sveltejs/adapter-cloudflare - deploy to Cloudflare), and netlify (@sveltejs/adapter-netlify - deploy to Netlify).
sv add sveltekit-adapter command
The command to add SvelteKit adapters to a project is: npx sv add sveltekit-adapter
sveltekit-adapter add-on installs adapter
When you run the sveltekit-adapter add-on, it installs the chosen SvelteKit adapter and configures it in your svelte.config.js file.
sv add sveltekit-adapter with node adapter
To use the Node adapter with sveltekit-adapter, run: npx sv add sveltekit-adapter="adapter:node"
sv add sveltekit-adapter with cloudflare Workers
To deploy to Cloudflare Workers using sveltekit-adapter, run: npx sv add sveltekit-adapter="adapter:cloudflare+cfTarget:workers"
cloudflare target option for sveltekit-adapter
The cloudflare target option allows you to choose between Cloudflare Workers and Cloudflare Pages deployment. This option is only available when using the cloudflare adapter.
createSetupTest function for testing add-ons
The sv/testing module provides createSetupTest factory function that takes vitest imports and returns a setupTest function. It creates real SvelteKit projects from templates, runs the add-on, and gives access to resulting files. Test configuration requires globalSetup: ['tests/setup/global.js'] in vitest.config.js and should call setupGlobal({ TEST_DIR }) in the global setup script.
Add-ons bundled with tsdown
Community add-ons are bundled with tsdown into a single file. Everything is bundled except 'sv', which is a peer dependency provided at runtime.
Add-on package.json requirements
An add-on's package.json must have 'sv' as a peer dependency and must have an empty 'dependencies' object. The exports field must point to the bundled entry point (tsdown outputs .mjs for ESM). Example: "exports": { ".": { "default": "./dist/index.mjs" } }. The peerDependencies should specify minimum 'sv' version like "sv": "^0.13.0". Include "sv-add" in keywords for discovery on npmx.dev.
Community add-ons are experimental
Community add-ons for the Svelte CLI are currently experimental. The API may change. They should not be used in production yet.
Create add-on with sv create --template addon
The easiest way to create an add-on is by using the command 'npx sv create --template addon [path]'. The newly created project will have README.md and CONTRIBUTING.md files to guide development.
defineAddon function parameters
The defineAddon function takes an object with the following properties: id (string for addon name), shortDescription (string describing what the addon does), options (created with defineAddonOptions), setup (function called during initialization with parameters: dependsOn, isKit, unsupported, addOption), run (function that executes the addon logic with parameters: isKit, cancel, sv, options, file, language, directory), and nextSteps (function that returns an array of strings for console guidance).
Add-on version compatibility warning
Add-ons should specify a minimum 'sv' version in peerDependencies. Users will get a compatibility warning if their 'sv' version has a different major version than specified in the add-on.