# VSCode - Tips, extensions and shortcuts A series of 13 article(s), in reading order. # Le folding Markdown ne fonctionne pas > Réglez votre problème de folding Markdown dans VS Code ! Découvrez pourquoi le folding ne fonctionne pas et la solution simple pour activer le folding des blocs de code et des titres, pour une édition plus propre. --- ![Le folding Markdown ne fonctionne pas](/img/v2/vscode_tips.webp) **TL;DR** Cet article résout un cas où le folding ne fonctionne pas dans l'éditeur Markdown de VSCode : assurez-vous que l'extension intégrée `@builtin Markdown Language Features` est activée. > Si le folding ne fonctionne pas en mode markdown, comme illustré ci-dessous, vérifiez que l'extension `@builtin Markdown Language Features` est bien activée. *Cette même extension intégrée alimente le [sticky scroll](/blog/vscode-sticky-scroll) dans les fichiers Markdown, qui cesse de fonctionner pour la même raison.* ![code\_folding](./images/code_folding.gif) ![Markdown Language Features](./images/markdown_language_features.webp) Une fois le folding rétabli, vous voudrez peut-être mieux contrôler *ce qui* est repliable : [Working with regions in VSCode](/blog/vscode-regions) montre comment définir vos propres blocs repliables, même dans des types de fichiers que VSCode ne gère pas nativement. --- # Démarrer vscode depuis github.com > Saviez-vous que vous pouvez ouvrir VSCode pour n'importe quel repository GitHub instantanément ? Découvrez le raccourci secret : appuyez simplement sur la touche point (.). Commencez à coder en ligne dès maintenant ! --- ![Démarrer vscode depuis github.com](/img/v2/vscode_tips.webp) **TL;DR** Cet article partage une astuce rapide : appuyer sur la touche `.` sur n'importe quelle page de repository GitHub (ou remplacer `.com` par `.dev` dans l'URL) ouvre ce repository dans VSCode en ligne (vscode.dev/github.dev) — pratique pour faire une petite modification ou corriger une faute de frappe depuis un téléphone ou une machine sans clone local. Ce n'est pas nouveau, mais ce n'est probablement pas assez connu : en parcourant **n'importe quel** repository GitHub comme par exemple , il suffit d'appuyer sur `.` (la touche point) de votre clavier pour lancer VS Code en ligne et voir le repository courant dans vscode.dev. Voici le blog dans vscode.dev : . *C'est la plus légère des trois façons de coder sans VSCode local. Les deux autres : [un VSCode complet dans votre navigateur via Docker](/blog/vscode-code-server) et [SSH Remote development with VSCode](/blog/vscode-remote-ssh).* > **Changez l'extension de domaine en github.dev:** > > Vous pouvez obtenir le même résultat en modifiant l'URL et en remplaçant l'extension `.com` par `.dev` ## Mais à quoi ça sert ? Pourquoi en aurais-je besoin {#but-whats-the-point-why-would-i-need-it} Imaginez que vous n'êtes pas chez vous, sur votre propre ordinateur, et que vous voulez modifier votre repository ? Ou encore que vous êtes dans un bus/train/avion et que vous voulez corriger une faute de frappe que vous venez de repérer. Vous pouvez aussi vouloir faire une toute petite mise à jour, comme modifier votre fichier readme.md. C'est vraiment plus rapide de le faire en ligne que de devoir cloner/mettre à jour le projet sur votre ordinateur, faire la modification, puis add/commit/push. Cette astuce est toutefois limitée aux repositories GitHub. Si vous avez besoin d'un vrai éditeur complet sur une machine où VSCode n'est pas installé, lancez-le plutôt comme un container : [Do I need VSCode on my machine to use it?](/blog/vscode-code-server). ![Utiliser un smartphone](./images/smartphone_view.webp) Rendez-vous simplement sur votre repository avec votre smartphone, rien de plus qu'un navigateur web basique, changez l'extension en `.dev` et bingo, vous pouvez commencer à éditer votre repository (ou celui de quelqu'un d'autre si vous voulez proposer une Pull request (alias une `PR`)). Pour en savoir plus : ou . --- # Le sticky scroll dans vscode > Activez la puissante fonctionnalité Sticky Scroll de VS Code ! Gardez les lignes de contexte (comme les classes, les fonctions ou les titres de section) épinglées en haut de votre éditeur pour naviguer sans effort dans votre code et vos documents. --- ![Le sticky scroll dans vscode](/img/v2/vscode_tips.webp) **TL;DR** Cet article présente la fonctionnalité Sticky Scroll de VSCode, qui épingle en haut de l'éditeur les lignes de contexte (nom de la classe, nom de la fonction, niveau de titre courant en Markdown, etc.) au fur et à mesure que vous défilez. Vous savez ainsi toujours où vous êtes dans le fichier. Il suffit d'ajouter `"editor.stickyScroll.enabled": true` dans `settings.json`. > VS Code a récemment ajouté une nouvelle fonctionnalité vraiment utile : le sticky scroll. Cette fonction vous permet de défiler dans un document comme un [fichier Markdown](/blog/vscode-markdown-code-folding), du code source écrit en PHP ou en JavaScript, ou n'importe quel autre langage supporté et, pendant le défilement, d'épingler dans la partie supérieure de l'éditeur des informations de contexte comme le nom de la classe, le nom de la fonction, le début de la boucle, etc. *Ça se marie très bien avec le folding de code : [Working with regions in VSCode](/blog/vscode-regions) vous permet de replier des blocs entiers, et le sticky scroll vous garde orienté dans ceux que vous avez laissés ouverts.* C'est vraiment très pratique. Voyez l'illustration ci-dessous (*image provenant de *) ![Le sticky scroll dans vscode](./images/sticky_scroll.gif) Voici un exemple tiré de ce blog : ![Sticky scroll en markdown](./images/sticky_scroll_markdown.webp) Comme vous pouvez le voir, j'ai ouvert un fichier markdown et j'affiche une partie de l'article autour de la ligne 878. Regardez les premières lignes « collées » en haut de la fenêtre : VS Code m'affiche mon titre 1, mon titre 2 et mon titre 3, je connais donc le contexte. Les lignes affichées se situent dans le chapitre `Make it easy`. Plutôt sympa ! Pour activer la fonctionnalité, éditez votre fichier `settings.json` et ajoutez cette entrée : **settings.json** ```json "editor.stickyScroll.enabled": true ``` Le sticky scroll vous aide à savoir *où* vous êtes dans un long fichier. L'autre moitié du problème, c'est de masquer ce dont vous n'avez pas besoin dans l'immédiat, et c'est le sujet de [Working with regions in VSCode](/blog/vscode-regions). --- # La fonctionnalité Autosave dans VSCode > Fatigué d'oublier d'enregistrer vos fichiers dans VS Code ? Découvrez comment activer facilement la fonctionnalité Autosave, la régler sur onFocusChange et ne plus jamais perdre vos modifications ! --- ![La fonctionnalité Autosave dans VSCode](/img/v2/vscode_tips.webp) **TL;DR** Cet article montre comment activer la fonctionnalité Autosave de VSCode, soit via l'interface des paramètres (`Files: Auto save` réglé sur `onFocusChange`), soit en ajoutant la ligne correspondante dans `settings.json`, pour que les modifications soient enregistrées automatiquement dès que l'éditeur perd le focus, au lieu de dépendre d'un `Ctrl+S` manuel. Combien de fois avez-vous modifié un fichier dans VSCode (en oubliant d'enregistrer la modification) pour ensuite rafraîchir votre page web, lancer le script depuis votre console, etc., et vous dire *Oh non, zut, ça ne marche toujours pas* ? Et cela peut prendre plusieurs minutes d'allers-retours avant que — mince, quel idiot — vous réalisiez que vous n'aviez pas enregistré vos changements. Et c'est encore pire quand vous avez fait un Search & Replace dans plusieurs fichiers ; certains enregistrés, d'autres non — pensez à une session de [curseurs multiples](/blog/vscode-multiple-cursors) répartie sur une dizaine d'onglets. Voyons comment éviter ça. C'est vraiment simple : appuyez sur `CTRL`-`,` (virgule) pour afficher la page des paramètres et commencez à taper `autosave`. Les paramètres concernés s'affichent ; réglez `Files: Auto save` sur `onFocusChange`. ![Page des paramètres](./images/autosave.webp) Ou alors, vous pouvez simplement ajouter la ligne suivante dans votre fichier `settings.json` : **settings.json** ```json { "files.autoSave": "onFocusChange" } ``` > **Vous utilisez un système de versioning, n'est-ce pas ?:** > > Certains n'aiment pas cette fonctionnalité et disent *je veux savoir quand j'enregistre quelque chose* (au cas où je ferais une bêtise, hein) mais, oh, il y a bien un système de versioning comme Git, non ? Donc si vous faites une bêtise, n'enregistrez simplement pas les changements et/ou faites un `revert`. > > Si vous faites partie de ces personnes, essayez l'autosave pendant quelques jours, et vous verrez que le confort est indéniable. Un autre réglage dans le même esprit, de ceux qu'on active une fois et qu'on oublie ensuite : [Sticky scroll in vscode](/blog/vscode-sticky-scroll). --- # L'extension Error Lens pour VSCode > Ne manquez plus jamais un avertissement ! L'extension Error Lens pour VSCode affiche les erreurs, notices et avertissements directement dans la zone d'édition, ce qui vous aide à écrire du meilleur code plus vite et à repérer les fautes de frappe qui provoquent des bugs silencieux. --- ![L'extension Error Lens pour VSCode](/img/v2/vscode_tips.webp) **TL;DR** Cet article présente l'extension VSCode Error Lens, qui affiche les erreurs, avertissements et notices directement dans l'éditeur au lieu de les cacher dans le panneau *Problems* ou la barre de statut, où on ne les voit jamais. L'auteur raconte qu'elle a permis de détecter de nombreux bugs silencieux au bureau — fautes de frappe dans des noms de classes CSS, variables mal orthographiées — simplement en rendant les diagnostics existants impossibles à ignorer. Tout récemment, j'ai découvert [usernamehw.errorlens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) et c'est dommage de ne pas l'avoir vue avant. **Error Lens** est une extension pour VSCode qui affiche les erreurs, notices, avertissements, etc. directement dans l'éditeur, alors qu'ils ne sont généralement accessibles que dans la zone *Problems* de VSCode. *Elle est installée par défaut dans mon [devcontainer PHP](/blog/vscode-devcontainer) : dès que les linters de ce container signalent quelque chose, Error Lens rend l'information impossible à manquer.* Saviez-vous où se trouve cette zone ? Dans la barre de statut de la fenêtre principale de VSCode. L'avez-vous déjà remarquée ? Presque personne ne la voit, et pourtant elle mérite le coup d'œil ! ![Barre de statut](./images/status_bar.webp) On voit ici que j'ai 54 *problems*, aïe. L'image ci-dessous, c'est mon VSCode actuel avec cet article ouvert. Ok, je vois quelques mots soulignés en bleu mais... ce n'est pas vraiment « visible ». Sur un gros fichier, il y a de fortes chances que vous ne le voyiez pas. ![Sans Error Lens](./images/without_error_lens.webp) Maintenant, une fois Error Lens installée, voici le même écran : ![Avec Error Lens](./images/with_error_lens.webp) Toute la ligne a désormais un fond bleu-gris, et je vois aussi dans la minimap (sur le côté droit de l'écran) que j'ai deux blocs bleus, donc deux *problems*. Ça n'a l'air de rien puisque ça ne fait que « montrer » les problèmes dans la zone d'édition, mais au bureau ça a mis en évidence énormément d'erreurs (fautes d'orthographe ou de grammaire dans les textes, fautes de frappe comme `cente` au lieu de `center` pour une classe CSS, une faute dans le nom d'une variable PHP, etc.). Ça a nettement amélioré la qualité de notre code et supprimé quelques bugs silencieux (*Mais pourquoi cette zone de l'écran n'est pas centrée ? J'ai bien ajouté la classe `msg-center`... ah non, j'ai oublié le `r`.*) Dans la même famille « arrêter de perdre des informations dans un panneau que personne n'ouvre », [Todo Tree in VSCode](/blog/vscode-todo-tree) fait pour vos commentaires `TODO` et `FIXME` ce qu'Error Lens fait pour les diagnostics. --- # L'extension CodeSnap pour VSCode > Prenez facilement de belles captures d'écran partageables de vos snippets de code directement dans VS Code avec l'extension CodeSnap. Un guide simple, étape par étape. --- ![L'extension CodeSnap pour VSCode](/img/v2/vscode_tips.webp) **TL;DR** Cet article présente l'extension VSCode CodeSnap, qui génère une capture d'écran joliment mise en forme du code sélectionné directement depuis l'éditeur : lancez la commande `CodeSnap`, sélectionnez les lignes à capturer dans l'aperçu en direct, puis enregistrez l'image obtenue. L'extension [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) va **prendre de belles captures d'écran de votre code dans VS Code** sans effort. *Pratique pour les réseaux sociaux, mais pas pour un article de blog : une image de code ne peut pas être copiée, cherchée ni indexée. Pour ça, utilisez un vrai bloc de code — voir [A component for showing code snippets in a Docusaurus blog](/blog/docusaurus-snippets).* Ouvrez votre fichier dans VS Code, pressez `CTRL`-`SHIFT`-`P` et lancez `CodeSnap`. Il ne vous reste plus qu'à sélectionner des lignes. ![CodeSnap partial example](./images/partial.webp) ## Résultat {#result} Voilà ce que CodeSnap produit à partir d'une sélection de code source PHP — une image mise en forme, prête à être partagée : ![Sample example for CodeSnap](./images/codesnap.webp) Dès que vous avez appelé `CodeSnap`, une fenêtre d'aperçu verticale apparaît. Dans votre code source, sélectionnez une ou plusieurs lignes et CodeSnap met l'aperçu à jour. Quand c'est bon, cliquez simplement sur le bouton `Polaroid` juste au-dessus de l'aperçu, enregistrez l'image et c'est fini — c'est l'exemple PHP montré plus haut. Comme ces captures sont faites pour être partagées, la police que vous utilisez apparaît sur chacune d'elles. Si vous n'en avez pas encore choisi une volontairement, voyez [Using the JetBrains Mono font in vscode](/blog/vscode-jetbrains-font). --- # Exporter la liste des extensions installées dans VSCode > Exportez et partagez la liste de vos extensions VS Code installées avec la commande `code --list-extensions`. Découvrez comment générer directement les commandes d'installation pour configurer facilement une nouvelle machine avec PowerShell ou Linux. --- ![Exporter la liste des extensions installées dans VSCode](/img/v2/vscode_tips.webp) **TL;DR** Cet article montre comment exporter la liste des extensions VSCode installées avec `code --list-extensions`, puis transformer cette liste en commandes d'installation prêtes à l'emploi grâce à un one-liner PowerShell (`% { "code --install-extension $_" }`) ou son équivalent Linux (`xargs -L 1 echo code --install-extension`) — pratique pour partager votre configuration ou préparer une nouvelle machine. Une petite astuce : en lançant `code --list-extensions` dans une console (Linux ou DOS), vous obtenez la liste de toutes les extensions que vous avez installées dans VSCode. Il suffit ensuite de copier/coller cette liste pour l'envoyer à un ami : *Hey, voici les extensions que j'utilise. Peut-être que l'une ou l'autre te sera utile.* *Une meilleure façon de partager une configuration avec toute une équipe : mettez cette liste dans un `devcontainer.json` pour que tout le monde reçoive automatiquement les mêmes extensions ; voir [PHP development in a devcontainer with preinstalled code quality tools](/blog/vscode-devcontainer).* La sortie de `code --list-extensions` ressemblera à ceci : ```bash aaron-bond.better-comments alefragnani.Bookmarks bajdzis.vscode-twig-pack bmewburn.vscode-intelephense-client bobmagicii.autofoldyeah calebporzio.better-phpunit ``` Si vous utilisez PowerShell, vous pouvez aussi lancer `code --list-extensions | % { "code --install-extension $_" }` et la sortie ressemblera alors à ceci : ```bash code --install-extension aaron-bond.better-comments code --install-extension alefragnani.Bookmarks code --install-extension bajdzis.vscode-twig-pack code --install-extension bmewburn.vscode-intelephense-client code --install-extension bobmagicii.autofoldyeah code --install-extension calebporzio.better-phpunit ``` Si vous êtes sous Linux, vous obtenez la même chose avec `code --list-extensions | xargs -L 1 echo code --install-extension` Et c'est bien pratique : en lançant ces commandes, vous pouvez installer directement ces extensions. Si vous cherchez quelques extensions à ajouter à cette liste, j'ai écrit sur [Error Lens](/blog/vscode-errorlens), qui affiche les erreurs directement dans le code au lieu de les cacher dans le panneau Problems, et [Todo Tree](/blog/vscode-todo-tree), qui rassemble tous les `TODO` et `FIXME` de votre code dans une seule vue. --- # Les curseurs multiples dans vscode > Besoin de modifier plusieurs lignes dans VSCode là où le rechercher/remplacer ne suffit pas ? Découvrez la puissante fonctionnalité Multiple Cursors et le raccourci clavier pour faire des modifications en masse instantanément. --- ![Les curseurs multiples dans vscode](/img/v2/vscode_tips.webp) **TL;DR** Cet article présente la fonctionnalité *Multiple Cursors* de VSCode pour éditer en masse plusieurs lignes d'un coup (par exemple transformer un bloc de lignes en liste à puces) quand le rechercher/remplacer ne peut rien faire : sélectionnez les lignes, appuyez sur `Shift`+`Alt`+`I` pour placer un curseur sur chacune, puis modifiez-les toutes en même temps avec la navigation `Home`/`End`/`Ctrl`+`Right`. Une des meilleures fonctionnalités de vscode, c'est *Multiple cursors*. Imaginez un paquet de lignes où vous devez, par exemple, supprimer les deux premiers caractères. Chaque ligne commence par `//` et vous voulez supprimer uniquement ce préfixe, pas les `//` qui pourraient apparaître ailleurs dans la ligne (un rechercher/remplacer ne peut pas faire ça). Autre exemple : vous devez entourer chaque ligne de doubles crochets. Avec vscode, c'est ultra-simple : les curseurs multiples. *Les curseurs multiples brillent pour les modifications ponctuelles et irrégulières. Quand le changement est une règle répétable appliquée à tout un fichier, [Search and replace (or add) using sed](/blog/linux-sed-tips) est le meilleur outil.* Imaginez les lignes ci-dessous et le besoin d'ajouter `*` devant chacune pour en faire une liste d'éléments. Dans cet exemple, je n'ai que six lignes donc oui, c'est faisable à la main, une par une. Imaginez maintenant que vous en ayez cent ou mille. ```markdown Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut purus nec dui tincidunt consequat. Aliquam ac orci vel tellus posuere auctor. Vestibulum auctor lacus eget sagittis laoreet. Phasellus eleifend nulla blandit arcu tempor, sed posuere elit efficitur. Donec blandit erat non placerat cursus. ``` Voici le résultat — chaque ligne transformée en puce en une seule fois : ![Curseurs multiples](./images/make_bullet_list.gif) Voici comment faire : * Sélectionnez toutes les lignes à modifier, * Appuyez sur `SHIFT`-`ALT`-`I` pour activer les curseurs multiples, * Appuyez sur `Home` pour placer les curseurs au début de chaque ligne, * Tapez `*` suivi d'un espace pour transformer la liste de lignes en liste à puces. * Appuyez sur `ESC` pour quitter le mode curseurs multiples. Tant que le mode curseurs multiples est actif, vous pouvez aussi appuyer sur `END` pour aller en fin de ligne, ajouter/supprimer par exemple un caractère, appuyer sur `CTRL`-`RIGHT` pour avancer d'un mot vers la droite, et ainsi de suite. Une option bien pratique. VSCode regorge de ces fonctionnalités natives qu'on ne découvre que par hasard. Deux autres que j'utilise tous les jours : le [sticky scroll](/blog/vscode-sticky-scroll), pour toujours savoir dans quelle fonction ou quel titre on se trouve, et l'[autosave](/blog/vscode-autosave), pour arrêter complètement d'appuyer sur `CTRL`+`S`. --- # Getter et Setter PHP dans VSCode > Implémentez sans effort des Getters et Setters PHP sécurisés dans VSCode. Découvrez les bonnes pratiques pour les propriétés privées de classe et utilisez l'extension recommandée pour les générer instantanément. --- ![Getter et Setter PHP dans VSCode](/img/v2/vscode_tips.webp) **TL;DR** Cet article plaide pour des propriétés de classe PHP privées, accessibles uniquement via des getters/setters (afin de pouvoir valider les valeurs, par exemple refuser un prix négatif), et présente l'extension VSCode `PHP Getters & Setters` qui les génère automatiquement via un clic droit sur la propriété — supprimant l'excuse selon laquelle les écrire serait fastidieux. Parce que vous êtes un excellent développeur, vous n'autorisez personne à accéder directement aux propriétés de votre classe, mais uniquement via un getter ou un setter. Autrement dit, dans votre classe PHP, vous n'avez pas de propriétés `public` (c'est le diable) mais exclusivement des `protected` ou mieux, des `private`. Et grâce aux getters et setters, vous permettez à d'autres objets d'interagir avec vos propriétés privées en les lisant (getters) ou en modifiant leurs valeurs (setters). *[Rector](/blog/php-rector) peut repérer les endroits où une propriété aurait dû être privée dès le départ, et [Tabnine](/blog/vscode-tabnine) devinera souvent le setter complet dès que vous commencez à taper `private function set`.* Certains diront « Oui, mais c'est fastidieux d'écrire ces fonctions ». Pas du tout. ## L'extension en action {#see-the-extension-in-action} Faites un clic droit sur une propriété, choisissez une action, et le code du getter/setter est généré pour vous : ![PHP Getters & Setters](./images/phproberto.webp) ![Getter et Setter PHP dans VSCode](./images/php-getter-setter.gif) Plus d'excuse pour les ignorer — l'extension [PHP Getters & Setters](https://marketplace.visualstudio.com/items?itemName=phproberto.vscode-php-getters-setters) tape à votre place. ## Le mauvais scénario {#the-bad-scenario} **product.php** ```php name='coMPuteR'; $product->price=-10; ``` Par OK, je veux dire : bon, j'ai utilisé un mélange de minuscules et de majuscules pour le nom et, bon, j'ai dit que je vendais des ordinateurs à -10 €. C'est OK parce que je ne fais aucune validation sur les valeurs, et c'est très mauvais. En utilisant un setter (une fonction appelée quand la propriété est initialisée), je peux vérifier la valeur et corriger la casse par exemple, ou refuser un prix négatif. ## La bonne approche {#the-good-way} Créons notre classe avec des propriétés privées : **product.php** ```php setName('coMPuteR'); $product->setPrice(-10); ``` Et le code qui utilise la classe : **product.php** ```php //highlight-next-line public function getName(): string { return $this->name; } //highlight-next-line public function setName(string $name): self { // Force the product name to be written in lowercase $this->name = strtolower($name); return $this; } //highlight-next-line public function getPrice(): float { return $this->price; } //highlight-next-line public function setPrice(float $price): self { if ($price < 0) { throw new \Exception("Negative prices are not correct; please review your code"); } $this->price = $price; return $this; } ``` Laisser l'éditeur générer ce code répétitif est une façon de garder votre PHP propre. Le laisser *vérifier* votre code en est une autre : [PHP development in a devcontainer with preinstalled code quality tools](/blog/vscode-devcontainer) met en place un environnement prêt à l'emploi avec les linters et l'analyse statique déjà configurés. --- # Travailler avec les regions dans VSCode > Maîtrisez le code folding dans VSCode avec les regions. Apprenez à les utiliser en PHP et à activer le support des regions pour les fichiers non pris en charge comme un Dockerfile, avec une simple extension. --- ![Travailler avec les regions dans VSCode](/img/v2/vscode_tips.webp) **TL;DR** Cet article montre comment utiliser les tags de folding `region`/`endregion` dans VSCode (par exemple en PHP) pour replier des blocs logiques de code, et comment ajouter ce même support de folding aux fichiers que VSCode ne gère pas nativement, comme un Dockerfile, grâce à l'extension `maptz.regionfolder` et à une entrée dans `.vscode/settings.json`. Il présente aussi l'extension `Auto Fold` pour replier automatiquement les regions à l'ouverture d'un fichier. VSCode prend en charge les tags `region` et `endregion`, mais pas partout. Ces deux tags spéciaux s'écrivent différemment selon le langage utilisé, mais ils ont toujours le même objectif : vous permettre de replier une partie du code. « Pas partout » signifie, par exemple, que VSCode ne gère pas le code folding par défaut dans un Dockerfile. Voyons comment résoudre ça. *Un fichier bien replié, c'est une chose ; un fichier bien organisé, c'en est une autre. Pour Bash, [Linux - Sort functions in a Bash script](/blog/linux-sort-functions-in-script) vérifie que vos fonctions sont déclarées dans un ordre prévisible.* ## Les regions en action {#regions-in-action} ![VSCode - Regions folding](./images/regions.gif) Voilà ce que vous apportent les tags `region`/`endregion` : des blocs logiques entiers se replient sur une seule ligne, et vous voyez la structure d'un fichier au lieu de le parcourir en scrollant. ## Code folding en PHP {#code-folding-in-php} Prenons l'exemple suivant, très basique (*exemple très court, à but illustratif*) : **my\_class.php** ```php db->getQuery(true); $query->select('note'); $query->from('#__content_ratings'); $query->where('content_id = 8'); $this->db->setQuery($query); $notes = $this->db->loadColumn(); return $notes; } } ``` On identifie clairement trois blocs : la préparation de la query, son exécution et le retour des données. Avec les regions, on peut faire ceci — les deux lignes montrées ci-dessus (`// #region`, `// #endregion`) sont ce qui produit le comportement de repli/dépli du gif : **my\_class.php** ```php db->getQuery(true); $query->select('note'); $query->from('#__content_ratings'); $query->where('content_id = 8'); //endregion //region 2. Run the query $this->db->setQuery($query); $notes = $this->db->loadColumn(); //endregion //region 3. Prepare resulting array return $notes; //endregion } } ``` > **Évitez les fonctions de plus de 60 lignes:** > > Les regions sont prises en charge par un très grand nombre de langages, mais ne faites pas l'erreur de croire que ça vous autorise à écrire des fonctions de plusieurs dizaines de lignes. Ce n'est pas l'idée ! Si vous avez de longues fonctions, vous devez les découper. Vous devez créer des fonctions plus petites, plus spécialisées. Nous avons déjà abordé ce point dans un [article précédent](/blog/vscode-php-refactoring). ## Que faire quand VSCode ne gère pas ces tags par défaut ? {#what-to-do-when-vscode-didnt-support-these-tags-by-default} Regardons le Dockerfile suivant : **Dockerfile** ```docker # syntax=docker/dockerfile:1 # Source https://docusaurus.community/knowledge/deployment/docker/?package-managers=yarn ARG HOMEDIR=/opt/docusaurus ARG TARGET=/development # The user and group ID of the user to create ARG DOCKER_UID=1000 ARG DOCKER_GID=1000 ARG USERNAME=christophe # Stage 1: Base image. FROM node:lts AS base # Disable color output from yarn to make logs easier to read. ENV FORCE_COLOR=0 # Enable corepack. RUN corepack enable ARG TARGET RUN /bin/bash -c "echo \"PS1='\n\e[0;33m🐳 (${TARGET})\e[0m - \e[0;36m$(whoami)\e[0m \w # '\" >> ~/.bashrc " # -------------------------------------------------------------------- # Stage 2a: Development mode. FROM base AS development ARG HOMEDIR RUN apt-get -y update \ && apt-get install --yes --no-install-recommends git \ && git config --global --add safe.directory ${HOMEDIR} \ && rm -rf /var/lib/apt/lists/* # We'll create a new user with the same uid/gid than ours, on our host machine. ARG DOCKER_UID ARG DOCKER_GID ARG USERNAME # hadolint ignore=DL3008 RUN set -e -x \ && if [ ! "$DOCKER_UID" = "1000" ]; then \ groupadd --gid ${DOCKER_GID} "${USERNAME}" \ && useradd --home-dir /home/"${USERNAME}" --create-home --uid ${DOCKER_UID} \ --gid ${DOCKER_GID} --shell /bin/sh --skel /dev/null "${USERNAME}" ; \ fi USER "${USERNAME}" # Set the working directory to `/opt/docusaurus`. WORKDIR "${HOMEDIR}" # -------------------------------------------------------------------- # Stage 2b: Production build mode. FROM base AS building_production ARG TARGET # Target is set in the .env file to "development" or "production" ENV NODE_ENV="${TARGET}" # Install the latest version of Docusaurus ARG HOMEDIR RUN npx create-docusaurus@latest "${HOMEDIR}/" classic --javascript \ # Remove dummy files like dummy blog, docs, ... that were added during the installation && rm -rf "${HOMEDIR}/blog" "${HOMEDIR}/docs" "${HOMEDIR}/src" \ && chown -R node:node "${HOMEDIR}/" # Set the working directory to `/opt/docusaurus`. WORKDIR "${HOMEDIR}" # We need our package.json / package.lock file before running yarn install COPY package.* . # Install dependencies with `--immutable` to ensure reproducibility. RUN yarn install --immutable # Copy over the source code. COPY . "${HOMEDIR}/" # Build the static site (generated files will be created in /opt/docusaurus/build) RUN yarn build # -------------------------------------------------------------------- # Stage 3: Serve with nginx FROM nginx:stable-alpine3.19-perl AS production RUN set -e -x; \ apk update --no-cache && apk add --no-cache bash \ && rm -rf /var/cache/apk/* ARG TARGET RUN /bin/sh -c "echo \"PS1='\n\e[0;33m🐳 (${TARGET})\e[0m - \e[0;36m$(whoami)\e[0m \w # '\" >> ~/.bashrc " # Copy the Docusaurus build output. ARG HOMEDIR COPY --from=building_production "${HOMEDIR}/build /usr/share/nginx/html" WORKDIR /usr/share/nginx/html ``` Ouvrir un tel fichier dans VSCode n'offre aucune fonction de repli/dépli et il faudra scroller beaucoup. Et on n'a aucune vue d'ensemble de la structure. ![Pas de support des regions dans VSCode pour un Dockerfile](./images/dockerfile-before.webp) La solution passe par l'installation d'une extension spécialisée : . Et aussi par l'ajout de ces réglages dans votre fichier `.vscode/settings.json` : **.vscode/settings.json** ```json { "maptz.regionfolder": { "[dockerfile]": { "foldEnd": "\\# endregion", "foldEndRegex": "\\# endregion[\\s]*(.*)$", "foldStart": "\\# region [NAME],", "foldStartRegex": "\\# region[\\s]*(.*)$" } } } ``` Revenez à l'onglet de VSCode où votre Dockerfile est ouvert, pressez `CTRL`+`P` et lancez `Developer: Reload Window` pour recharger la fenêtre une fois l'extension activée, et tadaaa ! ![Maintenant, VSCode gère les regions dans un Dockerfile](./images/dockerfile-after.webp) > **Non, ce n'est pas juste une astuce visuelle:** > > Quand vous travaillez sur des fichiers très longs comme, pour moi, un Dockerfile de plus de 900 lignes, il est vraiment indispensable de pouvoir disposer de regions à réduire/étendre. > > Non seulement c'est plus facile à lire, mais ça facilite aussi l'enchaînement des « stages » (quand on programme un Dockerfile multistage). ## L'extension Auto fold {#auto-fold-extension} Il existe des extensions comme [Auto Fold](https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah) qui repliient automatiquement les regions à l'ouverture d'un fichier. L'idée est la suivante : quand vous ouvrez un fichier contenant beaucoup de méthodes, toutes les fonctions sont d'abord *repliées* (on ne voit que le nom de la fonction, pas son contenu). Vous voyez ainsi directement la structure du fichier, la liste des fonctions, etc., sans avoir à scroller beaucoup. Si vous installez [Auto Fold](https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah), vous devez aussi ajouter le réglage `"autofold.default": 1,` dans votre fichier `settings.json`. Si vous ne savez pas comment faire, pressez simplement `CTRL`+`,` (la virgule) pour afficher la page `Settings`, puis commencez à taper `autofold` pour accéder au réglage. Désormais, si vous ouvrez un fichier, son contenu sera automatiquement replié. ![Autofold](./images/autofold.webp) ## Conclusion {#conclusion} Deux tags, `// #region` et `// #endregion` (adaptés à la syntaxe de commentaire de votre langage), suffisent à replier n'importe quel bloc de code — nativement dans la plupart des langages, et facilement ajoutables à ceux que VSCode ne gère pas d'origine, comme un Dockerfile. --- # Utiliser la police JetBrains Mono dans vscode > Améliorez votre expérience de code ! Apprenez à installer la police JetBrains Mono, gratuite et très lisible, et à activer de superbes ligatures dans VSCode grâce à ce guide de configuration rapide. --- ![Utiliser la police JetBrains Mono dans vscode](/img/v2/vscode_tips.webp) **TL;DR** Cet article montre comment installer la police gratuite JetBrains Mono (qui distingue clairement O/0 et I/l, et gère les ligatures de code) et comment configurer VSCode pour l'utiliser via les paramètres `editor.fontFamily` et `editor.fontLigatures` dans `settings.json`. Comme vous le savez, VSCode est très personnalisable : vous pouvez installer [une multitude d'extensions](/blog/vscode-export-list-of-extensions), changer le thème par défaut et utiliser la police de votre choix. *La même police, installée en variante Nerd Font, est ce qui permet aux icônes de [Powerlevel10k](/blog/powerlevel10k_sandbox) et de [eza](/blog/linux-eza) de s'afficher correctement dans votre terminal — ça vaut donc la peine de la configurer aussi dans [Windows Terminal](/blog/windows-terminal).* Jetez donc un œil à la police **JetBrains Mono**. C'est une police gratuite, pour un usage commercial comme non commercial. ## Pourquoi cette police {#why-this-font} * Elle est gratuite, pour un usage commercial comme non commercial. * Elle est particulièrement lisible : un O (la lettre) et un 0 (le chiffre), un I (i majuscule) et un l (L minuscule) sont clairement distincts — plus besoin de devineriez dans un terminal ou un diff. * Elle propose de belles ligatures : les séquences comme `!=`, `=>` ou `->` sont affichées comme un seul glyphe, plus propre, au lieu de caractères séparés. Rendez-vous sur pour voir le potentiel de cette police. ## Installer la police JetBrains Mono {#install-jetbrains-mono-font} C'est simple : allez sur et cliquez sur le bouton `Download font`. Une fois le téléchargement terminé, allez dans votre dossier de téléchargements, décompressez le fichier puis entrez dans le dossier `JetBrainsMono` qui vient d'être créé et allez dans `fonts/ttf`. Vous y trouverez plusieurs sous-dossiers. Sous Windows, ouvrez simplement le premier dossier, sélectionnez tous les fichiers et faites un clic droit. Dans le menu contextuel, choisissez `Install` comme ci-dessous : ![Installer la police JetBrains Mono](./images/install_font.webp) ## Configurer VSCode pour utiliser la police JetBrains Mono {#configure-vscode-to-use-jetbrains-mono-font} * Appuyez sur `CTRL`+`,` pour ouvrir la page des paramètres * Dans la section `Text Editor --> Font`, saisissez `JetBrains Mono` comme famille de police. Mais la méthode la plus simple est celle-ci : * Appuyez sur `CTRL`+`,` pour ouvrir la page des paramètres * En haut à droite de l'écran, repérez le bouton `Open Settings (JSON)` et cliquez dessus ![Ouvrir settings.json](./images/open_settings_json.webp) * Puis copiez-collez ces entrées : **.vscode/settings.json** ```json { "editor.fontFamily": "JetBrains Mono", "editor.fontSize": 14, "editor.fontLigatures": true } ``` Enregistrez, fermez VSCode et rouvrez-le (ou appuyez simplement sur `CTRL`+`SHIFT`+`P` et lancez `Developer: Reload Window`) ## Conclusion {#conclusion} Installez la police une fois au niveau du système, ajoutez deux lignes à `settings.json`, et chaque onglet de l'éditeur profite dès lors de formes de caractères plus claires et des ligatures. Maintenant que votre éditeur a l'allure que vous voulez, [CodeSnap](/blog/vscode-codesnap) vous permet de transformer n'importe quelle sélection en capture d'écran partageable qui met en valeur cette police. --- # Todo Tree dans VSCode > N'oubliez plus jamais vos TODO et FIXME ! Utilisez l'extension VSCode Todo Tree pour rassembler toutes les annotations de code comme TODO, FIXME et TEMPORARY dans un tableau de bord facile à suivre. --- ![Todo Tree dans VSCode](/img/v2/vscode_tips.webp) **TL;DR** Ne perdez plus jamais la trace de vos annotations de code. Cet article présente l'extension « Todo Tree » pour Visual Studio Code, un outil puissant qui parcourt tout votre workspace à la recherche de commentaires comme `TODO`, `FIXME` et d'autres tags personnalisés. Elle les organise ensuite dans une vue arborescente pratique, dans la barre latérale, ce qui vous permet de voir d'un coup d'œil toutes vos tâches en attente et de naviguer directement vers le code concerné en un clic. Une extension essentielle pour rester organisé et ne laisser passer aucune tâche. Quand vous travaillez sur une grosse base de code, vous finirez tôt ou tard par tomber sur des annotations du type `@TODO` ou `// TODO`, laissées là par quelqu'un (peut-être vous) comme pense-bête : « Ne pas oublier de (faire quelque chose)... ». Et, à coup sûr, ces todos restent là des mois ou des années parce que, eh oui, le programmeur a oublié qu'ils étaient là. Personnellement, il m'arrive de travailler sur du code et de commenter l'appel à une méthode ou à un bloc précis. Souvent pendant une session de debug (par exemple sur des scripts Bash sous Linux) mais, attention, il ne faut pas oublier de retirer les commentaires et de remettre le code dans son état d'origine. Dans ce cas, j'ajoute un commentaire comme `// TEMPORARY` juste avant la première ligne commentée. *Un tableau de bord vous aide à vous souvenir ; un hook, lui, vous arrête. [Git - pre-commit-hooks](/blog/git-precommit) peut refuser un commit qui contient encore un marqueur `TEMPORARY`.* L'idée derrière l'extension vscode `Todo Tree` (la page de téléchargement se trouve ici : ) est de rassembler ce type d'annotations et d'afficher un tableau de bord avec tous les `TODOS`, `TOFIX`, ... et les vôtres aussi. Une fois l'extension installée, une nouvelle icône apparaît dans votre barre latérale gauche (voir le repère 1. sur l'image ci-dessous). En cliquant dessus, vous obtenez des entrées comme `BUG`, `CHECK`, `FIXME`, `TODO`, ... et en cliquant sur une entrée, vous êtes directement redirigé vers l'endroit où se trouve le todo dans votre base de code. ![Todo Tree dans VSCode](./images/todo-tree.webp) Grâce à ce récapitulatif, vous n'oublierez plus jamais vos todos, vos bidouilles temporaires, les choses qu'il reste à corriger, ... Je vous recommande la lecture de l'article pour en savoir plus. Vraiment une chouette extension pour ne plus jamais oublier vos annotations TODO, TOFIX, TEMPORARY, ... Si l'idée de faire remonter ce que votre éditeur garde normalement hors de vue vous plaît, jetez aussi un œil à [Error Lens](/blog/vscode-errorlens) : il fait la même chose pour les erreurs et les avertissements, directement dans la zone d'édition. Et une fois que vous aurez réuni quelques extensions indispensables, [exporter votre liste d'extensions](/blog/vscode-export-list-of-extensions) vous permettra de les réinstaller facilement sur votre prochaine machine. --- # Ai-je besoin de VSCode sur ma machine pour l'utiliser ? > Découvrez comment lancer VSCode dans votre navigateur avec Docker et l'image `code-server`. Éditez votre code à distance sans installer VSCode sur votre machine locale. --- ![Ai-je besoin de VSCode sur ma machine pour l'utiliser ?](/img/v2/vscode_tips.webp) **TL;DR** Cet article vous montre comment faire tourner un environnement VS Code complet directement dans votre navigateur, avec l'image Docker `code-server`. C'est la solution parfaite si vous devez coder sur une machine où VS Code n'est pas installé. Le guide fournit une seule commande `docker run` et détaille chaque flag : comment monter votre projet, conserver la configuration et éviter les problèmes de permissions de fichiers en mappant votre utilisateur local. Vous apprendrez où trouver le mot de passe généré automatiquement et à démarrer avec votre éditeur dans le navigateur en quelques minutes. Un jour, peut-être, nous n'aurons plus besoin d'installer un système d'exploitation : juste Docker sur notre machine. Bon, ce ne sera pas pour demain, mais en ce qui concerne VSCode, oui, c'est déjà possible. Vous avez bien lu : il existe une image Docker qui n'est rien d'autre que VSCode dans un navigateur. C'est inutile si vous êtes un gros utilisateur de VSCode (= vous l'avez installé sur chacun de vos ordinateurs), mais il y a des situations où, par exemple, vous devez travailler sur un autre ordinateur (le vôtre est en réparation ou vous êtes en déplacement sans votre machine) et là, l'image Docker de VSCode sera bien pratique. *Une troisième option, quand vous avez bien VSCode en local mais que le code se trouve ailleurs : [SSH Remote development with VSCode](/blog/vscode-remote-ssh).* Ou alors... vous n'êtes pas encore convaincu par VSCode et vous voulez juste l'essayer. Si tout ce dont vous avez besoin est d'éditer un fichier ou deux dans un repository GitHub, il existe une option encore plus légère qui ne nécessite pas Docker du tout : voyez [Start vscode from github.com](/blog/vscode-github-dev). Une commande `docker run codercom/code-server`, et voici le résultat : un VS Code complet, dans votre navigateur. ![VScode dans le navigateur](./images/code_server.webp) ## Pourquoi ça fonctionne {#why-it-works} * Aucune installation locale de VS Code nécessaire — l'éditeur tourne dans le container, votre navigateur ne sert que d'affichage. * La configuration est stockée sur votre host (`~/.config/`), pas dans le projet : elle survit aux containers et est partagée si vous lancez code-server pour plusieurs projets. * L'utilisateur du container est mappé sur le vôtre (`-u "$(id -u):$(id -g)"`), donc les fichiers créés ou modifiés depuis le navigateur conservent vos permissions habituelles — pas de fichiers appartenant à `root` à nettoyer ensuite. ## Installation {#installation} En exécutant l'instruction ci-dessous, vous allez télécharger (une seule fois) l'image Docker `codercom/code-server` puis lancer un container en tant que daemon. ```bash $ {`docker run -d --name code-server -p 8080:8080 \ -v "\${HOME}/.config:/home/coder/.config" \ -v ".:/home/coder/project" \ -u "\$(id -u):\$(id -g)" \ -e "DOCKER_USER=\${USER}" \ codercom/code-server:latest`} ``` Une fois la commande passée avec succès, ouvrez simplement votre navigateur et rendez-vous sur `http://127.0.0.1:`8080 pour démarrer VSCode dans le navigateur. > **Le `docker run` expliqué:** > > * `-d` : le code-server tournera comme un service daemon, > * `-p > 8080 > :8080` : on expose le service sur notre port 8080, > * `--name` : c'est juste pour donner un nom parlant à notre container (optionnel), > * `-v "${HOME}/.config:/home/coder/.config"` : sauvegarde la configuration de code-server sur votre host, dans votre répertoire personnel. > * `-v ".:/home/coder/project"` : monte votre répertoire courant dans le container pour que vous puissiez y travailler dans code-server, > * `-u "$(id -u):$(id -g)"` : mappe l'utilisateur utilisé dans le container avec l'utilisateur local, ainsi les fichiers/dossiers créés/modifiés dans le container auront exactement les mêmes permissions et > * `-e "DOCKER_USER=${USER}"` : si vous exécutez `echo ${USER}` sur votre host, vous verrez apparaître votre nom Linux (`christophe` pour moi) ; ici, il s'agit donc juste d'informer le container de votre nom. La configuration de code-server est donc stockée dans votre répertoire personnel, dans le dossier `~/.config/`. Ainsi, les fichiers de configuration ne font pas partie de votre projet courant et la configuration sera la même si vous lancez code-server à plusieurs endroits, pour différents projets. ## Récupérer le mot de passe {#getting-the-password} En ouvrant `http://127.0.0.1 : 8080`, vous obtiendrez cet écran : > Screenshot — http\://127.0.0.1:8080 > > ![Demande de mot de passe](./images/prompt_for_password.webp) Retournez dans votre console et exécutez `cat ${HOME}/.config/code-server/config.yaml` pour découvrir la configuration de code-server. Vous verrez quelque chose comme ceci : ```bash $ {`cat \${HOME}/.config/code-server/config.yaml`} bind-addr: 127.0.0.1:8080 auth: password password: d8345b9abff6c01d044fac59 cert: false ``` Copiez/collez le mot de passe dans le formulaire, validez et tadaaa — le même VS Code dans le navigateur que celui déjà montré en haut de cet article. ## Conclusion {#conclusion} Une image Docker, une commande `docker run`, et un VS Code complet est disponible depuis n'importe quel navigateur — pas d'installation locale, pas de configuration perdue, pas de casse-tête de permissions sur les fichiers que vous éditez. Poursuivez avec la documentation officielle : ou pour plus d'informations. ---