Insérer des snippets depuis un menu

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

# Insérer des snippets depuis un menu

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é.

## Obtenir un fichier de départ

Lancez l'éditeur **depuis le dossier du projet**, puis choisissez **Snippets ▸ Create snippets file** (`Alt-N`, puis `C`).

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 :

```toml
[[snippet]]
name = "for of"
group = "JavaScript"
languages = ["javascript"]
body = """
for (const item of items) {
}"""

[[snippet]]
group = "General"
name = "Hello"
body = "Hello!!!"
```

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.

## En insérer un

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**.

| Touche | Effet |
| --- | --- |
| `Alt-N`, ou `F10` puis `→` jusqu'à Snippets | Ouvrir le menu |
| `↑` `↓` | Parcourir les groupes |
| `→`, ou `Entrée` | Ouvrir le groupe surligné |
| `↑` `↓` puis `Entrée` | Insérer le snippet surligné |
| `←` | Ressortir d'un groupe |
| `Échap` | Refermer tout le menu |

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é :

```
function main() {
  |                              ← curseur ici
}
```

devient, avec le snippet `for of`,

```
function main() {
  for (const item of items) {
  }
}
```

C'est une seule opération d'annulation : `Ctrl-Z` retire tout le snippet.

## Garder ses snippets d'un projet à l'autre

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.

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.

## N'afficher un snippet que là où il a un sens

Ajoutez `languages`, avec les noms que l'éditeur emploie — `javascript`, `json`, `toml`, `yaml`, `markdown`, `html`, `xml`, `dockerfile`, `bash` :

```toml
[[snippet]]
name = "strict mode"
group = "Shell"
languages = ["bash"]
body = "set -euo pipefail"
```

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`.

Un groupe que le filtrage laisse vide n'apparaît pas du tout.

## Écrire un corps JavaScript

Deux habitudes du fichier de départ valent d'être reprises dans les vôtres :

- **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.
- **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 :

```toml
[[snippet]]
name = "try / catch"
group = "JavaScript"
languages = ["javascript"]
body = '''
try {
  throw new Error("boom");
} catch (error) {
  console.error("caught: \"" + error.message + "\"");
} finally {
  console.log("done");
}'''
```

## Variantes

- **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.
- **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.
- **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é.

## Voir aussi

- Toutes les clés du fichier et toutes les règles : [Référence des snippets](../reference/snippets.md)
- Pourquoi le menu est reconstruit à chaque ouverture, pourquoi l'insertion réindente, et pourquoi deux espaces : [Snippets](../explanation/snippets.md)
- L'autre fichier de `.turbo-js` : [Réglages de projet](../reference/project-settings.md)