The case of the disappearing 'Debug' CodeLens in Visual Studio Code

2020-11-10T12:00:00.000+10:30

Or how to debug any Jest unit test in Visual Studio Code

I'm trying to debug a TypeScript unit test which uses the Jest library. There's a nice VS Code extension vs-jest that integrates with Jest and even adds CodeLens labels so you can click to debug a specific test. Except the debug label kept disappearing! It would show when I first loaded the folder in Code, but after the tests all ran then the label would go away. Even though the test is passing, I wanted to debug it so I could step through the code. What's going on?

There's some troubleshooting tips listed on the vscode-jest README. This gave me the hint that there are some config settings that can alter how the extension behaves. When I viewed my current settings.json, I saw this:

{
    "typescript.tsdk": "node_modules\\typescript\\lib",
    "eslint.packageManager": "yarn",
    "eslint.validate": [
        "javascript",
        {"language": "typescript", "autoFix": true }
    ],
    "jest.debugCodeLens.showWhenTestStateIn": [
        "fail",
        "unknown"
    ]
}

That last setting caught my attention. Clicking inside that array and code completion offered two other values "pass" and "skip".

    "jest.debugCodeLens.showWhenTestStateIn": [
       "pass",
       "skip",
        "fail",
        "unknown"
    ]

Adding those and hitting save, and then the 'debug' labels returned and stayed for all the tests!

Visual Studio Code and WSL2

2020-05-12T09:57:00.000+09:30

I'm not the only one playing around with running Jekyll in WSL2 for my blog:

Been playing with converting my blog to @Jekyllrb But compile times were bad.

WSL2 + blog on /mnt/c/source/blog -> 60s
WSL2 + blog inside the native linux filesystem ~/blog -> 0.5s

Seems the WSL notes on I/O perf hit when going through filesystem bridge is real @richturn_ms

— Ðavid Ƀurela (@DavidBurela) May 10, 2020

Inspired by David's tweet, I figured it was time I gave it a go. It was remarkably easy!

First, make sure I'm on the WSL2 disk (not the mounted Windows disk)

cd

Now pull down my blog repo

git clone https://github.com/flcdrg/flcdrg.github.io.git

Start Visual Studio Code in the current directory

code .

This magically installed some 'server' bits into WSL2

Updating VS Code Server to version d69a79b73808559a91206d73d7717ff5f798f23c
Removing previous installation...
Installing VS Code Server for x64 (d69a79b73808559a91206d73d7717ff5f798f23c)
Downloading: 100%
Unpacking: 100%
Unpacked 2321 files and folders to /home/david/.vscode-server/bin/d69a79b73808559a91206d73d7717ff5f798f23c.

and then Visual Studio Code launched

But how can I save screenshots and other images now that the repo is stored inside WSL2? Easy as it turns out. I right-clicked on the assets folder in Code and chose Reveal in Explorer and it brings up Windows Explorer pointing to an internal share mapped back to the Linux disk. I can access the same path from the snipping tool too!

And how fast is Jekyll?

bundle exec jekyll serve --incremental 2>&1 | grep -E -v 'deprecated|GitHub Metadata'

On Windows: 120 seconds

On Linux: 62 seconds

David Gardiner - Visual Studio Code

The case of the disappearing 'Debug' CodeLens in Visual Studio Code

Visual Studio Code and WSL2