| 📦 Turbo JS 91999d1 k33g 12h ago | 1 | # Insérer des snippets depuis un menu |
| 2 | |
| 3 | Ce guide montre comment mettre en place des morceaux de texte réutilisables et les insérer dans un fichier à l'endroit du curseur. Il suppose Turbo JS déjà installé. |
| 4 | |
| 5 | ## Obtenir un fichier de départ |
| 6 | |
| 7 | Lancez l'éditeur **depuis le dossier du projet**, puis choisissez **Snippets ▸ Create snippets file** (`Alt-N`, puis `C`). |
| 8 | |
| 9 | Cela écrit `.turbo-js/snippets.toml`, rempli de sept snippets JavaScript — `import`, `require`, `async function`, `try / catch`, `class`, `for of`, `test` —, d'un snippet JSON, `scripts`, plus deux exemples d'autres groupes, et l'ouvre — coloré, puisque Turbo JS colore le TOML : |
| 10 | |
| 11 | ```toml |
| 12 | [[snippet]] |
| 13 | name = "for of" |
| 14 | group = "JavaScript" |
| 15 | languages = ["javascript"] |
| 16 | body = """ |
| 17 | for (const item of items) { |
| 18 | }""" |
| 19 | |
| 20 | [[snippet]] |
| 21 | group = "General" |
| 22 | name = "Hello" |
| 23 | body = "Hello!!!" |
| 24 | ``` |
| 25 | |
| 26 | Chaque `[[snippet]]` devient une ligne du menu. Le fichier est relu **chaque fois que le menu s'ouvre** : une modification prend effet immédiatement, sans redémarrage. |
| 27 | |
| 28 | ## En insérer un |
| 29 | |
| 30 | Ouvrez **Snippets** (`Alt-N`). Les snippets partageant un `group` apparaissent ensemble dans un sous-menu de ce nom ; celui qui n'a pas de groupe va dans **General**. |
| 31 | |
| 32 | | Touche | Effet | |
| 33 | | --- | --- | |
| 34 | | `Alt-N`, ou `F10` puis `→` jusqu'à Snippets | Ouvrir le menu | |
| 35 | | `↑` `↓` | Parcourir les groupes | |
| 36 | | `→`, ou `Entrée` | Ouvrir le groupe surligné | |
| 37 | | `↑` `↓` puis `Entrée` | Insérer le snippet surligné | |
| 38 | | `←` | Ressortir d'un groupe | |
| 39 | | `Échap` | Refermer tout le menu | |
| 40 | |
| 41 | Le snippet arrive au curseur. **Les lignes suivant la première sont indentées sur la ligne où vous l'avez inséré**, de sorte qu'un snippet multi-ligne déposé dans un bloc imbriqué atterrit là où vous l'auriez tapé : |
| 42 | |
| 43 | ``` |
| 44 | function main() { |
| 45 | | ← curseur ici |
| 46 | } |
| 47 | ``` |
| 48 | |
| 49 | devient, avec le snippet `for of`, |
| 50 | |
| 51 | ``` |
| 52 | function main() { |
| 53 | for (const item of items) { |
| 54 | } |
| 55 | } |
| 56 | ``` |
| 57 | |
| 58 | C'est une seule opération d'annulation : `Ctrl-Z` retire tout le snippet. |
| 59 | |
| 60 | ## Garder ses snippets d'un projet à l'autre |
| 61 | |
| 62 | Mettez-les dans `~/.config/turbo-js/snippets.toml` — le même dossier que vos thèmes. Ceux-là apparaissent dans tous les projets, et le fichier d'un projet s'y **ajoute** plutôt que de les remplacer. |
| 63 | |
| 64 | Quand un projet et vous employez le même `name` dans le même `group`, **celui du projet gagne** : c'est le plus spécifique des deux énoncés. |
| 65 | |
| 66 | ## N'afficher un snippet que là où il a un sens |
| 67 | |
| 68 | Ajoutez `languages`, avec les noms que l'éditeur emploie — `javascript`, `json`, `toml`, `yaml`, `markdown`, `html`, `xml`, `dockerfile`, `bash` : |
| 69 | |
| 70 | ```toml |
| 71 | [[snippet]] |
| 72 | name = "strict mode" |
| 73 | group = "Shell" |
| 74 | languages = ["bash"] |
| 75 | body = "set -euo pipefail" |
| 76 | ``` |
| 77 | |
| 78 | Ce snippet n'apparaît alors que si un script shell est au premier plan. Omettez `languages` et le snippet est proposé partout, ce que vous voulez pour un en-tête de licence ou un `TODO`. |
| 79 | |
| 80 | Un groupe que le filtrage laisse vide n'apparaît pas du tout. |
| 81 | |
| 82 | ## Écrire un corps JavaScript |
| 83 | |
| 84 | Deux habitudes du fichier de départ valent d'être reprises dans les vôtres : |
| 85 | |
| 86 | - **Deux espaces d'indentation.** C'est ce que Prettier écrit par défaut, et **JavaScript ▸ Format** le lance : une tabulation serait reformatée à son premier passage. |
| 87 | - **Des chaînes multi-lignes, `"""…"""`.** Aucun corps du fichier de départ ne contient de barre oblique inverse, et une chaîne TOML basique suffit. Dès qu'un corps en porte une — le `\n` ou le `\"` d'une chaîne JavaScript —, écrivez-le plutôt dans une chaîne littérale, `'''…'''` : dans une chaîne basique, ces échappements seraient résolus à la lecture du fichier, avant que l'éditeur ne voie le corps ; dans une chaîne littérale, une barre oblique inverse est une barre oblique inverse, et le snippet arrive dans le fichier tel que vous l'avez écrit : |
| 88 | |
| 89 | ```toml |
| 90 | [[snippet]] |
| 91 | name = "try / catch" |
| 92 | group = "JavaScript" |
| 93 | languages = ["javascript"] |
| 94 | body = ''' |
| 95 | try { |
| 96 | throw new Error("boom"); |
| 97 | } catch (error) { |
| 98 | console.error("caught: \"" + error.message + "\""); |
| 99 | } finally { |
| 100 | console.log("done"); |
| 101 | }''' |
| 102 | ``` |
| 103 | |
| 104 | ## Variantes |
| 105 | |
| 106 | - **Vous avez lancé l'éditeur depuis un sous-dossier.** Le fichier du projet n'est pas trouvé : seul `./.turbo-js` est consulté, la même règle que `settings.toml`. Vos propres snippets apparaissent quand même. |
| 107 | - **Le fichier contient une erreur.** Le menu affiche un `Cannot read snippets` grisé à la place des groupes, et **Create snippets file** est toujours là. Ouvrez le fichier et corrigez-le. |
| 108 | - **Vous voulez une tabulation dans un corps.** Dans une chaîne `"""…"""`, écrivez `\t` : le TOML le transforme en tabulation à la lecture. Dans une chaîne `'''…'''`, tapez une vraie tabulation — rien n'y est interprété. |
| 109 | |
| 110 | ## Voir aussi |
| 111 | |
| 112 | - Toutes les clés du fichier et toutes les règles : [Référence des snippets](../reference/snippets.md) |
| 113 | - Pourquoi le menu est reconstruit à chaque ouverture, pourquoi l'insertion réindente, et pourquoi deux espaces : [Snippets](../explanation/snippets.md) |
| 114 | - L'autre fichier de `.turbo-js` : [Réglages de projet](../reference/project-settings.md) |