This is the developer documentation for the Svelte CLI.
# Overview
コマンドラインインターフェイス(CLI)である`sv`は、Svelteアプリケーションの作成と管理のためのツールキットです。
## 使用方法
`sv`を実行する最も簡単な方法は、[`npx`](https://docs.npmjs.com/cli/v8/commands/npx)(または他のパッケージマネージャを使用している場合は同等のコマンド - 例えば、[pnpm](https://pnpm.io/)を使用している場合は`pnpx`)を使うことです:
```sh
npx sv
```
既に`sv`がインストールされているプロジェクトの内部にいる場合は、ローカルインストールを使用します。それ以外の場合は最新バージョンをダウンロードしてインストール無しで実行します。これは特に[`sv create`](sv-create)に便利です。
## 謝辞
npmで元々`sv`という名前を所有していた[Christopher Brown](https://github.com/chbrown)に感謝いたします。彼のおかげで、この名前がSvelte CLIのために使えるようになりました。元の`sv`パッケージは[`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv)で見つけることができます。
# Frequently asked questions
## How do I run the `sv` CLI?
Running `sv` looks slightly different for each package manager. Here is a list of the most common commands:
- **npm** : `npx sv create`
- **pnpm** : `pnpx sv create` or `pnpm dlx sv create`
- **Bun** : `bunx sv create`
- **Deno** : `deno run npm:sv create`
- **Yarn** : `yarn dlx sv create`
## `npx sv` is not working
Some package managers prefer to run locally installed tools instead of downloading and executing packages from the registry. This issue mostly occurs with `npm` and `yarn`. This usually results in an error message or looks like the command you were trying to execute did not do anything.
Here is a list of issues with possible solutions that users have encountered in the past:
- [`npx sv` create does nothing](https://github.com/sveltejs/cli/issues/472)
- [`sv` command name collides with `runit`](https://github.com/sveltejs/cli/issues/259)
- [`sv` in windows powershell conflicts with `Set-Variable`](https://github.com/sveltejs/cli/issues/317)
# sv create
`sv create`は、[追加機能の設定](sv-add#Official-add-ons)オプションを含む新しいSvelteKitプロジェクトをセットアップします。
## 使用方法
```sh
npx sv create [options] [path]
```
## オプション
### `--from-playground `
Create a SvelteKit project from a [playground](/playground) URL. This downloads all playground files, detects external dependencies, and sets up a complete SvelteKit project structure with everything ready to go.
Example:
```sh
npx sv create --from-playground="https://svelte.dev/playground/hello-world"
```
### `--template `
使用するプロジェクトテンプレート:
- `minimal` — 新しいアプリのための最小限のスキャフォールディング
- `demo` — JavaScript無しで動作するワードパズルゲームを備えたデモアプリ
- `library` — Svelteライブラリのためのテンプレートで、`svelte-package`でセットアップされています
### `--types `
プロジェクトに型チェックを追加するかどうか、またその方法:
- `ts` — `.ts`ファイルをデフォルトとし、`.svelte`コンポーネントに対して`lang="ts"`を使用
- `jsdoc` — [JSDoc構文](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html)を使用して型を記述
### `--no-types`
型チェックの追加を防ぎます。推奨されません!
### `--no-add-ons`
対話型のアドオンプロンプト無しでコマンドを実行
### `--install `
パッケージマネージャーを指定して依存関係(dependencies) のインストールを行います:
- `npm`
- `pnpm`
- `yarn`
- `bun`
- `deno`
### `--no-install`
依存関係のインストールを行いません。
# sv add
`sv add`は、既存のプロジェクトに新しい機能を追加するコマンドです。
## 使用方法
```sh
npx sv add
```
```sh
npx sv add [add-ons]
```
スペースで区切った複数のアドオンを[以下のリスト](#Official-add-ons)から選択するか、対話型プロンプトを使用することができます。
## オプション
- `-C`, `--cwd` — Svelte(Kit)プロジェクトのルートへのパス
- `--no-preconditions` — たとえダーティーなファイルがあったとしてもプロンプトを出さない
- `--install` — パッケージマネージャーを指定して依存関係(dependencies) のインストールを行う
- `--no-install` — 依存関係のインストールを行わない
## 公式アドオン
- [`devtools-json`](devtools-json)
- [`drizzle`](drizzle)
- [`eslint`](eslint)
- [`lucia`](lucia)
- [`mdsvex`](mdsvex)
- [`paraglide`](paraglide)
- [`playwright`](playwright)
- [`prettier`](prettier)
- [`storybook`](storybook)
- [`sveltekit-adapter`](sveltekit-adapter)
- [`tailwindcss`](tailwind)
- [`vitest`](vitest)
# sv check
`sv check`は、プロジェクト内の次のようなエラーや警告を見つけます:
- 未使用のCSS
- アクセシビリティのヒント
- JavaScript/TypeScriptコンパイラエラー
Node 16以降が必要です。
## インストール
プロジェクトに`svelte-check`パッケージをインストールする必要があります:
```sh
npm i -D svelte-check
```
## 使用方法
```sh
npx sv check
```
## オプション
### `--workspace `
ワークスペースへのパス。`node_modules`と`--ignore`で指定したディレクトリ以外のすべてのサブディレクトリがチェックされます。
### `--output `
エラーや警告の表示方法。詳細は[機械可読出力](#Machine-readable-output)を参照してください。
- `human`
- `human-verbose`
- `machine`
- `machine-verbose`
### `--watch`
プロセスを生存させ、変更を監視します。
### `--preserveWatchOutput`
ウォッチモードで画面がクリアされるのを防ぎます。
### `--tsconfig `
`tsconfig`または`jsconfig`ファイルへのパスを指定します。パスはワークスペースパスからの相対パスまたは絶対パスにすることができます。これを行うことで、設定ファイルの`files`/`include`/`exclude`パターンに一致したファイルのみに診断が適用されます。また、TypeScript および JavaScript ファイルからのエラーが報告されます。指定されていない場合は、プロジェクトディレクトリから上方に`jsconfig`/`tsconfig.json`ファイルを探します。
### `--no-tsconfig`
現在のディレクトリとその下にあるSvelteファイルのみをチェックし、`.js`/`.ts`ファイルを無視したい場合に使用します(型チェックされません)。
### `--ignore `
ワークスペースのルートから相対的に無視するファイルやフォルダ。パスはカンマで区切り、引用符で囲む必要があります。例:
```sh
npx sv check --ignore "dist,build"
```
`--no-tsconfig`と併用した場合にのみ効果があります。`--tsconfig`と併用した場合、診断されるファイルではなくウォッチされたファイルにのみ影響します。その診断は`tsconfig.json`によって決定されます。
### `--fail-on-warnings`
指定された場合、警告があると`sv check`はエラーコードで終了します。
### `--compiler-warnings `
`code`が[コンパイラ警告コード](../svelte/compiler-warnings)で、`behaviour`が`ignore`または`error`である`code:behaviour`ペアのリスト。例:
```sh
npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"
```
### `--diagnostic-sources `
コード診断を実行するソースのリストをカンマで区切って引用符で囲みます。デフォルトではすべてアクティブです:
- `js` (TypeScriptを含む)
- `svelte`
- `css`
例:
```sh
npx sv check --diagnostic-sources "js,svelte"
```
### `--threshold `
診断をフィルタリングします:
- `warning` (デフォルト) — エラーと警告の両方が表示されます
- `error` — エラーのみが表示されます
## トラブルシューティング
プリプロセッサのセットアップやその他のトラブルシューティングについては、[言語ツールのドキュメント](https://github.com/sveltejs/language-tools/blob/master/docs/README.md)を参照してください。
## マシンリーダブル向け出力
`--output`を`machine`または`machine-verbose`に設定すると、CIパイプライン内やコード品質チェックなどで機械によって読みやすい形式で出力がフォーマットされます。
各行は新しいレコードに対応しています。行は一つのスペース文字で区切られた列で構成されます。各行の最初の列はミリ秒のタイムスタンプを含み、モニタリング目的で使用できます。第二列は"行タイプ"を示し、それに基づいて後続の列の数とタイプが異なる場合があります。
最初の行は`START`タイプで、ワークスペースフォルダを含みます(引用符で囲まれています)。例:
```
1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
```
`ERROR`または`WARNING`レコードが続く場合があります。それらの構造は出力の引数によって異なります。
引数が`machine`の場合、ファイル名、開始行および列番号、エラーメッセージが示されます。ファイル名はワークスペースディレクトリ相対です。ファイル名とメッセージはどちらも引用符で囲まれています。例:
```
1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"
```
引数が`machine-verbose`の場合、ファイル名、開始行と列番号、終了行と列番号、エラーメッセージ、診断コード、コードの人間が読みやすい説明、診断の人間が読みやすいソース(例:svelte/typescript)が示されます。ファイル名はワークスペースディレクトリ相対です。各診断はタイムスタンプでプレフィックスされた[ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON)行として表されます。例:
```
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"}
1590680326778 {"type":"WARNING","filename":"imported-file.svelte","start":{"line":0,"character":37},"end":{"line":0,"character":51},"message":"Component has unused export property 'prop'. If it is for external reference only, please consider using `export
const prop`","code":"unused-export-let","source":"svelte"}
```
出力は、チェック中に遭遇したファイル、エラー、および警告の合計数を要約する`COMPLETED`メッセージで終了します。例:
```
1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
```
ランタイムエラーが発生した場合、このエラーは`FAILURE`レコードとして表示されます。例:
```
1590680328921 FAILURE "Connection closed"
```
## クレジット
- `svelte-check`の基礎を築いたVueの[VTI](https://github.com/vuejs/vetur/tree/master/vti)
## よくある質問 (FAQ)
### なぜ特定のファイル(たとえばステージングされたファイルのみ)をチェックするオプションがないのですか?
`svelte-check`は、チェックが有効になるためにプロジェクト全体を「見る」必要があります。例えば、コンポーネントプロパティの名前を変更しましたが、そのプロパティが使用されている場所の更新を忘れた場合、使用サイトはすべてエラーになりますが、変更されたファイルのみをチェックするとこれらを見逃すことになります。
# sv migrate
`sv migrate`は、Svelte(Kit)のコードベースを移行します。このコマンドは[`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate)パッケージに委譲されています。
一部のマイグレーションでは、完了するべきタスクをコードベースに注釈として付け加えることがあります。`@migration`で検索することでそれらを見つけることができます。
## 使用方法
```sh
npx sv migrate
```
You can also specify a migration directly via the CLI:
```sh
npx sv migrate [migration]
```
## マイグレーション
### `app-state`
`.svelte`ファイル内で使用されている`$app/stores`を`$app/state`に移行します。詳細は[マイグレーションガイド](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated)を参照してください。
### `svelte-5`
Svelte 4アプリをSvelte 5にアップグレードし、個々のコンポーネントを[runes](../svelte/what-are-runes)やその他のSvelte 5の構文に更新します([マイグレーションガイドを参照](../svelte/v5-migration-guide))。
### `self-closing-tags`
`.svelte`ファイル内のすべての自己終了要素以外の要素を置換します。詳細は[プルリクエスト](https://github.com/sveltejs/kit/pull/12128)を参照してください。
### `svelte-4`
Svelte 3アプリをSvelte 4にアップグレードします([マイグレーションガイドを参照](../svelte/v4-migration-guide))。
### `sveltekit-2`
SvelteKit 1アプリをSvelteKit 2にアップグレードします([マイグレーションガイドを参照](../kit/migrating-to-sveltekit-2))。
### `package`
`@sveltejs/package`バージョン1を使用しているライブラリをバージョン2にアップグレードします。詳細は[プルリクエスト](https://github.com/sveltejs/kit/pull/8922)を参照してください。
### `routes`
プレリリースのSvelteKitアプリをSvelteKit 1のファイルシステムルーティング規則を使用するようにアップグレードします。詳細は[プルリクエスト](https://github.com/sveltejs/kit/discussions/5774)を参照してください。
# devtools-json
The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.
> [!NOTE]
> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.
## Alternatives
If you'd prefer not to install the plugin, but still want to avoid seeing a message about the missing file, you have a couple of options.
Firstly, you can prevent the request from being issued on your machine by disabling the feature in your browser. You can do this in Chrome by visiting `chrome://flags` and disabling the "DevTools Project Settings". You may also be interested in disabling "DevTools Automatic Workspace Folders" since it’s closely related.
You can also prevent the web server from issuing a notice regarding the incoming request for all developers of your application by handling the request yourself. For example, you can create a file named `.well-known/appspecific/com.chrome.devtools.json` with the contents `"Go away, Chrome DevTools!"` or you can add logic to respond to the request in your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:
```js
/// file: src/hooks.server.js
import { dev } from '$app/environment';
export function handle({ event, resolve }) {
if (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
return new Response(undefined, { status: 404 });
}
return resolve(event);
}
```
## Usage
```sh
npx sv add devtools-json
```
## What you get
- `vite-plugin-devtools-json` added to your Vite plugin options
# drizzle
[Drizzle ORM](https://orm.drizzle.team/) is a TypeScript ORM offering both relational and SQL-like query APIs, and which is serverless-ready by design.
## Usage
```sh
npx sv add drizzle
```
## What you get
- a setup that keeps your database access in SvelteKit's server files
- an `.env` file to store your credentials
- compatibility with the Lucia auth add-on
- an optional Docker configuration to help with running a local database
## Options
### database
Which database variant to use:
- `postgresql` — the most popular open source database
- `mysql` — another popular open source database
- `sqlite` — file-based database not requiring a database server
```sh
npx sv add drizzle=database:postgresql
```
### client
The SQL client to use, depends on `database`:
- For `postgresql`: `postgres.js`, `neon`,
- For `mysql`: `mysql2`, `planetscale`
- For `sqlite`: `better-sqlite3`, `libsql`, `turso`
```sh
npx sv add drizzle=database:postgresql+client:postgres.js
```
Drizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).
### docker
Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`
```sh
npx sv add drizzle=database:postgresql+client:postgres.js+docker:yes
```
# eslint
[ESLint](https://eslint.org/) finds and fixes problems in your code.
## Usage
```sh
npx sv add eslint
```
## What you get
- the relevant packages installed including `eslint-plugin-svelte`
- an `eslint.config.js` file
- updated `.vscode/settings.json`
- configured to work with TypeScript and `prettier` if you're using those packages
# lucia
An auth setup following [the Lucia auth guide](https://lucia-auth.com/).
## Usage
```sh
npx sv add lucia
```
## What you get
- an auth setup for SvelteKit and Drizzle following the best practices from the Lucia auth guide
- optional demo registration and login pages
## Options
### demo
Whether to include demo registration and login pages.
```sh
npx sv add lucia=demo:yes
```
# mdsvex
[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte components - basically MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.
## Usage
```sh
npx sv add mdsvex
```
## What you get
- mdsvex installed and configured in your `svelte.config.js`
# paraglide
[Paraglide from Inlang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) is a compiler-based i18n library that emits tree-shakable message functions with small bundle sizes, no async waterfalls, full type-safety, and more.
## Usage
```sh
npx sv add paraglide
```
## What you get
- Inlang project settings
- paraglide Vite plugin
- SvelteKit `reroute` and `handle` hooks
- `text-direction` and `lang` attributes in `app.html`
- updated `.gitignore`
- an optional demo page showing how to use paraglide
## Options
### languageTags
The languages you'd like to support specified as IETF BCP 47 language tags.
```sh
npx sv add paraglide="languageTags:en,es"
```
### demo
Whether to generate an optional demo page showing how to use paraglide.
```sh
npx sv add paraglide="demo:yes"
```
# playwright
[Playwright](https://playwright.dev) browser testing.
## Usage
```sh
npx sv add playwright
```
## What you get
- scripts added in your `package.json`
- a Playwright config file
- an updated `.gitignore`
- a demo test
# prettier
[Prettier](https://prettier.io) is an opinionated code formatter.
## Usage
```sh
npx sv add prettier
```
## What you get
- scripts in your `package.json`
- `.prettierignore` and `.prettierrc` files
- updates to your eslint config if you're using that package
# storybook
[Storybook](https://storybook.js.org/) is a frontend component workshop.
## Usage
```sh
npx sv add storybook
```
## What you get
- `npx storybook init` run for you from the same convenient `sv` CLI used for all other add-ons
- [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) with default config provided, easy mocking of many SvelteKit modules, automatic link handling, and more.
# sveltekit-adapter
[SvelteKit adapters](/docs/kit/adapters) allow you to deploy your site to numerous platforms. This add-on allows you to configure officially provided SvelteKit adapters, but a number of [community-provided adapters](https://www.sveltesociety.dev/packages?category=sveltekit-adapters) are also available.
## Usage
```sh
npx sv add sveltekit-adapter
```
## What you get
- the chosen SvelteKit adapter installed and configured in your `svelte.config.js`
## Options
### adapter
Which SvelteKit adapter to use:
- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) automatically chooses the proper adapter to use, but is less configurable
- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) generates a standalone Node server
- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) allows you to use SvelteKit as a static site generator (SSG)
- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) allows you to deploy to Vercel
- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) allows you to deploy to Cloudflare
- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify
```sh
npx sv add sveltekit-adapter=adapter:node
```
# tailwindcss
[Tailwind CSS](https://tailwindcss.com/) allows you to rapidly build modern websites without ever leaving your HTML.
## Usage
```sh
npx sv add tailwindcss
```
## What you get
- Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)
- Tailwind Vite plugin
- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)
- integration with `prettier` if using that package
## Options
### plugins
Which plugin to use:
- `typography` — [`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)
- `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)
```sh
npx sv add tailwindcss="plugins:typography"
```
# vitest
[Vitest](https://vitest.dev/) is a Vite-native testing framework.
## Usage
```sh
npx sv add vitest
```
## What you get
- the relevant packages installed and scripts added to your `package.json`
- client/server-aware testing setup for Svelte in your Vite config file
- demo tests