DEV Community

mich0w0h
mich0w0h

Posted on

Troubleshooting: Deno Extension Activation in VSCode with Monorepo Environments

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)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more