Visual Studio Codium code-workspaces

In

Configuration for NodeJS

Those of us who need to develop with different versions of NodeJS have been using Node Version Manager (NVM). However, due to some workstation limitations due to Corporate Security, we may not able to run all the commands successfully, so when we had to work with session variables on the terminal, we had to type extra commands every single time.

However, there is an alternative way to configure NodeJS seamlessly on Visual Studio Codium via code-workspaces.

What is a Code Workspace?

While most Integrated Development Environments (IDEs) have some kind of default “project structure”, Visual Studio Code just uses “folders” as default. However, you can go to File -> Save workspace as to create a .code-workspaces file. Its content will look like this at first:

1
2
3
4
5
6
7
8
9
{
    "folders": [
        {
            "path": ".."
        }
    ],
    "settings": {
    }
}

Most people use this feature to enable and disable extensions depending on the “project”, so the Visual Studio Codium application is lighter and there are no conflicts on extensions (e.g. different linters).

Terminal configuration on code-workspaces

With the following settings configuration we are going to:

  1. Configure Git Bash as the default terminal.
  2. Select the NodeJS version we want to use in this project.
  3. Fix the encoding issues.
  4. Fix the accessibility issues.
1
2
3
4
5
6
7
8
"settings": {
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "terminal.integrated.env.windows": {
        "PATH":"C:/NVM_1.1.7/v14.9.0/",
        "LC_ALL": "C.UTF-8"
    },
    "terminal.integrated.minimumContrastRatio": 7,
}

And we will get this final result.

Configure Git Bash as the default terminal

  • ✔️ Git bash comes with some useful tools like ssh, curl (the real curl, not the Microsoft implementation which lacks features)…

Select the NodeJS version we want to use in this project

We usually did this running this cmd commands script.

1
2
3
4
@ECHO OFF
SET PATH=%PATH%;C:\NVM_1.1.7\v14.9.0
@ECHO ON
nvm list

This classic configuration has the following problems:

  • ❌ it is a cmd solution, so we lack many commands of modern terminals.
  • ❌ it has to be run every time we use a new session.

The workspace configuration allows you to:

  • ✔️ it runs seamlessly.
  • ✔️ Git bash is a much better tool than cmd, it has more useful tools.
  • ✔️ it affects the whole workbench (linters, etc…), you only modify it when you need to upgrade NodeJs.
  • ✔️ it only affects this workspace, another workspace may have a different configuration.

Fix the encoding issues

  • ❌ Some unicode characters like greek characters and symbols can not be rendered due to not having the correct encoding configuration.
  • You can ensure this on the workspace configuration, but there is also a general fix that can be done in .minttyrc on your user folder. 
    1
    2
    Locale=C
    Charset=UTF-8

Fix the accessibility issues

  • ❌ Most of the colourful terminal themes may have visibility issues according to WCAG. Maybe you, as a developer are not ffected by this, but many times we share screenshots, live coding and coloured text, so please try to prevent the exclusion of some co-workers. It will also be good for your eyes in the long term.
  • ✔️ The minimum acceptable contrast value for WCAG is 7. The highest value is 21, which is mostly black and white, but that is an extreme measure.

Extra tips

Speed dial for code-workspaces

You may use the Project dashboard extension to speed dial the different projects you are working in, as folders or code-workspaces. You just need to press Ctrl + F1 to open the dashboard, or click on its icon on the left bar.

Workspace colours

You may use the Peacock extension to change the color of your Visual Studio Codium workspace. This is great when you have multiple VS Code instances; use screen sharing tools, or use remote features, so you can quickly identify your editor. Press F1, type “peacock” and select “change to favourite colour”.