vimPlugin for javaScript debugging. vscode-js-debug and nvim-dap-vscode-js

[relief-melone]

With packer being removed I found myself unable to debug javascript applications in neovim (I am using nixvim to manage my nvim). Instead of trying to get it to work with pckr or lazy I wanted to see if this could be done with buildVimPlugin as well.

The good news is I was able to get it up and running and will document what I did here! However as I am still pretty new to writing derivations I am sure there is a lot that can be refactored and improved.

The goal of this topic should be to get a user friendly version of this up and running to debug javascript and it’s flavors in nvim the nix way. I’d be very happy for input and contributions

Things I had to do to make it work.

• fork microsoft/vscode-js-debug
  • modify the package.json to not use ssh
  • use node2nix to generate the nodeDependencies as input
  • modify their node-env.nix to include the buildInputs (they have an overide but that seemed to be insufficient for me or also quite possible I was too stupid to use it correctly)
• build both vimPlugins in my config and address the configuration

First let me show you what is needed in my config as of now to build the vimPlugins

{ pkgs, system, ... }:
let
  nodejs = pkgs.nodejs_20;
  src = pkgs.fetchFromGitHub {
    owner = "relief-melone";
    repo = "vscode-js-debug";
    rev = "feature.v1.100.0-vimPlugin";
    sha256 = "sha256-CeAAzwPUiRyjsAiLCUb0fcyAvbJWaPgeKNAdYfTf4+c=";

  };

  nodePkgs = import "${src}/default.nix" { inherit pkgs system nodejs; };
  nodeDependencies = ( nodePkgs // { inherit pkgs; }).nodeDependencies;

  vscode-js-debug = pkgs.vimUtils.buildVimPlugin {
    inherit src;

    pname = "vscode-js-debug";
    version = "v1.97.0";

    nativeBuildInputs = [ nodejs ];

    buildPhase = ''
      ln -s ${nodeDependencies}/lib/node_modules ./node_modules

      export PATH="${nodeDependencies}/bin:$PATH"
      export XDG_CACHE_HOME=$(pwd)/node-gyp-cache

      npx gulp dapDebugServer

      mv ./dist out
    '';
  };

  nvim-dap-vscode-js = pkgs.vimUtils.buildVimPlugin {
    pname = "nvim-dap-vscode-js";
    version = "v1.1.0";

    src = pkgs.fetchFromGitHub {
      owner = "mxsdev";
      repo = "nvim-dap-vscode-js";
      rev = "v1.1.0";
      sha256 = "sha256-lZABpKpztX3NpuN4Y4+E8bvJZVV5ka7h8x9vL4r9Pjk=";
    };


    dependencies = [
      vscode-js-debug
      pkgs.vimPlugins.nvim-dap
    ];
  };

in
{
  programs.nixvim.extraPlugins = [
    vscode-js-debug
    nvim-dap-vscode-js
  ];

  programs.nixvim.extraConfigLua = ''
    local dap = require("dap")
    local dap_vscode_js = require("dap-vscode-js")
    local languages = { "javascript" }

    dap_vscode_js.setup({
      debugger_path = "${vscode-js-debug}", 
      adapters = { 'pwa-node' }
    })
  
    dap.adapters['pwa-node'] = {
      type = 'server',
      host = 'localhost',
      port = "''${port}",
      executable = {
        command = 'node',
        args = {
          "${vscode-js-debug}/out/src/dapDebugServer.js",
          "''${port}",
        },
      },
    }


    for _, language in ipairs(languages) do
      dap.configurations[language] = {
        {
          name = "Launch File",
          type = "pwa-node",
          request = "launch",
          program = "''${file}",
          cwd = "''${workspaceFolder}",
          args = { "''${file}" },
          sourceMaps = true,
          sourceMapPathOverrides = {
            ["./*"] = "''${workspaceFolder}/dist/*"
          },
        },
      }
    end
  '';
}

Now the fork of vscode-js-debug can be found here GitHub - relief-melone/vscode-js-debug at feature.v1.100.0-vimPlugin
main changes are

package.json

• Removed scripts → prepare as well as postinstall
• changed picomatch to “picomatch”: “^4.0.2” as the one that used ssh caused problems with node2nix,
• added merge2 and vsce packages which would otherwise be tried to be downloaded by gulp which would make the build process fail
• added built “@dprint/linux-x64-glibc”: “^0.49.1”, i guess basically we had do include the native pacakges for the architectures.

I think there are changes here that would be rejected as changes in the upstream repo. especially the removal of scripts. I think it would be best if those changes would be incorporated in the nix part.

node2nix stage

built using

nix run nixpkgs#node2nix -- \
	-18 \                                 # use latest node available in node2nix
	-i package.json \                     # use package-lock provided
	--include-peer-dependencies \         # use peer-dependencies as stated in repo for npm install
	-d                                    # include dev dependencies

replace node-env with the one that is in my forked repo now and basically adds some env vars for the build process as well as nativeBuildInputs.

[relief-melone]

I also created a PR in the upstream repo to discuss what changes would be possible directly to that repo and where I need to come up with a better solution

Feature.v1.100.0 vim plugin

[relief-melone]

Alright. I created a PR for nixpkgs

added plugins vscode-js-debug as well as nvim-dap-vscode-js

If it gets accepted debugging js in nvim should become a lot easier I hope. These are the additions I use in my configuration now (with nixpkgs being my current fork that includes the PRs changes)

programs.nixvim.extraPlugins = with pkgs.vimPlugins; [
  nvim-dap-vscode-js
];

programs.nixvim.extraConfigLua = ''
  local dap_vscode_js = require("dap-vscode-js");
  
  dap_vscode_js.setup({
    debugger_path = "${pkgs.vimPlugins.vscode-js-debug}",
    # ...
  })

  dap.adapters['pwa-node'] = {
    type = 'server',
    host = 'localhost',
    port = "''${port}",
    executable = {
      command = 'node',
      args = {
        "${pkgs.vimPlugins.vscode-js-debug}/out/src/dapDebugServer.js",
        "''${port}",
      },
    },
  }
  # ...
'';

[relief-melone]

While I was still playing around with buildNpmPackage somebody else put the vimPlugin the latest unstable nixpkgs release
The vscode-js-debug package is also present already in nixpkgs so I the PR is not necessary after all. However this alters the configuration a bit. Just for everyone who is struggeling to get javascript debugging up and running in nvim and nixos this is what I did to get the adapter running. (I am using nixvim via the home-manager setup)

{ pkgs, ... }:
{
  programs.nixvim.extraPlugins = with pkgs.vimPlugins; [
    nvim-dap-vscode-js
  ];

  programs.nixvim.extraConfigLua = ''
    local dap = require("dap")
    local dap_vscode_js = require("dap-vscode-js")
    local languages = { "javascript" }

    dap_vscode_js.setup({
      debugger_path = "${pkgs.vscode-js-debug}", 
      adapters = { 'pwa-node' }
    })
  
    dap.adapters['pwa-node'] = {
      type = 'server',
      host = 'localhost',
      port = "''${port}",
      executable = {
        command = '${pkgs.vscode-js-debug}/bin/js-debug',
        args = {
          "''${port}"
        },
      },
    }
  '';
}```

[duketjs]

Hi @relief-melone, I am also trying to get my Javascript debugging to work in my standalone nixvim flake with some help from Gemeni but to no avail.

This is my current configuration file. No nix error during run and build. But whenever I try to debug a Javascript app. Whenever I try to startup the debug session. I receive the error message “Couldn’t connect to 127.0.0.1:0 ECONNREFUSED”

Below is my flake.nix:

Here is the ./config/default.nix that imports my dap.nix:

Then here is my dap.nix that contains the luaConfig.content:

Could you offer me some guidance on this, please?