| 📦 Turbo JS 91999d1 k33g yesterday | 1 | # Tutoriel : votre premier programme Node dans Turbo JS |
| 2 | |
| 3 | À 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. |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | ## Prérequis |
| 8 | |
| 9 | Vérifiez Go : |
| 10 | |
| 11 | ```bash |
| 12 | go version |
| 13 | ``` |
| 14 | |
| 15 | Vous devriez voir quelque chose comme : |
| 16 | |
| 17 | ``` |
| 18 | go version go1.26.5 linux/arm64 |
| 19 | ``` |
| 20 | |
| 21 | Vérifiez Node et npm : |
| 22 | |
| 23 | ```bash |
| 24 | node --version && npm --version |
| 25 | ``` |
| 26 | |
| 27 | ``` |
| 28 | v24.19.0 |
| 29 | 11.17.0 |
| 30 | ``` |
| 31 | |
| 32 | Si `node` est introuvable, installez-le d'abord — [un gestionnaire de versions ou un installeur suffit](../how-to/install-node.md). |
| 33 | |
| 34 | ## Étape 1 — Installer l'éditeur et le serveur de langage |
| 35 | |
| 36 | ```bash |
| 37 | git clone https://rickub.com/turbo-editors/turbo-js.git |
| 38 | cd turbo-js |
| 39 | make install |
| 40 | npm install -g typescript-language-server typescript@6 |
| 41 | ``` |
| 42 | |
| 43 | 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 : |
| 44 | |
| 45 | ``` |
| 46 | ==> Checking the language server |
| 47 | ✓ typescript-language-server at /usr/local/bin/typescript-language-server |
| 48 | |
| 49 | ==> Ready |
| 50 | ``` |
| 51 | |
| 52 | 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. |
| 53 | |
| 54 | ## Étape 2 — Créer un projet |
| 55 | |
| 56 | ```bash |
| 57 | mkdir /tmp/greeter |
| 58 | cd /tmp/greeter |
| 59 | npm init -y |
| 60 | ``` |
| 61 | |
| 62 | Vous devriez voir le `package.json` que npm a écrit, qui se termine par : |
| 63 | |
| 64 | ``` |
| 65 | "type": "commonjs" |
| 66 | } |
| 67 | ``` |
| 68 | |
| 69 | 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. |
| 70 | |
| 71 | ## Étape 3 — Ouvrir un fichier qui n'existe pas encore |
| 72 | |
| 73 | ```bash |
| 74 | turbo-js main.js |
| 75 | ``` |
| 76 | |
| 77 | L'écran se remplit. En haut : |
| 78 | |
| 79 | ``` |
| 80 | File Edit Search Run Code Options Window Snippets Agent JavaScript Help |
| 81 | ``` |
| 82 | |
| 83 | 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 : |
| 84 | |
| 85 | ``` |
| 86 | 1:1 LSP: ready |
| 87 | ``` |
| 88 | |
| 89 | `LSP: ready` signifie que `typescript-language-server` a démarré dans ce dossier. Nous nous en servirons à l'étape 8. |
| 90 | |
| 91 | ## Étape 4 — Écrire le programme |
| 92 | |
| 93 | Tapez ceci. Tapez-le exactement ; nous allons regarder les couleurs juste après. |
| 94 | |
| 95 | ```javascript |
| 96 | // A greeting, several times over. |
| 97 | const { argv } = require("node:process"); |
| 98 | |
| 99 | /** Greets one person. */ |
| 100 | class Greeter { |
| 101 | #name; |
| 102 | |
| 103 | constructor(name) { |
| 104 | this.#name = name; |
| 105 | } |
| 106 | |
| 107 | greet(times = 1) { |
| 108 | const pattern = /^[A-Z]/; |
| 109 | for (let i = 1; i <= times; i++) { |
| 110 | console.log(`Hello, ${this.#name}! (${i})`); |
| 111 | } |
| 112 | return pattern.test(this.#name); |
| 113 | } |
| 114 | } |
| 115 | |
| 116 | const who = argv[2] ?? "JavaScript"; |
| 117 | new Greeter(who).greet(3); |
| 118 | ``` |
| 119 | |
| 120 | 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. |
| 121 | |
| 122 | Appuyez sur `F2` pour enregistrer. La barre d'état affiche `Saved main.js`. |
| 123 | |
| 124 | ## Étape 5 — Lire les couleurs |
| 125 | |
| 126 | Regardez ce que vous venez de taper. Dans le thème par défaut `turbo-classic` : |
| 127 | |
| 128 | | Quoi | Couleur | |
| 129 | | --- | --- | |
| 130 | | `const`, `class`, `for`, `let`, `return`, `new` | blanc vif, gras — mots-clés | |
| 131 | | `Greeter`, là où il est déclaré comme là où il est appelé | cyan vif — une classe | |
| 132 | | `constructor`, `greet`, `log`, `test` | jaune vif, gras — fonctions et méthodes | |
| 133 | | `console`, `require` | cyan vif, gras — les globales que Node fournit | |
| 134 | | `argv`, `name`, `times`, `who`, `#name` | jaune vif — noms ordinaires | |
| 135 | | `"node:process"`, `` `Hello, ${this.#name}! (${i})` `` | vert — chaînes | |
| 136 | | `/^[A-Z]/` | vert — une expression régulière, dessinée avec la couleur des chaînes dans ce thème | |
| 137 | | `1`, `3`, `this` | magenta — nombres et constantes | |
| 138 | | `// A greeting…`, `/** Greets one person. */` | gris — commentaires | |
| 139 | | `=`, `<=`, `++`, `??`, `{`, `}`, `.` | blanc — opérateurs et ponctuation | |
| 140 | |
| 141 | Trois de ces lignes méritent un second regard. |
| 142 | |
| 143 | **`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. |
| 144 | |
| 145 | **`/^[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. |
| 146 | |
| 147 | **`#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. |
| 148 | |
| 149 | ## Étape 6 — Donner ses outils au projet |
| 150 | |
| 151 | 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`. |
| 152 | |
| 153 | Le menu contient deux entrées, et une seule est disponible : |
| 154 | |
| 155 | ``` |
| 156 | ┌───────────────────┐ |
| 157 | │ Create tools file │ |
| 158 | │ Open tools file │ ← grisée ; il n'y a pas encore de fichier à ouvrir |
| 159 | └───────────────────┘ |
| 160 | ``` |
| 161 | |
| 162 | Choisissez **Create tools file**. |
| 163 | |
| 164 | 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`. |
| 165 | |
| 166 | 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. |
| 167 | |
| 168 | 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. |
| 169 | |
| 170 | ## Étape 7 — Le lancer |
| 171 | |
| 172 | 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 : |
| 173 | |
| 174 | ``` |
| 175 | ┌──────────────── Run ────────────────┐ |
| 176 | │ script, e.g. main.js │ |
| 177 | │ [ ] │ |
| 178 | └─────────────────────────────────────┘ |
| 179 | ``` |
| 180 | |
| 181 | Tapez `main.js` et appuyez sur `Entrée`. Une fenêtre de terminal s'ouvre et le programme s'y exécute : |
| 182 | |
| 183 | ``` |
| 184 | Hello, JavaScript! (1) |
| 185 | Hello, JavaScript! (2) |
| 186 | Hello, JavaScript! (3) |
| 187 | ``` |
| 188 | |
| 189 | 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. |
| 190 | |
| 191 | ## Étape 8 — Le casser, et voir où |
| 192 | |
| 193 | Allez à la dernière ligne, `new Greeter(who).greet(3);`, et supprimez sa parenthèse fermante, pour qu'elle devienne : |
| 194 | |
| 195 | ```javascript |
| 196 | new Greeter(who).greet(3; |
| 197 | ``` |
| 198 | |
| 199 | Appuyez sur `F2` pour enregistrer. |
| 200 | |
| 201 | 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 : |
| 202 | |
| 203 | ``` |
| 204 | ⚠ ')' expected. |
| 205 | ``` |
| 206 | |
| 207 | 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. |
| 208 | |
| 209 | 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. |
| 210 | |
| 211 | ## Étape 9 — Changer de thème |
| 212 | |
| 213 | `F10`, puis `→` **cinq fois** pour atteindre **Options** — après Edit, Search, Run et Code. Choisissez **Theme…**. |
| 214 | |
| 215 | 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. |
| 216 | |
| 217 | Appuyez sur `Alt-X` pour quitter. L'éditeur pose d'abord la question des fichiers non enregistrés, s'il y en a. |
| 218 | |
| 219 | ## Et maintenant ? |
| 220 | |
| 221 | Vous avez écrit un programme Node dans l'éditeur, l'avez lancé, cassé, et vu l'éditeur dire où. Pour aller plus loin : |
| 222 | |
| 223 | - Pour faire des choses précises → les [guides pratiques](../how-to/) |
| 224 | - Pour savoir exactement ce qui est coloré et comment → [langages colorés](../reference/languages.md) |
| 225 | - Pour comprendre pourquoi l'éditeur est bâti ainsi → les [explications](../explanation/) |