Skip to content

Commit 670cf48

Browse files
draft: add cli docs (#293)
* add cli docs * tweak sync script * only ingest types if specified — cli does not use them anywhere * update content * fix * sync * fix merge issue * sync * sync * reorder --------- Co-authored-by: Rich Harris <[email protected]>
1 parent 70dc159 commit 670cf48

File tree

11 files changed

+343
-14
lines changed

11 files changed

+343
-14
lines changed
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Overview
3+
---
4+
5+
The command line interface (CLI), `sv`, is a toolkit for creating and maintaining Svelte applications.
6+
7+
## Usage
8+
9+
The easiest way to run `sv` is with [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (or the equivalent command if you're using a different package manager — for example, `pnpx` if you're using [pnpm](https://pnpm.io/)):
10+
11+
```bash
12+
npx sv <command> <args>
13+
```
14+
15+
If you're inside a project where `sv` is already installed, this will use the local installation, otherwise it will download the latest version and run it without installing it, which is particularly useful for [`sv create`](sv-create).
16+
17+
## Acknowledgements
18+
19+
Thank you to [Christopher Brown](https://github.com/chbrown) who originally owned the `sv` name on npm for graciously allowing it to be used for the Svelte CLI. You can find the original `sv` package at [`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv).
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Introduction
3+
---
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: sv create
3+
---
4+
5+
`sv create` sets up a new SvelteKit project, with options to [setup additional functionality](sv-add#Official-add-ons).
6+
7+
## Usage
8+
9+
```bash
10+
npx sv create [options] [path]
11+
```
12+
13+
## Options
14+
15+
<!-- TODO this flag should probably just be '--types', and the options should be 'ts' or 'jsdoc' -->
16+
17+
### `--check-types <option>`
18+
19+
Whether and how to add typechecking to the project:
20+
21+
- `typescript` — default to `.ts` files and use `lang="ts"` for `.svelte` components
22+
- `checkjs` — use [JSDoc syntax](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) for types
23+
- `none` — no typechecking. Not recommended!
24+
25+
### `--template <name>`
26+
27+
Which project template to use:
28+
29+
- `minimal` — barebones scaffolding for your new app
30+
- `demo` — showcase app with a word guessing game that works without JavaScript
31+
- `library` — template for a Svelte library, set up with `svelte-package`
32+
33+
### `--no-integrations`
34+
35+
<!-- TODO should be renamed to `--no-addons` -->
36+
37+
Run the command without the interactive add-ons prompt
38+
39+
### `--no-install`
40+
41+
Skip dependency installation
42+
43+
<!-- ## Programmatic interface
44+
45+
```js
46+
// TODO: this gives type checking errors in the docs site when not commented out. Need to release sv, install it in the site, and uncomment this.
47+
// import { create } from 'sv';
48+
49+
// // todo: check if this is right
50+
// create(cwd, {
51+
// // add your options here
52+
// // todo: list available option
53+
// });
54+
```
55+
-->
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: sv add
3+
---
4+
5+
`sv add` updates an existing project with new functionality.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add
11+
```
12+
13+
```bash
14+
npx sv add [add-ons]
15+
```
16+
17+
You can select multiple space-separated add-ons from [the list below](#Official-add-ons), or you can use the interactive prompt.
18+
19+
## Options
20+
21+
- `-C`, `--cwd` — path to the root of your Svelte(Kit) project
22+
- `--no-preconditions` — skip checking preconditions <!-- TODO what does this mean? -->
23+
- `--no-install` — skip dependency installation
24+
25+
## Official add-ons
26+
27+
<!-- TODO this should be a separate section, each of these should have their own page -->
28+
29+
- `drizzle`
30+
- `eslint`
31+
- `lucia`
32+
- `mdsvex`
33+
- `paraglide`
34+
- `playwright`
35+
- `prettier`
36+
- `routify`
37+
- `storybook`
38+
- `tailwindcss`
39+
- `vitest`
Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: sv check
3+
---
4+
5+
`sv check` finds errors and warnings in your project, such as:
6+
7+
- unused CSS
8+
- accessibility hints
9+
- JavaScript/TypeScript compiler errors
10+
11+
Requires Node 16 or later.
12+
13+
## Installation
14+
15+
You will need to have the `svelte-check` package installed in your project:
16+
17+
```bash
18+
npm i -D svelte-check
19+
```
20+
21+
## Usage
22+
23+
```bash
24+
npx sv check
25+
```
26+
27+
## Options
28+
29+
### `--workspace <path>`
30+
31+
Path to your workspace. All subdirectories except `node_modules` and those listed in `--ignore` are checked.
32+
33+
### `--output <format>`
34+
35+
How to display errors and warnings. See [machine-readable output](#Machine-readable-output).
36+
37+
- `human`
38+
- `human-verbose`
39+
- `machine`
40+
- `machine-verbose`
41+
42+
### `--watch`
43+
44+
Keeps the process alive and watches for changes.
45+
46+
### `--preserveWatchOutput`
47+
48+
Prevents the screen from being cleared in watch mode.
49+
50+
### `--tsconfig <path>`
51+
52+
Pass a path to a `tsconfig` or `jsconfig` file. The path can be relative to the workspace path or absolute. Doing this means that only files matched by the `files`/`include`/`exclude` pattern of the config file are diagnosed. It also means that errors from TypeScript and JavaScript files are reported. If not given, will traverse upwards from the project directory looking for the next `jsconfig`/`tsconfig.json` file.
53+
54+
### `--no-tsconfig`
55+
56+
Use this if you only want to check the Svelte files found in the current directory and below and ignore any `.js`/`.ts` files (they will not be type-checked)
57+
58+
### `--ignore <paths>`
59+
60+
Files/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example:
61+
62+
```bash
63+
npx sv check --ignore "dist,build"
64+
```
65+
66+
<!-- TODO what the hell does this mean? is it possible to use --tsconfig AND --no-tsconfig? if so what would THAT mean? -->
67+
68+
Only has an effect when used in conjunction with `--no-tsconfig`. When used in conjunction with `--tsconfig`, this will only have effect on the files watched, not on the files that are diagnosed, which is then determined by the `tsconfig.json`.
69+
70+
### `--fail-on-warnings`
71+
72+
If provided, warnings will cause `sv check` to exit with an error code.
73+
74+
### `--compiler-warnings <warnings>`
75+
76+
A quoted, comma-separated list of `code:behaviour` pairs where `code` is a [compiler warning code](../svelte/compiler-warnings) and `behaviour` is either `ignore` or `error`:
77+
78+
```bash
79+
npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"
80+
```
81+
82+
### `--diagnostic-sources <sources>`
83+
84+
A quoted, comma-separated list of sources that should run diagnostics on your code. By default, all are active:
85+
86+
<!-- TODO would be nice to have a clearer definition of what these are -->
87+
- `js` (includes TypeScript)
88+
- `svelte`
89+
- `css`
90+
91+
Example:
92+
93+
```bash
94+
npx sv check --diagnostic-sources "js,svelte"
95+
```
96+
97+
### `--threshold <level>`
98+
99+
Filters the diagnostics:
100+
101+
- `warning` (default) — both errors and warnings are shown
102+
- `error` — only errors are shown
103+
104+
## Troubleshooting
105+
106+
[See the language-tools documentation](https://github.com/sveltejs/language-tools/blob/master/docs/README.md) for more information on preprocessor setup and other troubleshooting.
107+
108+
## Machine-readable output
109+
110+
Setting the `--output` to `machine` or `machine-verbose` will format output in a way that is easier to read
111+
by machines, e.g. inside CI pipelines, for code quality checks, etc.
112+
113+
Each row corresponds to a new record. Rows are made up of columns that are separated by a
114+
single space character. The first column of every row contains a timestamp in milliseconds
115+
which can be used for monitoring purposes. The second column gives us the "row type", based
116+
on which the number and types of subsequent columns may differ.
117+
118+
The first row is of type `START` and contains the workspace folder (wrapped in quotes). Example:
119+
120+
```
121+
1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
122+
```
123+
124+
Any number of `ERROR` or `WARNING` records may follow. Their structure is identical and depends on the output argoument.
125+
126+
If the argument is `machine` it will tell us the filename, the starting line and column numbers, and the error message. The filename is relative to the workspace directory. The filename and the message are both wrapped in quotes. Example:
127+
128+
```
129+
1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
130+
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`"
131+
```
132+
133+
If the argument is `machine-verbose` it will tell us the filename, the starting line and column numbers, the ending line and column numbers, the error message, the code of diagnostic, the human-friendly description of the code and the human-friendly source of the diagnostic (eg. svelte/typescript). The filename is relative to the workspace directory. Each diagnostic is represented as an [ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON) line prefixed by the timestamp of the log. Example:
134+
135+
```
136+
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"}
137+
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
138+
const prop`","code":"unused-export-let","source":"svelte"}
139+
```
140+
141+
The output concludes with a `COMPLETED` message that summarizes total numbers of files, errors and warnings that were encountered during the check. Example:
142+
143+
```
144+
1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS
145+
```
146+
147+
If the application experiences a runtime error, this error will appear as a `FAILURE` record. Example:
148+
149+
```
150+
1590680328921 FAILURE "Connection closed"
151+
```
152+
153+
## Credits
154+
155+
- Vue's [VTI](https://github.com/vuejs/vetur/tree/master/vti) which laid the foundation for `svelte-check`
156+
157+
## FAQ
158+
159+
### Why is there no option to only check specific files (for example only staged files)?
160+
161+
`svelte-check` needs to 'see' the whole project for checks to be valid. Suppose you renamed a component prop but didn't update any of the places where the prop is used — the usage sites are all errors now, but you would miss them if checks only ran on changed files.
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: sv migrate
3+
---
4+
5+
`sv migrate` migrates Svelte(Kit) codebases. It delegates to the [`svelte-migrate`](https://github.com/sveltejs/kit/blob/main/packages/migrate) package.
6+
7+
Some migrations may annotate your codebase with tasks for completion that you can find by searching for `@migration`.
8+
9+
## Usage
10+
11+
```bash
12+
npx sv migrate [migration]
13+
```
14+
15+
## Migrations
16+
17+
### `svelte-5`
18+
19+
Upgrades a Svelte 4 app to use Svelte 5, and updates individual components to use [runes](../svelte/what-are-runes) and other Svelte 5 syntax ([see migration guide](../svelte/v5-migration-guide)).
20+
21+
### `svelte-4`
22+
23+
Upgrades a Svelte 3 app to use Svelte 4 ([see migration guide](../svelte/v4-migration-guide)).
24+
25+
### `sveltekit-2`
26+
27+
Upgrades a SvelteKit 1 app to SvelteKit 2 ([see migration guide](../kit/migrating-to-sveltekit-2)).
28+
29+
### `package`
30+
31+
Upgrades a library using `@sveltejs/package` version 1 to version 2. See the [pull request](https://github.com/sveltejs/kit/pull/8922) for more details.
32+
33+
### `routes`
34+
35+
Upgrades a pre-release SvelteKit app to use the filesystem routing conventions in SvelteKit 1. See the [pull request](https://github.com/sveltejs/kit/discussions/5774) for more details.
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Commands
3+
---
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: CLI
3+
---

0 commit comments

Comments
 (0)