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

Development
1

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.

2 Likes
2

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

1 Like
3

Alright. I created a PR for nixpkgs

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}",
      },
    },
  }
  # ...
'';
1 Like