DEV Community

mich0w0h
mich0w0h

Posted on

Troubleshooting: Deno Extension Activation in VSCode with Monorepo Environments

#deno #vscode #formatter #javascript

Troubleshooting Deno Extension Activation in VSCode

I faced an issue when enabling the Deno extension in VSCode and I decided to take notes for future reference.

Enabling Deno Extension

To enable the Deno extension in VSCode, you need to place .vscode/settings.json in the workspace root.

The contents of settings.json are as follows:

{
  "deno.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}
Enter fullscreen mode Exit fullscreen mode

Issue in Monorepo Environment

In a monorepo environment, placing the project-root directory in the workspace root will not work as expected.

project-root/
    -- backend/
        -- .vscode/
            -- settings.json
    -- frontend/
Enter fullscreen mode Exit fullscreen mode

Conversely, placing settings.json in a subdirectory of project-root will activate the Deno formatter in the frontend directory as well:

project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/
Enter fullscreen mode Exit fullscreen mode

However, adding .vscode/setting.json to overwrite settings didn't work, still causing activation in the frontend directory.

project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/
        -- .vscode/
            -- settings.json
Enter fullscreen mode Exit fullscreen mode 
{
  "deno.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Enter fullscreen mode Exit fullscreen mode

Solution 1: Configure deno.enablePaths in settings.json in the project root

This solution seems to be more appropriate since it's mentioned in the official article

The directory structure is;

project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/
Enter fullscreen mode Exit fullscreen mode

And the contents of setting.json is here;

{
  "deno.enable": true,
  "deno.enablePaths": [
    "./backend"
  ],
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}
Enter fullscreen mode Exit fullscreen mode

This enables Deno extension only in the backend directory.

Solution 2: Open VSCode workspace with the backend directory as the root

Only "Solution 1" is enough for this troubleshooting but I want to leave a trail of things I've tried. That's why I'll write down this solution 2 so you probably don't have to look through this one.

By placing settings.json in a subdirectory of the backend directory and opening the VSCode workspace with the backend directory as the root, it will work properly:

// move to the backend directory from project root
$ cd backend

// open the VScode workspace
$ code .
Enter fullscreen mode Exit fullscreen mode

The directory structure would be like this.

-- backend/
    -- .vscode/
        -- settings.json
Enter fullscreen mode Exit fullscreen mode

The frontend directory needs to be developed separately in VSCode as a separate workspace.

Top comments (0)