Unsure how to get kak-lsp working with Typescript/React (tsx) files

I’m interested in trying Kakoune and have started setting up my config. Unfortunately, it’s trying to parse TSX files as regular TS, and failing horribly.

Right now, my kak-lsp.toml looks like this:

[language_ids]
javascript = "javascriptreact"
typescript = "typescriptreact"

[language."typescript"]
filetypes = ["typescript","javascript"]
roots = ["pnpm-lock.yaml","yarn.lock",".npmrc","tsconfig.json"]
command = "typescript-language-server"
args = ["--stdio"]
settings_section = "_"

[language.typescript.settings._]
tsserver = {logDirectory = "/Users/ryan/Downloads/",logVerbosity = "verbose"}

I have tried to follow the advice in this GitHub comment and tested language."typescript.tsx" and language.tsx as the TOML section headers, but this didn’t work. Running :echo %opt{filetype} returns typescript in my TSX files.

It seems like I’ve tried the common suggestions, but it’s still parsing it incorrectly. Regular TypeScript files work fine. Can anyone point me in the right direction?

My current kakrc:

set -add global autoinfo normal

set-option global tabstop 2
set-option global indentwidth 2
set-option global scrolloff 1,3

add-highlighter global/ number-lines -hlcursor
add-highlighter global/ wrap -word -indent

# Language server

eval %sh{kak-lsp --kakoune -s $kak_session}
set global lsp_cmd "kak-lsp -s %val{session} -vvv --log /tmp/kak-lsp.log"
lsp-enable

References

I think part of the problem might be that the file type is getting reported as typescript instead of typescriptreact as described in the LSP docs. This might end up requiring an update to the reported filetype for .tsx files. I’m still not super familiar with kakoune’s model for configuring this but this might be a promising new research direction

Added these lines to my kakrc and played around with it a little bit. Still no luck with the language server, but I feel like I understand the config a little better.

I remember reading somewhere in my research earlier that kakoune’s filetype is different from the filetype that gets sent to the language server. If I can find out how that inference is made, it may be helpful. Will continue to research.

I’ve got a hacky solution in place. I learned how LSP works, and created a minimal language server of my own that passes through to the TypeScript server in most cases. However, when you open a file ending in .tsx, it rewrites the language to typescriptreact. If I have time I’ll publish it as an npm package

this is an invalid mix of old and new config values. Don’t use language.*, use the new language-server.
Install latest kak-lsp from git and use the default config, that should work. You should not need to create your kak-lsp.toml. If you do, start with copying the latest one in the kak-lsp repo

1 Like

If you upgrade kak-lsp, you’ll see this error message in the *debug* buffer:
kak-lsp: failed to parse config file: incompatible options: language_server/language_id and legacy language

For the record, it used to be that the [language."typescript"] part would determine the languageId that was sent to the server (hence the issue you’re seeing).

Now we have language_ids which is a mapping of Kakoune filetypes to LSP languageIds.

Pretty impressive that you hacked around it lol. Maybe we can improve the docs on languageId.

Thank you @krobelus! I installed kak-lsp from Homebrew… had no idea how far outdated my installation was. Rebuilding from source caused it to work like a charm.

1 Like

new release is out. Using homebrew is fine, it also includes a version of kak-lsp.toml that is compatible with the binary.

1 Like

Thank you @krobelus for your continued efforts and support of kak-lsp! Just got everything up and running for doing typescript/react development today and it’s working great!

2 Likes