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.

5 août 2024 · 4 minutes de lecture

Voir la source

Christophe

Amoureux de Markdown, WSL et Docker ~ Curieux insatiable.

Cet article existe aussi en anglais — lire la version originale.

Traduction automatique

Cette traduction a été produite par une IA. Elle peut contenir des contresens ou des maladresses, en particulier sur les termes techniques. En cas de doute, consultez l'article de référence en anglais — c'est lui qui fait foi.

Cet article a plus d'un an, mais il a été relu le 30 juillet 2026 — son contenu est toujours exact.

Cet article fait partie de la série VSCode — astuces, extensions et raccourcis :

Travailler avec les regions dans VSCode

⚡

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 - Trier les fonctions dans un script Bash vérifie que vos fonctions sont déclarées dans un ordre prévisible.

Les regions en action

VSCode - Regions folding

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

Prenons l'exemple suivant, très basique (exemple très court, à but illustratif) :

<?php

class MyClass
{
    public function onContentPrepare()
    {
        $query = $this->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;
    }
}

Cette classe définit une méthode qui construit et exécute une requête de base de données pour récupérer toutes les notes associées au contenu ID 8 depuis la table content_ratings. La méthode retourne les résultats sous forme de colonne.

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 :

<?php

class MyClass
{
    public function onContentPrepare()
    {
        //region 1. Prepare the SQL query
        $query = $this->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
    }
}

Cette méthode onContentPrepare récupère depuis la base de données toutes les notes associées au contenu avec l'ID 8, puis les retourne sous forme de tableau. Elle construit une requête SQL en chaînant des appels de méthode, l'exécute via l'objet db, et retourne les colonnes récupérées.

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

Que faire quand VSCode ne gère pas ces tags par défaut ?

Regardons le Dockerfile suivant :

# 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

Ce Dockerfile construit une image Docker multi-étapes pour Docusaurus : d'abord une image de base Node.js avec corepack activé, ensuite une étape développement qui crée un utilisateur personnalisé, puis une étape de construction qui installe et compile le site Docusaurus, et enfin une étape production qui sert les fichiers compilés avec nginx.

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

La solution passe par l'installation d'une extension spécialisée : https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder.

Et aussi par l'ajout de ces réglages dans votre fichier .vscode/settings.json :

{
    "maptz.regionfolder": {
        "[dockerfile]": {
            "foldEnd": "\\# endregion",
            "foldEndRegex": "\\# endregion[\\s]*(.*)$",
            "foldStart": "\\# region [NAME],",
            "foldStartRegex": "\\# region[\\s]*(.*)$"
        }
    }
}

Ce fichier de configuration définit les règles de repliage de code (folding) pour les Dockerfiles dans l'extension VS Code maptz.regionfolder. Il spécifie les marqueurs de début et fin de région ainsi que les expressions régulières correspondantes pour permettre au éditeur de reconnaître et de replier des blocs de code commenté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

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

Il existe des extensions comme Auto Fold 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, 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

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.

Cet article fait partie de la série VSCode — astuces, extensions et raccourcis :