This is the developer documentation for the Svelte CLI. # Aperçu L'interface de ligne de commande (CLI), `sv`, est un outil pour créer et maintenir des applications Svelte. ## Usage La façon la plus simple d'exécuter `sv` est via [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (ou la commande équivalente si vous utilisez un autre gestionnaire de paquets — par exemple, `pnpx` si vous utilisez [pnpm](https://pnpm.io/)) : ```bash npx sv ``` Si vous êtes au sein d'un projet où `sv` est déjà installé, ceci utilisera l'installation locale. Sinon, la version la plus récente de `sv` sera téléchargée et exécutée sans qu'elle soit formellement installée, ce qui est particulièrement utile pour [`sv create`](sv-create). ## Remerciements Merci à [Christopher Brown](https://github.com/chbrown) qui possédait initiallement le nom `sv` sur npm pour nous avoir permis de nous en servir pour le CLI de Svelte. Vous pouvez retrouver le paquet `sv` originel sur [`@chbrown/sv`](https://www.npmjs.com/package/@chbrown/sv). # sv create `sv create` met en place un nouveau projet SvelteKit, avec la possibilité de [rajouter des fonctionnalités additionnelles](sv-add#Official-add-ons). ## Usage ```bash npx sv create [options] [path] ``` ## Options ### `--template ` Le template de projet à utiliser : - `minimal` — une mise en place minimale pour votre application - `demo` — une app de démo incluant un jeu proposant de deviner des mots fonctionnant sans JavaScript - `library` — un template pour créer une librairie Svelte, utilisant `svelte-package` ### `--types ` Si oui ou non (et comment) utiliser les vérifications de types dans le projet : - `ts` — utilise par défaut l'extension `.ts` pour les fichiers concernés, et utilise `lang="ts"` pour les composants `.svelte` - `jsdoc` — utilise la [syntaxe JSDoc](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) pour le typage ### `--no-types` Empêche l'utilisation de la vérification de types. Non recommandé ! ### `--no-add-ons` Lance la commande sans l'utilitaire de choix d'options. ### `--no-install` Ne lance pas l'installation des dépendances. # sv add `sv add` met à jour un projet existant avec de nouvelles fonctionnalités. ## Usage ```bash npx sv add ``` ```bash npx sv add [add-ons] ``` Vous pouvez sélectionner plusieurs options (séparées par des espaces) en piochant dans la [liste ci-dessous](#Official-add-ons), ou simplement utiliser le prompt interactif. ## Options - `-C`, `--cwd` — path vers la racine de votre projet Svelte(Kit) - `--no-preconditions` — passe l'étape de vérification des préconditions - `--no-install` — passe l'installation des dépendances ## Add-ons officiels [!VO]Official add-ons - `drizzle` - `eslint` - `sveltekit-adapter` - `lucia` - `mdsvex` - `paraglide` - `playwright` - `prettier` - `storybook` - `tailwindcss` - `vitest` # sv check `sv check` détecte les erreurs et les warnings présents dans votre projet, comme par exemple : - du CSS non utilisé - des astuces d'accessibilité - des erreurs de compilateur liées à JavaScript/TypeScript Nécessite Node 16 ou plus récent. ## Installation Vous aurez besoin d'avoir le paquet `svelte-check` installé sur votre projet : ```bash npm i -D svelte-check ``` ## Usage ```bash npx sv check ``` ## Options ### `--workspace ` Path vers votre workspace. Tous les sous-dossiers à l'exception de `node_modules` et de ceux listés avec `--ignore` sont vérifiés. ### `--output ` Comment afficher les erreurs et les warnings. Voir [output conçu pour les machines](#Machine-readable-output). - `human` - `human-verbose` - `machine` - `machine-verbose` ### `--watch` Conserve le processus actif et écoute les changements. ### `--preserveWatchOutput` Empêche l'écran d'être effacé en mode _watch_. ### `--tsconfig ` Fournir un path vers un fichier `tsconfig` ou `jsconfig`. Le path peut être relatif au path du workspace ou absolu. Utiliser cette option implique que seuls les fichiers correspondant aux motifs décrits par `files`/`include`/`exclude` de votre fichier de configuration seront diagnostiqués. Cela implique également que les erreurs des fichiers TypeScript et JavaScript sont remontées. Si non fourni, la vérification traversera le projet depuis sa racine à la recherche du fichier `jsconfig`/`tsconfig` suivant. ### `--no-tsconfig` Utilisez cette option si vous souhaitez uniquement vérifier les fichiers Svelte trouvés dans et en-dessous du dossier actuel, en ignorant les fichiers `.js`/`.ts` (leur typage ne sera pas analysé). ### `--ignore ` Les fichiers/dossiers à ignorer, relativement à la racine du workspace. Les paths doivent être entre guillemets et séparés par des virgules. Exemple : ```bash npx sv check --ignore "dist,build" ``` N'a d'effet que lorsqu'utilisé avec `no-tsconfig`. Lorsqu'utilisé avec `--tsconfig`, ceci n'aura d'effet que sur les fichiers observés, pas sur les fichiers diagnostiqués, qui sont déterminés par le `tsconfig.json`. ### `--fail-on-warnings` Si fourni, les warnings provoqueront l'arrêt de `sv check` avec un code d'erreur. ### `--compiler-warnings ` Une liste de valeurs `code:behaviour` entre guillemets et séparées par des virgules où `code` est un [code de warning compilateur](../svelte/compiler-warnings) et `behaviour` est soit `ignore` soit `error` : ```bash npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error" ``` ### `--diagnostic-sources ` Une liste de types de sources entre guillemets et séparées par des virgules qui doivent être analysées. par défaut, elles sont toutes actives. - `js` (inclut TypeScript) - `svelte` - `css` Exemple : ```bash npx sv check --diagnostic-sources "js,svelte" ``` ### `--threshold ` Filtre les diagnostics : - `warning` (défaut) — les erreurs et les warnings sont affichés - `error` — n'affiche que les erreurs ## Résolution de problèmes [!VO]Troubleshooting [Voir la documentation des outils](https://github.com/sveltejs/language-tools/blob/master/docs/README.md) pour plus d'informations sur la mise en place des préprocesseurs ou tout autre type d'assistance. ## Outputs machine [!VO]Machine-readable output Définir l'option `--output` à `machine` ou `machine-verbose` permet de formatter l'output d'une manière adaptée à la lecture par des machines, c-à-d au sein de pipelines CI, lors de vérifications de qualité de code, etc. Chaque ligne correspond à un nouvel enregistrement. Les lignes sont constituées de colonnes séparées par un espace. La première colonne de chaque ligne contient un timestamp en millisecondes pouvant être utilisé pour du suivi. La deuxième colonne fournit le "type de ligne", en fonction duquel le nombre et type de colonnes suivantes peuvent changer. La première colonne est de type `START` et contient le dossier du workspace (entre guillemets). Exemple : ``` 1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles" ``` Un nombre quelconque d'enregistrements `ERROR` ou `WARNING` peuvent suivre. Leur structure est identique et dépend de l'argument d'output. Si l'argument est `machine`, le nom de fichier, la position initiale en numéro de ligne et colonne, ainsi que le message d'erreur seront affiché. Le nom de fichier est relatif au dossier de workspace. Le nom de fichier et le message sont tout les deux entre parenthèses. Exemple : ``` 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`" ``` Si l'argument est `machine-verbose`, le nom de fichier, la position initiale en numéro de ligne et colonne, la position finale en numéro de ligne et colonne, le message d'erreur, le code de diagnostic, une description du code et la source du diagnostic (c-à-d svelte/typescript) lisibles par l'humain seront affichés. Le nom de fichier est relatif au dossier de workspace. Chaque diagnostic est représenté par une ligne [ndjson](https://en.wikipedia.org/wiki/JSON_streaming#Newline-Delimited_JSON) préfixée par le timestamp du log. Exemple : ``` 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"} ``` L'output se termine par un message `COMPLETED` qui résume le nombre total de fichiers, d'erreurs et de warnings rencontrés pendant le processus. Exemple : ``` 1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 3 FILES_WITH_PROBLEMS ``` Si l'application produit une erreur d'exécution, cette erreur sera affichée comme un enregistrement `FAILURE`. Exemple : ``` 1590680328921 FAILURE "Connection closed" ``` ## Crédits [!VO]Credits - Le projet Vue [VTI](https://github.com/vuejs/vetur/tree/master/vti) qui a servi de fondation pour `svelte-check` ## FAQ ### Pourquoi n'y a t'il pas d'option pour analyser uniquement des fichiers spéficiques (comme les fichiers en staging) ? [!VO]Why is there no option to only check specific files (for example only staged files)? `svelte-check` a besoin de "voir" tout le projet pour pouvoir effectuer correctement ses vérifications. Supposez que vous ayez renommé une prop d'un composant sans mettre à jour les différents endroit où cette prop est utilisé — tous les fichiers où cette prop est utilisée ont alors une erreur, mais vous ne la verriez pas si vous analysiez uniquement les fichiers modifiés. # sv migrate `sv migrate` migre les codebase Svelte(Kit). Elle délègue le travail au paquet [`svelte-migrate`](https://www.npmjs.com/package/svelte-migrate). Certaines migrations peuvent annoter votre code avec des tâches à faire manuellement, que vous pouvez trouver en cherchant `@migration`. ## Usage ```bash npx sv migrate [migration] ``` ## Migrations ### `app-state` Met à jour l'usage de `$app/stores` vers `$app/state` dans les fichiers `.svelte`. Voir le [guide de migration](/docs/kit/migrating-to-sveltekit-2#SvelteKit-2.12:-$app-stores-deprecated) pour plus de détails. ### `svelte-5` Met à jour une application Svelte 4 vers Svelte 5, et modifie les composants pour qu'ils utilisent les [runes](../svelte/what-are-runes) et les autres syntaxes Svelte 5 ([voir le guide de migration](../svelte/v5-migration-guide)). ### `self-closing-tags` Remplace tous les éléments non vides qui s'autoferment dans vos fichiers `.svelte`. Voir la [pull request dédiée](https://github.com/sveltejs/kit/pull/12128) pour plus de détails. ### `svelte-4` Met à jour une application Svelte 3 vers Svelte 4 ([voir le guide migration](../svelte/v4-migration-guide)). ### `sveltekit-2` Met à jour une application SvelteKit 1 vers SvelteKit 2 ([voir le guide de migration](../kit/migrating-to-sveltekit-2)). ### `package` Met à jour une librairie utilisant `@sveltejs/package` de la version 1 à la version 2. Voir la [pull request dédiée](https://github.com/sveltejs/kit/pull/8922) pour plus de détails. ### `routes` Met à jour une application SvelteKit pre 1.0 pour qu'elle utilise les conventions de routage de SvelteKit 1, basées sur le système de fichiers. Voir la [pull request dédiée](https://github.com/sveltejs/kit/discussions/5774) pour plus de détails.