Typescript plugins configuration on NixOS

[bymoses]

I've struggled for a half of a day to figure things out about Vue's new LSP implementation that uses Volar (kind of sdk for typescript plugins). So I need a place to share this.

Typescript has plugin system that you can use in two different ways:

• local - configure it inside your tsconfig.json file:

{
  // ...
  "compilerOptions": {
    // ...
    "plugins": [{ "name": "@vue/typescript-plugin" }] // just for reference, it's not working. I will cover why below
    }
  }
}

This plugis are resolved using project's node_modules or local files (if you're using file paths)

• global - when you configure your global tsserver instance to use it regardless of tsconfig.json. This configuration is done by your IDE/text editor config file. In our case - Helix.

[language-server.typescript-language-server.config]
plugins = [{  name = "@vue/typescript-plugin", location = <path to "/@vue/language-server">, languages = ["vue"] }]

So which one should I use?

Actually when it comes to LS, it seems like TS is not allowing us to use local plugins for custom filetypes like vue. So our single option here is to use global configuration.

Which tsserver should I use?

You could use two types of tsserver environments: local and global. IMHO the right way is to always use local tsserver, that already included in typescript npm package. This makes your project dev environment more reproducible for your teammates.
Also when you choose to use tsserver this way, it becomes possible to use local typescript plugins because plugin resolution mechanism of tsserver will also test path <project_path>/node_modules/typescript/bin/tsserver.js/../../...

NixOS config (home manager)

  # ...
  programs.helix = {
    enable = true;
    languages = with pkgs; {
        typescript-language-server = {
          command =
            "${typescript-language-server}/bin/typescript-language-server";
          args = [ "--stdio" ];
          config = {
            documentFormatting = false;
            tsserver = {
              path = "./node_modules/typescript/lib";
              fallbackPath = "${typescript}/lib/node_modules/typescript/lib";
              # logVerbosity = "verbose";
            };
            plugins = [{
              name = "@vue/typescript-plugin";
              # location = "${vue-language-server}/bin/vue-language-server";
              location =
                "blahblah"; # doesn't matter, fallback node_modules of project
              languages = [ "vue" ];
            }];
          };
        };
      };
      language = [       
       {
          name = "vue";
          auto-format = true;
          language-servers = [ "typescript-language-server" ];
        }
      ]
    };