Tutoriel : votre premier programme Node dans Turbo JS

  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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

# Tutoriel : votre premier programme Node dans Turbo JS

À la fin de ce tutoriel, vous aurez écrit, lancé et cassé un petit programme Node sans quitter l'éditeur — et vu l'éditeur vous dire où était l'erreur.

Aucune connaissance préalable de Turbo JS n'est nécessaire. Il vous faut Go 1.26 ou plus récent pour compiler l'éditeur, et Node pour exécuter le programme.

## Prérequis

Vérifiez Go :

```bash
go version
```

Vous devriez voir quelque chose comme :

```
go version go1.26.5 linux/arm64
```

Vérifiez Node et npm :

```bash
node --version && npm --version
```

```
v24.19.0
11.17.0
```

Si `node` est introuvable, installez-le d'abord — [un gestionnaire de versions ou un installeur suffit](../how-to/install-node.md).

## Étape 1 — Installer l'éditeur et le serveur de langage

```bash
git clone https://rickub.com/turbo-editors/turbo-js.git
cd turbo-js
make install
npm install -g typescript-language-server typescript@6
```

L'installeur compile, installe, puis vérifie ce qu'il a installé. Après le `npm install`, les dernières lignes d'un second `make install` sont :

```
==> Checking the language server
  ✓ typescript-language-server at /usr/local/bin/typescript-language-server

==> Ready
```

Nous avons maintenant une commande `turbo-js`. Le `@6` de la dernière ligne compte : TypeScript 7 ne fournit pas de `tsserver.js`, et le serveur refuse de démarrer à côté de lui.

## Étape 2 — Créer un projet

```bash
mkdir /tmp/greeter
cd /tmp/greeter
npm init -y
```

Vous devriez voir le `package.json` que npm a écrit, qui se termine par :

```
  "type": "commonjs"
}
```

C'est ce fichier qui fait de ce dossier un projet Node. **Le dossier dans lequel vous démarrez l'éditeur** est celui où les commandes du menu JavaScript s'exécuteront, et le `package.json` le plus proche au-dessus du fichier que vous ouvrez est celui où le serveur de langage est démarré — démarrez-le donc ici.

## Étape 3 — Ouvrir un fichier qui n'existe pas encore

```bash
turbo-js main.js
```

L'écran se remplit. En haut :

```
 File  Edit  Search  Run  Code  Options  Window  Snippets  Agent  JavaScript  Help
```

Onze menus, et le dixième porte le nom du langage. Au milieu, une fenêtre vide intitulée `main.js`. En bas, à droite, vous devriez voir :

```
1:1  LSP: ready
```

`LSP: ready` signifie que `typescript-language-server` a démarré dans ce dossier. Nous nous en servirons à l'étape 8.

## Étape 4 — Écrire le programme

Tapez ceci. Tapez-le exactement ; nous allons regarder les couleurs juste après.

```javascript
// A greeting, several times over.
const { argv } = require("node:process");

/** Greets one person. */
class Greeter {
  #name;

  constructor(name) {
    this.#name = name;
  }

  greet(times = 1) {
    const pattern = /^[A-Z]/;
    for (let i = 1; i <= times; i++) {
      console.log(`Hello, ${this.#name}! (${i})`);
    }
    return pattern.test(this.#name);
  }
}

const who = argv[2] ?? "JavaScript";
new Greeter(who).greet(3);
```

Deux choses sur la saisie. **L'éditeur reprend l'indentation de la ligne précédente quand vous appuyez sur `Entrée`**, ne tapez donc que la différence : deux espaces de plus après une ligne qui se termine par `{`, et deux fois `Retour arrière` avant une `}` fermante. Et si une liste de complétion s'ouvre pendant que vous tapez — un `.` en demande une de lui-même, et `this.` en est un — continuez à taper ou appuyez sur `Échap` ; `Entrée` accepterait la première entrée.

Appuyez sur `F2` pour enregistrer. La barre d'état affiche `Saved main.js`.

## Étape 5 — Lire les couleurs

Regardez ce que vous venez de taper. Dans le thème par défaut `turbo-classic` :

| Quoi | Couleur |
| --- | --- |
| `const`, `class`, `for`, `let`, `return`, `new` | blanc vif, gras — mots-clés |
| `Greeter`, là où il est déclaré comme là où il est appelé | cyan vif — une classe |
| `constructor`, `greet`, `log`, `test` | jaune vif, gras — fonctions et méthodes |
| `console`, `require` | cyan vif, gras — les globales que Node fournit |
| `argv`, `name`, `times`, `who`, `#name` | jaune vif — noms ordinaires |
| `"node:process"`, `` `Hello, ${this.#name}! (${i})` `` | vert — chaînes |
| `/^[A-Z]/` | vert — une expression régulière, dessinée avec la couleur des chaînes dans ce thème |
| `1`, `3`, `this` | magenta — nombres et constantes |
| `// A greeting…`, `/** Greets one person. */` | gris — commentaires |
| `=`, `<=`, `++`, `??`, `{`, `}`, `.` | blanc — opérateurs et ponctuation |

Trois de ces lignes méritent un second regard.

**`Greeter` est cyan et `greet` est jaune**, et personne n'a dit à l'éditeur lequel des deux est une classe. C'est la convention de JavaScript qui tranche : les classes sont les noms que l'on écrit avec une majuscule, une majuscule est donc colorée comme une classe — même dans `new Greeter(who)`, où une parenthèse suit.

**`/^[A-Z]/` est une expression régulière, pas deux divisions.** Le scanner lit le `=` qui la précède et sait qu'une barre oblique à cet endroit ouvre un littéral. Remplacez la ligne par `const half = times / 2;` et la barre oblique redevient blanche.

**`#name` est un seul nom**, `#` compris, et il est jaune là où un commentaire serait gris — [une règle délibérée](../explanation/colouring-and-completion.md), parce que `#` ouvre un commentaire dans la moitié des autres langages que cet éditeur colore.

## Étape 6 — Donner ses outils au projet

Appuyez sur `F10` pour ouvrir la barre de menus, puis sur `→` **neuf fois** pour atteindre **JavaScript** — après Edit, Search, Run, Code, Options, Window, Snippets et Agent. Plus rapide : `Alt-J`.

Le menu contient deux entrées, et une seule est disponible :

```
┌───────────────────┐
│ Create tools file │
│ Open tools file   │   ← grisée ; il n'y a pas encore de fichier à ouvrir
└───────────────────┘
```

Choisissez **Create tools file**.

Une seconde fenêtre s'ouvre sur le fichier qui vient d'être écrit, `.turbo-js/tools.toml`. Lisez-le si vous voulez — il explique chacune de ses clés — puis fermez-le avec `Ctrl-W`.

Regardez la barre de menus : un menu **Tools** est apparu entre JavaScript et Help. La dernière entrée du fichier de départ nomme un menu à elle, et cette seule ligne est tout le mécanisme.

Rouvrez le menu JavaScript. Il contient maintenant six commandes, et les deux entrées ont échangé leurs rôles : `Create tools file` est grisée, et c'est `Open tools file` qui est choisissable.

## Étape 7 — Le lancer

Appuyez sur `Alt-J` et choisissez **Run**. Une boîte demande une valeur avant de lancer la commande, parce qu'un projet Node n'a pas de point d'entrée unique que l'éditeur pourrait connaître :

```
┌──────────────── Run ────────────────┐
│  script, e.g. main.js               │
│  [                               ]  │
└─────────────────────────────────────┘
```

Tapez `main.js` et appuyez sur `Entrée`. Une fenêtre de terminal s'ouvre et le programme s'y exécute :

```
Hello, JavaScript! (1)
Hello, JavaScript! (2)
Hello, JavaScript! (3)
```

Un terminal plutôt qu'une boîte de dialogue, parce qu'un programme qui lit le clavier doit pouvoir recevoir une réponse. Le programme est terminé, la fenêtre a donc cessé de se comporter comme un terminal et toutes les touches reviennent à l'éditeur : appuyez sur `Ctrl-W` pour la fermer.

## Étape 8 — Le casser, et voir où

Allez à la dernière ligne, `new Greeter(who).greet(3);`, et supprimez sa parenthèse fermante, pour qu'elle devienne :

```javascript
new Greeter(who).greet(3;
```

Appuyez sur `F2` pour enregistrer.

En moins d'une seconde, deux choses se produisent. Un `×` apparaît dans la gouttière, juste à gauche du numéro de cette ligne. Et la barre d'état affiche :

```
⚠ ')' expected.
```

Personne ne l'a demandé. `typescript-language-server` le publie de lui-même chaque fois que le fichier change — c'est ce que le serveur fait pour un simple fichier `.js` : il trouve les erreurs de syntaxe. Remettez la parenthèse et enregistrez de nouveau ; la marque et le message disparaissent tous les deux.

Placez maintenant le curseur sur `greet` dans cette dernière ligne et appuyez sur `F1`. Une boîte intitulée **Symbol** s'ouvre avec la signature de la méthode, qui commence par `(method) Greeter.greet(times?: number)` — le serveur a déduit le type du paramètre de sa valeur par défaut et le type de retour de la ligne `return pattern.test(…)`, dans un langage qui n'a jamais déclaré ni l'un ni l'autre. Appuyez sur `Échap` pour la fermer, puis sur `F12` sur le même mot : le curseur saute à la ligne où `greet` est déclarée.

## Étape 9 — Changer de thème

`F10`, puis `→` **cinq fois** pour atteindre **Options** — après Edit, Search, Run et Code. Choisissez **Theme…**.

Une liste s'ouvre sur le thème dans lequel vous êtes, `turbo-classic`. Appuyez sur `↑` jusqu'à ce que `cobalt` soit sélectionné — cinq fois — puis `Entrée`. Tout l'écran change, en gardant la même forme.

Appuyez sur `Alt-X` pour quitter. L'éditeur pose d'abord la question des fichiers non enregistrés, s'il y en a.

## Et maintenant ?

Vous avez écrit un programme Node dans l'éditeur, l'avez lancé, cassé, et vu l'éditeur dire où. Pour aller plus loin :

- Pour faire des choses précises → les [guides pratiques](../how-to/)
- Pour savoir exactement ce qui est coloré et comment → [langages colorés](../reference/languages.md)
- Pour comprendre pourquoi l'éditeur est bâti ainsi → les [explications](../explanation/)