How to Configure Supabase Edge Functions in VSCode for Local Development

By default, Supabase Edge functions in VSCode do not have code completion or show any errors.

The following steps are necessary to make local development with Supabase Edge functions convenient with VSCode:

Set up a workspace for your Supabase functions
Download Deno executable
Install the Deno VSCode extension

Setting up a Workspace for your Supabase functions

In your project root create a file edge-functions.code-workspace

Assuming you have a project directory structure like:

/
    src/
    supabase/
        functions/

You will be adding two files, edge-functions.code-workspace and supabase/.vscode/settings.json:

/
    src/
    supabase/
        functions/
            .vscode/
                settings.json
    edge-functions.code-workspace

edge-functions.code-workspace

Add this file using the following content.

You will define some folders and then exclude them.

{
    "folders": [
        {
            "name": "project-root",
            "path": "./"
        },
        {
            "name": "frontend",
            "path": "src"
        },
        {
            "name": "supabase-functions",
            "path": "supabase/functions"
        }
    ],
    "settings": {
        "files.exclude": {
            "node_modules/": true,
            "src/": true,
            "supabase/functions/": true
        },
        "deno.importMap": "./supabase/functions/import_map.json",
        "deno.enable": false
    }
}

supabase/functions.vscode/settings.json

{
    "deno.enable": true,
    "deno.unstable": true,
    "deno.importMap": "./import_map.json"
}

Download Deno Executable

You need to install the Deno executable. You can find the instructions here:

https://docs.deno.com/runtime/manual/getting_started/installation

Install Deno VSCode extension

In VSCode Extensions search for Deno.

Open up a new workspace for your Supabase Edge Functions

In VSCode you can click File > Open workspace from file and then navigate to your edge-functions.code-workspace.

If you recieve this error:

Could not resolve Deno executable. Please ensure it is available on the PATH used by VS Code or set an explicit "deno.path" setting.

It means you didn't install the Deno executable.

Test it out

Now inside of your function, you can intentionally create an error and you should see the red line: