# 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. ---  **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}  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.  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 !  > **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é.  ## 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.