# VSCode - Tips, extensions and shortcuts A series of 13 article(s), in reading order. # Markdown folding not working > Fix your VS Code Markdown code folding issue! Learn why folding may not be working and discover the simple solution to enable code blocks and headings folding for a cleaner editing experience. --- ![Markdown folding not working](/img/v2/vscode_tips.webp) **TL;DR** This article fixes a case where code folding doesn't work in VSCode's Markdown editor: make sure the built-in `@builtin Markdown Language Features` extension is enabled. > In case code folding is not working in markdown mode as illustrated below, make sure the `@builtin Markdown Language Features` addon is enabled. *That same built-in extension powers [sticky scroll](/blog/vscode-sticky-scroll) in Markdown files, which stops working for the same reason.* ![code\_folding](./images/code_folding.gif) ![Markdown Language Features](./images/markdown_language_features.webp) Once folding works again, you may want more control over *what* gets folded: [Working with regions in VSCode](/blog/vscode-regions) shows how to define your own foldable blocks, even in file types VSCode doesn't support natively. --- # Start vscode from github.com > Did you know you can open VSCode for any GitHub repository instantly? Discover the secret shortcut—just press the dot key (.). Start coding online now! --- ![Start vscode from github.com](/img/v2/vscode_tips.webp) **TL;DR** This article shares a quick trick: pressing the `.` key on any GitHub repository page (or swapping `.com` for `.dev` in the URL) opens that repository in VSCode online (vscode.dev/github.dev) — handy for making a quick edit or fixing a typo from a phone or a machine without a local clone. It's not something new, but it's probably not known well enough: by browsing **any** GitHub repository like e.g. , you can just press `.` (the dot key) on your keyboard to start VS Code online to see the current repository in vscode.dev. Here is the blog in vscode.dev: . *This is the lightest of three ways to code without a local VSCode. The two others: [a full VSCode in your browser via Docker](/blog/vscode-code-server) and [SSH Remote development with VSCode](/blog/vscode-remote-ssh).* > **Change the domain extension to github.dev:** > > You can achieve the same result by updating the URL and changing the `.com` extension to `.dev` ## But what's the point? Why would I need it Imagine you are not at home, on your own computer, and you want to change your repository? But also that you are on a bus/train/plane and want to correct a typo you've just seen. You may also want to make a very small update like changing your readme.md file. It is really faster to do it online than having to clone/update the project on your computer, make the change, add/commit/push it. This trick is limited to GitHub repositories though. If you need a real, full editor on a machine where VSCode isn't installed, run it as a container instead: [Do I need VSCode on my machine to use it?](/blog/vscode-code-server). ![Using a smartphone](./images/smartphone_view.webp) Just browse to your repository using your smartphone, nothing more than using a basic web browser, change the extension to `.dev` and bingo, you can start editing your repository (or the one of someone else if you want to suggest a Pull request (aka a `PR`)). Read more on or . --- # Sticky scroll in vscode > Enable VS Code's powerful Sticky Scroll feature! Keep contextual lines (like class, function, or section headings) pinned to the top of your editor for effortless code and document navigation. --- ![Sticky scroll in vscode](/img/v2/vscode_tips.webp) **TL;DR** This article shows VSCode's Sticky Scroll feature, which pins contextual lines (class name, function name, current heading level in Markdown, etc.) to the top of the editor as you scroll, so you always know where you are in the file. It's enabled by adding `"editor.stickyScroll.enabled": true` to `settings.json`. > VS Code has recently added a really useful new feature: sticky scroll. This function allows you to scroll through a document such as a [Markdown file](/blog/vscode-markdown-code-folding), source code written in PHP or JavaScript, or any other supported language and, as you scroll, pin contextual information such as the name of the class, the name of the function, the start of the loop, etc. in the upper part of the editor. *It pairs nicely with code folding: [Working with regions in VSCode](/blog/vscode-regions) lets you collapse whole blocks, sticky scroll keeps you oriented in the ones you left open.* This is really very practical. See the illustration below (*image coming from *) ![Sticky scroll in vscode](./images/sticky_scroll.gif) Below is an example taken from this blog: ![Sticky scroll in markdown](./images/sticky_scroll_markdown.webp) As you can see, I have opened a markdown file and I am showing part of the article around line 878. Pay attention to the first 'stuck' lines in the window: VS Code is showing me my heading 1, my heading 2 and my heading 3 so I know the context. The displayed lines are located in the chapter `Make it easy`. That's pretty cool! To enable the feature, edit your `settings.json` file and add this entry: **settings.json** ```json "editor.stickyScroll.enabled": true ``` Sticky scroll helps you know *where* you are in a long file. The other half of the problem is hiding what you don't need right now, and that's what [Working with regions in VSCode](/blog/vscode-regions) is about. --- # Autosave feature in VSCode > Tired of forgetting to save files in VS Code? Learn how to easily enable the Autosave feature, set it to onFocusChange, and never lose unsaved changes again! --- ![Autosave feature in VSCode](/img/v2/vscode_tips.webp) **TL;DR** This article shows how to enable VSCode's Autosave feature, either through the Settings UI (`Files: Auto save` set to `onFocusChange`) or by adding the corresponding line to `settings.json`, so changes are saved automatically whenever the editor loses focus instead of relying on manual `Ctrl+S`. How many times have you modified a file in VSCode (and forgotten to save the modification) in order to refresh it from your web page, run the script from your console, etc., and then thought *Oh no, damn, it still doesn't work*? And it can take several minutes of back and forth before — damn it, silly me — you realize you didn't save your changes. And even more so when you've done a Search & Replace in several files; some having been saved and others not — think of a [multiple cursors](/blog/vscode-multiple-cursors) session spread across a dozen tabs. Let's see how to avoid this. It's really easy: press `CTRL`-`,` (comma) to show the settings page and start to type `autosave`. The concerned settings will be displayed and set `Files: Auto save` on `onFocusChange`. ![Settings page](./images/autosave.webp) Or, you can also simply add the following line in your `settings.json` file: **settings.json** ```json { "files.autoSave": "onFocusChange" } ``` > **You're using a versioning system, right?:** > > Some people don't like this feature and say *I want to be aware when I save something* (in case I do something stupid eh) but, oh, there's a versioning system like Git isn't there? So if you do something stupid, just don't save the changes and/or do a `revert`. > > If you're one of these people, try out the autosave function for a few days, and you'll see that it brings undeniable comfort. Another setting in the same spirit, one you enable once and never think about again: [Sticky scroll in vscode](/blog/vscode-sticky-scroll). --- # Error Lens addon for VSCode > Never miss a warning again! The VSCode Error Lens addon shows errors, notices, and warnings directly in your editor's coding area, helping you write better code faster and catch typos that lead to silent bugs. --- ![Error Lens addon for VSCode](/img/v2/vscode_tips.webp) **TL;DR** This article introduces the Error Lens VSCode extension, which surfaces errors, warnings, and notices directly inline in the editor instead of hiding them in the easy-to-miss Problems panel/status bar. The author reports it caught many silent bugs at work — typos in CSS class names, misspelled variables — simply by making existing diagnostics impossible to overlook. Very recently I discovered [usernamehw.errorlens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) and it's a shame I hadn't seen it before. **Error Lens** is an addon for VSCode which will show errors, notices, warnings, etc. in the editor, which are generally only accessible in the *Problems* area of VSCode. *It's installed by default in my [PHP devcontainer](/blog/vscode-devcontainer): as soon as the linters of that container report something, Error Lens makes it impossible to miss.* Did you know where that area is? In the status bar of the main VSCode window. Did you see it? Hardly anyone notices it, and yet it should be seen! ![Status bar](./images/status_bar.webp) We can see here that I have 54 *problems*, ouch. The image below is my current VSCode with this blog post opened. Ok, I can see some words underlined in blue but ... this is not really "visible". On a big file, chances are big that you don't see it. ![Without Error Lens](./images/without_error_lens.webp) Now, once Error Lens has been installed, here is the same screen: ![With Error Lens](./images/with_error_lens.webp) The entire line now has a blue-grey background, and I can also see in the minimap (on the right side of the screen) that I have two blue blocks, so two *problems*. This doesn't seem like much since it only "shows" the problems in the editing area, but at the office it has highlighted a huge number of errors (spelling or grammatical errors for text, typos like `cente` instead of `center` for a CSS class, a typo in the name of a PHP variable, etc.). This has greatly improved the quality of our code and removed some silent bugs (*But why isn't this area of the screen centered? But I did add the `msg-center` class ... oh no, I forgot the `r`.*) In the same "stop losing things in a panel nobody opens" family, [Todo Tree in VSCode](/blog/vscode-todo-tree) does for your `TODO` and `FIXME` comments what Error Lens does for diagnostics. --- # CodeSnap addon for VSCode > Easily take beautiful, shareable screenshots of your code snippets right inside VS Code with the CodeSnap extension. A simple, step-by-step guide. --- ![CodeSnap addon for VSCode](/img/v2/vscode_tips.webp) **TL;DR** This article introduces the CodeSnap VSCode extension, which generates a nicely styled screenshot of selected code directly from the editor: run the `CodeSnap` command, select the lines to capture in the live preview, then save the resulting image. The extension [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) will **take beautiful screenshots of your code in VS Code** without effort. *Handy for social media, but not for a blog article: an image of code can't be copied, searched or indexed. For that, use a real code block — see [A component for showing code snippets in a Docusaurus blog](/blog/docusaurus-snippets).* Open your file in VS Code, press `CTRL`-`SHIFT`-`P` and run `CodeSnap`. You just need to select lines now. ![CodeSnap partial example](./images/partial.webp) ## Result That's what CodeSnap produces from a selection of PHP source code — a styled, shareable image: ![Sample example for CodeSnap](./images/codesnap.webp) As soon as you've called `CodeSnap`, a vertical preview window will appear. In your source code, select one or more lines and CodeSnap will update the preview. When you're done, just click on the `Polaroid` button just above the preview, save the image and it's done — that's the PHP example shown above. Since these screenshots are meant to be shared, the font you use shows up in every one of them. If you haven't picked one deliberately yet, see [Using the JetBrains Mono font in vscode](/blog/vscode-jetbrains-font). --- # Export the list of extensions you've installed in VSCode > Export and share your list of installed VS Code extensions using the `code --list-extensions` command. Learn how to generate direct installation commands for easy setup on a new machine using PowerShell or Linux. --- ![Export the list of extensions you've installed in VSCode](/img/v2/vscode_tips.webp) **TL;DR** This article shows how to export the list of installed VSCode extensions with `code --list-extensions`, and turn that list into ready-to-run install commands using a PowerShell one-liner (`% { "code --install-extension $_" }`) or a Linux equivalent (`xargs -L 1 echo code --install-extension`) — handy for sharing your setup or provisioning a new machine. A small tip: by running `code --list-extensions` in a console (Linux or DOS), you'll get the list of all extensions you've installed in VSCode. Now, just copy/paste that list and you can send it to a friend: *Hey, here are the extensions I use. Maybe one or the other will be useful to you.* *A better way to share a setup with a whole team: put that list in a `devcontainer.json` so everyone gets the same extensions automatically; see [PHP development in a devcontainer with preinstalled code quality tools](/blog/vscode-devcontainer).* The output of `code --list-extensions` will be something like this: ```bash aaron-bond.better-comments alefragnani.Bookmarks bajdzis.vscode-twig-pack bmewburn.vscode-intelephense-client bobmagicii.autofoldyeah calebporzio.better-phpunit ``` If you're a PowerShell user, you can also run `code --list-extensions | % { "code --install-extension $_" }` and now the output will look like this: ```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 ``` If you're a Linux user, the same thing can be obtained with `code --list-extensions | xargs -L 1 echo code --install-extension` And that's nice: now by running these commands you can directly install these extensions. If you're looking for a few worth adding to that list, I've written about [Error Lens](/blog/vscode-errorlens), which shows errors inline instead of hiding them in the Problems panel, and [Todo Tree](/blog/vscode-todo-tree), which collects every `TODO` and `FIXME` of your codebase in a single view. --- # Multiple cursors in vscode > Need to edit multiple lines in VSCode where search/replace fails? Learn the powerful Multiple Cursors feature and the quick keyboard shortcut to make bulk edits instantly. --- ![Multiple cursors in vscode](/img/v2/vscode_tips.webp) **TL;DR** This article shows VSCode's Multiple Cursors feature for bulk-editing many lines at once (e.g. turning a block of lines into a bullet list) when search-and-replace can't do the job: select the lines, press `Shift`+`Alt`+`I` to place a cursor on each, then edit them all simultaneously with `Home`/`End`/`Ctrl`+`Right` navigation. One of the best features in vscode is the *Multiple cursors* one. Imagine you have a bunch of lines where you need, for instance, to remove the first two characters. Each line starts with `//` and you want to remove just that prefix, not any `//` that might appear elsewhere in the line (a search & replace can't be used for that). Or, for another example, you must enclose each line in double brackets. With vscode, it's ultra-simple: multiple cursors. *Multiple cursors shine for one-off, irregular edits. When the change is a repeatable rule applied to a whole file, [Search and replace (or add) using sed](/blog/linux-sed-tips) is the better tool.* Imagine the lines below and you need to add `*` before each line to make a list of items. In this example, I only have six lines so yeah, it's possible to do it manually, one by one. Imagine you had a hundred or a thousand. ```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. ``` That's the result — every line turned into a bullet point in one shot: ![Multiple cursors](./images/make_bullet_list.gif) Here is how to do it: * Select all the lines you need to update, * Press `SHIFT`-`ALT`-`I` to enable multiple cursors, * Press `Home` to put cursors at the beginning of each line, * Press `*` followed by a space to transform the list of lines to a bullet list. * Press `ESC` to quit the multiple cursors mode. While the multiple cursor mode is enabled, you can also press `END` to go to the end of lines, add/remove f.i. a character, you can press `CTRL`-`RIGHT` to move from one word right and so on. Pretty cool option. VSCode is full of these built-in features you only discover by accident. Two others I use every day: [sticky scroll](/blog/vscode-sticky-scroll), to always know which function or heading you're inside of, and [autosave](/blog/vscode-autosave), to stop pressing `CTRL`+`S` altogether. --- # PHP Getter and Setter in VSCode > Implement secure PHP Getters and Setters in VSCode effortlessly. Learn the best practices for private class properties and use the recommended extension to generate them instantly. --- ![PHP Getter and Setter in VSCode](/img/v2/vscode_tips.webp) **TL;DR** This article makes the case for private PHP class properties accessed only through getters/setters (so values can be validated, e.g. rejecting a negative price), and shows the `PHP Getters & Setters` VSCode extension that generates them automatically via a right-click on the property — removing the excuse that writing them is tedious. Because you're an excellent developer, you deny anyone access to the properties of your class directly, but only via a getter or setter. In other words, in your PHP class, you don't have `public` properties (they're the devil) but exclusively `protected` ones or better `private`. And using getters and setters you allow other objects to interact with your private properties by reading them (getters) or updating their values (setters). *[Rector](/blog/php-rector) can spot the places where a property should have been private in the first place, and [Tabnine](/blog/vscode-tabnine) will often guess the whole setter as soon as you start typing `private function set`.* Some people will say "Yes, but it's tedious to write these functions", but not at all. ## See the extension in action Right-click a property, pick an action, and the getter/setter boilerplate is generated for you: ![PHP Getters & Setters](./images/phproberto.webp) ![PHP Getter and Setter in VSCode](./images/php-getter-setter.gif) No excuse for skipping them now — the [PHP Getters & Setters](https://marketplace.visualstudio.com/items?itemName=phproberto.vscode-php-getters-setters) extension does the typing for you. ## The bad scenario **product.php** ```php name='coMPuteR'; $product->price=-10; ``` By OK I mean, well, I've used a mix of lower and upper case for the name and, well, I've said I'm selling computers at the cost of -10€. It's OK because I don't do any validation on the values, and that is very bad. By using a setter (a function called when the property is initialized) I can verify the value and correct the case f.i. or deny negative price. ## The good way Let's create our class with private properties: **product.php** ```php setName('coMPuteR'); $product->setPrice(-10); ``` And the code using the class: **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; } ``` Letting the editor generate this boilerplate is one way to keep your PHP clean. Letting it *check* your code is another: [PHP development in a devcontainer with preinstalled code quality tools](/blog/vscode-devcontainer) sets up a ready-to-use environment with linters and static analysis already in place. --- # Working with regions in VSCode > Master code folding in VSCode with regions. Learn how to use them in PHP and how to enable region support for unsupported files like Dockerfile with a simple extension. --- ![Working with regions in VSCode](/img/v2/vscode_tips.webp) **TL;DR** This article shows how to use `region`/`endregion` folding tags in VSCode (e.g. in PHP) to collapse logical blocks of code, and how to add that same folding support to files VSCode doesn't handle natively, like a Dockerfile, using the `maptz.regionfolder` extension plus a `.vscode/settings.json` entry. It also mentions the `Auto Fold` extension for automatically collapsing regions when a file is opened. VSCode supports `region` and `endregion` tags but not everywhere. These two special tags can be written differently depending on the language you're using but always have the same objective: to allow you to fold part of the code. Not everywhere means, for instance, that VSCode doesn't support code folding by default in a Dockerfile. Let's see how to solve this. *A well-folded file is one thing; a well-organized one is another. For Bash, [Linux - Sort functions in a Bash script](/blog/linux-sort-functions-in-script) checks that your functions are declared in a predictable order.* ## Regions in action ![VSCode - Regions folding](./images/regions.gif) That's what `region`/`endregion` tags buy you: entire logical blocks collapse to a single line, so you see the structure of a file instead of scrolling through it. ## Code folding in PHP Consider the following, very basic, example (*very brief example for illustrative purposes*): **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; } } ``` We can clearly identify three blocks: preparation of the query, run it and return the data. Using regions, we can do this — the two lines shown above (`// #region`, `// #endregion`) are what produce the fold/unfold behavior in the 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 } } ``` > **You should avoid having functions having more than 60 lines:** > > Regions are supported by a very large number of languages, but don't make the mistake of assuming that this allows you to have functions of several dozen lines. That's not the point! If you have long functions, you need to split them up. You need to create smaller, more specialised functions. We've already touched on this point in a [previous post](/blog/vscode-php-refactoring). ## What to do when VSCode didn't support these tags by default? Let's take a look and the following Dockerfile: **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 ``` Opening such a file in VSCode doesn't provide any collapse/expand features and we will need to scroll a lot. And we don't have a global overview of the structure. ![No region support in VSCode for Dockerfile](./images/dockerfile-before.webp) The solution comes by installing a specialised extension: . And, too, by adding these settings in your `.vscode/settings.json` file: **.vscode/settings.json** ```json { "maptz.regionfolder": { "[dockerfile]": { "foldEnd": "\\# endregion", "foldEndRegex": "\\# endregion[\\s]*(.*)$", "foldStart": "\\# region [NAME],", "foldStartRegex": "\\# region[\\s]*(.*)$" } } } ``` Switch back to your tab in VSCode with your opened Dockerfile, press `CTRL`+`P` and run `Developer: Reload Window` to reload the window once the extension has been enabled and tadaaa! ![Now, VSCode supports regions in Dockerfile](./images/dockerfile-after.webp) > **No, it's not just a visual trick:** > > When you're working on very long files like, for me, a Dockerfile of over 900 lines, it's really imperative to be able to have regions that you can reduce/expand. > > Not only does this make it easier to read, it also facilitates the succession of 'stages' (when programming a multistage Dockerfile). ## Auto fold extension There are some extensions like [Auto Fold](https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah) that can automatically fold regions when opening a file. The idea is: when you open a file with a lot of methods, all functions are first *folded* (we just see the function name, not its content). That way you can directly see the structure of the file, the list of functions and so on without having to scroll much. If you install [Auto Fold](https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah), you also need to add the `"autofold.default": 1,` setting in your `settings.json` file. If you don't know how, just press `CTRL`+`,` (the comma) to display the `Settings` page then start to type `autofold` to get access to the setting. Now, if you open a file, its content will be automatically folded. ![Autofold](./images/autofold.webp) ## Conclusion Two tags, `// #region` and `// #endregion` (adapted to your language's comment syntax), are all it takes to fold any block of code — native in most languages, and easy to bolt onto the ones VSCode doesn't support out of the box, like a Dockerfile. --- # Using the JetBrains Mono font in vscode > Improve your coding experience! Learn how to install the free and highly legible JetBrains Mono font and enable beautiful font ligatures in VSCode with this quick configuration guide. --- ![Using the JetBrains Mono font in vscode](/img/v2/vscode_tips.webp) **TL;DR** This article shows how to install the free JetBrains Mono font (which clearly distinguishes O/0 and I/l, and supports code ligatures) and configure VSCode to use it via the `editor.fontFamily` and `editor.fontLigatures` settings in `settings.json`. As you know, VSCode is highly customizable; you can install [a plethora of addons](/blog/vscode-export-list-of-extensions), change the default theme, and use your preferred font. *The same font, installed as a Nerd Font variant, is what makes the icons of [Powerlevel10k](/blog/powerlevel10k_sandbox) and [eza](/blog/linux-eza) display correctly in your terminal — so it's worth setting it in [Windows Terminal](/blog/windows-terminal) too.* Just take a look at the **JetBrains Mono font**. This is a free-of-charge font, for both commercial and non-commercial purposes. ## Why this font * It's free, for both commercial and non-commercial use. * It's particularly legible: an O (the letter) and a 0 (the number), an I (upper-case i) and an l (lower-case L), are clearly distinct — no more guessing in a terminal or a diff. * It comes with nice ligature elements: sequences like `!=`, `=>` or `->` are rendered as a single, cleaner glyph instead of separate characters. Visit to see the potential of the font. ## Install JetBrains Mono font It's easy: go to and click on the `Download font` button. Once downloaded, go to your downloads folder and unzip the file then jump into the newly created `JetBrainsMono` folder and go into `fonts/ttf`. You'll find there several subfolders. Under Windows, just open the first folder, select all files and do a right-click. From the contextual menu, select `Install` as you can see below: ![Install JetBrains Mono font](./images/install_font.webp) ## Configure VSCode to use JetBrains Mono font * Press `CTRL`+`,` to open your settings page * Under the `Text Editor --> Font` section, type `JetBrains Mono` for the font family. But the easier way is: * Press `CTRL`+`,` to open your settings page * In the top right part of the screen, retrieve the `Open Settings (JSON)` button and click on it ![Open settings.json](./images/open_settings_json.webp) * Then copy paste these entries: **.vscode/settings.json** ```json { "editor.fontFamily": "JetBrains Mono", "editor.fontSize": 14, "editor.fontLigatures": true } ``` Save, close VSCode and open it again (or simply press `CTRL`+`SHIFT`+`P` and run `Developer: Reload Window`) ## Conclusion Install the font once at the OS level, add two lines to `settings.json`, and every editor tab benefits from clearer character shapes and ligatures from then on. Now that your editor looks the way you want, [CodeSnap](/blog/vscode-codesnap) lets you turn any selection into a shareable screenshot that shows off that font. --- # Todo Tree in VSCode > Stop forgetting your TODOs and FIXMEs! Use the VSCode Todo Tree extension to summarize all code annotations like TODO, FIXME, and TEMPORARY into one easy-to-track dashboard. --- ![Todo Tree in VSCode](/img/v2/vscode_tips.webp) **TL;DR** Never lose track of your code annotations again. This article introduces the 'Todo Tree' extension for Visual Studio Code, a powerful tool that scans your entire workspace for comments like `TODO`, `FIXME`, and other custom tags. It then organizes them into a convenient tree view in the sidebar, allowing you to quickly see all your pending tasks and navigate directly to the relevant code with a single click. It's an essential extension for staying organized and ensuring no task is forgotten. When you're working on a large codebase, sooner or later you'll find some annotations like `@TODO` or `// TODO` put there by people (perhaps you) as a reminder for "Don't forget to (do something)...". And, for sure, these todos remain there months or years because, yup, the programmer forgot they were there. Personally, I sometimes work on code and comment on the call to a particular method or block. Often during a debugging session (for example on Linux Bash scripts) but, danger, don't forget to remove the comments and return the code to its original state. In that situation, I add a comment like `// TEMPORARY` just before the first commented line. *A dashboard helps you remember; a hook stops you. [Git - pre-commit-hooks](/blog/git-precommit) can refuse a commit that still contains a `TEMPORARY` marker.* The idea behind the `Todo Tree` vscode addon (you can find the download page ) is to summarize such annotations and display a dashboard with all `TODOS`, `TOFIX`, ... and your own too. Once the addon has been installed, you'll get a new icon in your left sidebar (see indicator 1. on the image below). By clicking on it, you'll get items like `BUG`, `CHECK`, `FIXME`, `TODO`, ... and by clicking on an item you'll be directly redirected to where the todo is located in your codebase. ![Todo Tree in VSCode](./images/todo-tree.webp) Thanks to this summary, you'll never forget your todos, temporary hacks, things you should still fix, ... I recommend reading the article to learn more about it. Really nice addon to never forget your TODOs, TOFIX, TEMPORARY, ... annotations. If you like the idea of surfacing what your editor normally keeps out of sight, have a look at [Error Lens](/blog/vscode-errorlens) too: it does the same for errors and warnings, straight in the editing area. And once you've collected a few must-have addons, [exporting your list of extensions](/blog/vscode-export-list-of-extensions) makes them easy to reinstall on your next machine. --- # Do I need VSCode on my machine to use it? > Learn how to run VSCode in your browser using Docker and the `code-server` image. Edit code remotely without installing VSCode on your local machine. --- ![Do I need VSCode on my machine to use it?](/img/v2/vscode_tips.webp) **TL;DR** This article shows you how to run a full VS Code environment directly in your browser using the `code-server` Docker image. It's a perfect solution if you need to code on a machine without VS Code installed. The guide provides a single `docker run` command and breaks down each flag to explain how it mounts your project, persists configuration, and avoids file permission issues by mapping your local user. You'll learn how to find the auto-generated password and get started with your browser-based editor in minutes. Maybe one day we won't need to install an operating system, just have Docker on our machine. Well, it won't be tomorrow yet, but as far as VSCode is concerned, yes, we can. You read that right: there's a Docker image that's nothing other than VSCode in a browser. It's useless if you're a heavy user of VSCode (=you've installed it on every one of your computers) but there are situations where, for example, you need to work on another computer (while yours is being repaired or you're traveling and don't have yours) and VSCode's Docker image will come in handy. *A third option, when you do have VSCode locally but the code lives elsewhere: [SSH Remote development with VSCode](/blog/vscode-remote-ssh).* Or ... you're not yet convinced by VSCode and just want to try it out. If all you need is to edit a file or two in a GitHub repository, there is an even lighter option that doesn't require Docker at all: see [Start vscode from github.com](/blog/vscode-github-dev). One `docker run codercom/code-server` command, and here's the result: a full VS Code, running in your browser. ![VScode in the browser](./images/code_server.webp) ## Why It Works * No local VS Code install needed — the editor itself runs inside the container, your browser is just the display. * Configuration is stored on your host (`~/.config/`), not inside the project, so it persists across containers and is shared if you start code-server for several projects. * The container user is mapped to yours (`-u "$(id -u):$(id -g)"`), so files created or edited from the browser keep your normal file permissions — no `root`-owned files to clean up afterward. ## Installation By running the instruction below, you'll download (once) the `codercom/code-server` Docker image then run a container as a 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`} ``` Once triggered successfully, just open your browser and visit `http://127.0.0.1:`8080 to start VSCode in the browser. > **The `docker run` explained:** > > * `-d`: the code-server will run as a daemon service, > * `-p > 8080 > :8080`: we'll expose the service on our port 8080, > * `--name`: it's just for giving a descriptive name to our container (optional), > * `-v "${HOME}/.config:/home/coder/.config"`: save the code-server configuration on your host, in your home directory. > * `-v ".:/home/coder/project"`: mount your current directory in the container so you can work on it in code-server, > * `-u "$(id -u):$(id -g)"`: map the user used inside the container with local one so files/folders created/modified in the container will have the exact same permissions and > * `-e "DOCKER_USER=${USER}"`: if you run `echo ${USER}` on your host, you'll see you'll get your Linux name (`christophe` for me) so, here, just inform the container about your name. The code-server configuration is thus stored in your home directory, in the folder `~/.config/`. Like this, config files will not be part of your current project and the configuration will be the same if you start code-server at several places, for different projects. ## Getting the Password By opening `http://127.0.0.1 : 8080` you'll get this screen: > Screenshot — http\://127.0.0.1:8080 > > ![Asking for a password](./images/prompt_for_password.webp) Back to your console, run `cat ${HOME}/.config/code-server/config.yaml` to discover the configuration for code-server. You'll see something like this: ```bash $ {`cat \${HOME}/.config/code-server/config.yaml`} bind-addr: 127.0.0.1:8080 auth: password password: d8345b9abff6c01d044fac59 cert: false ``` Copy/paste the password in the form and submit it and tadaaa — the same VS Code in the browser already shown at the top of this article. ## Conclusion One Docker image, one `docker run` command, and a full VS Code is available from any browser — no local install, no lost configuration, no permission headaches on the files you edit. Continue your journey with the official documentation: or to get more info. ---