Closed artemkovalyov closed 5 months ago
@artemkovalyov
Hi, thank you very much for contacting the author of Tailwindcss. I have fixed it in https://github.com/manateelazycat/lsp-bridge/commit/63e8d721d29c66d83ba1e62ccef113b16012a2bd
When the languageId field of tailwindcss.json is empty, lsp-bridge will be based on the file. The extension is dynamically sent to tailwindcss language server.
Thank you for your enthusiastic help
@manateelazycat, thanks for the quick fix. Did you manage to get completion in the buffer? I see them in debug logs but can't see them in candidates in the completion window. Has it worked for you? Is there any additional configuration required?
If you only want to use tailwindcss lsp server, you can customize lsp-bridge-single-lang-server-extension-list option
If you want tailwindcss lsp server mix works with other lsp servers, you need write multi-lsp-server config under multiserver, and then customize lsp-bridge-multi-lang-server-extension-list option
@manateelazycat, I did two multiserver configs, for CSS and for Svelte. I see project configured and both servers launched for each mode accordingly. But I don't get completions merged together even Though I see them in the log buffer. Meaning I don't get completion for Tailwind, just for the other server (svelte or css).
Where should I look?
CSS:
{
"completion": ["tailwindcss", "vscode-css-language-server"],
"completion_item_resolve": ["tailwindcss", "vscode-css-language-server"],
"diagnostics": ["vscode-css-language-server", "tailwindcss"],
"code_action": ["vscode-css-language-server", "tailwindcss"],
"execute_command": ["vscode-css-language-server", "tailwindcss"],
"find_define": "vscode-css-language-server",
"find_type_define": "vscode-css-language-server",
"peek_find_definition": "vscode-css-language-server",
"peek_find_references": "vscode-css-language-server",
"find_implementation": "vscode-css-language-server",
"find_references": "vscode-css-language-server",
"formatting": "vscode-css-language-server",
"hover": "vscode-css-language-server",
"signature_help": "vscode-css-language-server",
"prepare_rename": "vscode-css-language-server",
"rename": "vscode-css-language-server",
"document_symbol": "vscode-css-language-server",
"workspace_symbol": "vscode-css-language-server",
"inlay_hint": "vscode-css-language-server"
}
svelte:
{
"completion": ["svelteserver", "tailwindcss"],
"completion_item_resolve": ["svelteserver", "tailwindcss"],
"diagnostics": "svelteserver",
"code_action": "svelteserver",
"execute_command": "svelteserver",
"find_define": "svelteserver",
"find_type_define": "svelteserver",
"find_implementation": "svelteserver",
"find_references": "svelteserver",
"peek_find_definition": "svelteserver",
"peek_find_references": "svelteserver",
"formatting": "svelteserver",
"hover": ["svelteserver", "tailwindcss"],
"signature_help": "svelteserver",
"prepare_rename": "svelteserver",
"rename": "svelteserver",
"document_symbol": "svelteserver",
"workspace_symbol": "svelteserver",
"inlay_hint": "svelteserver"
}
I'm happy to contribute my multi-server configs when they are proven to work fine:)
@manateelazycat, I did two multiserver configs, for CSS and for Svelte. I see project configured and both servers launched for each mode accordingly. But I don't get completions merged together even Though I see them in the log buffer. Meaning I don't get completion for Tailwind, just for the other server (svelte or css).,我为 CSS 和 Svelte 做了两个多服务器配置。我看到项目已配置,并且两台服务器相应地为每种模式启动。但即使我在日志缓冲区中看到它们,我也没有将完成合并在一起。这意味着我没有得到 Tailwind 的完成,只是得到了其他服务器(svelte 或 css)的完成。
Where should I look?我应该去哪里看?
CSS: CSS:
{ "completion": ["tailwindcss", "vscode-css-language-server"], "completion_item_resolve": ["tailwindcss", "vscode-css-language-server"], "diagnostics": ["vscode-css-language-server", "tailwindcss"], "code_action": ["vscode-css-language-server", "tailwindcss"], "execute_command": ["vscode-css-language-server", "tailwindcss"], "find_define": "vscode-css-language-server", "find_type_define": "vscode-css-language-server", "peek_find_definition": "vscode-css-language-server", "peek_find_references": "vscode-css-language-server", "find_implementation": "vscode-css-language-server", "find_references": "vscode-css-language-server", "formatting": "vscode-css-language-server", "hover": "vscode-css-language-server", "signature_help": "vscode-css-language-server", "prepare_rename": "vscode-css-language-server", "rename": "vscode-css-language-server", "document_symbol": "vscode-css-language-server", "workspace_symbol": "vscode-css-language-server", "inlay_hint": "vscode-css-language-server" }
svelte: 苗条:
{ "completion": ["svelteserver", "tailwindcss"], "completion_item_resolve": ["svelteserver", "tailwindcss"], "diagnostics": "svelteserver", "code_action": "svelteserver", "execute_command": "svelteserver", "find_define": "svelteserver", "find_type_define": "svelteserver", "find_implementation": "svelteserver", "find_references": "svelteserver", "peek_find_definition": "svelteserver", "peek_find_references": "svelteserver", "formatting": "svelteserver", "hover": ["svelteserver", "tailwindcss"], "signature_help": "svelteserver", "prepare_rename": "svelteserver", "rename": "svelteserver", "document_symbol": "svelteserver", "workspace_symbol": "svelteserver", "inlay_hint": "svelteserver" }
Can you send me log of *lsp-bridge*
? Or example code to me for test?
@artemkovalyov When lsp-bridge obtains completion candidate words from the lsp server, it will call
This code renders the completion menu. If this code does not execute normally, it is a Python bug.
If this code executes, but you don't see completion, you need to check
Check to see if there is any function in lsp-bridge-completion-popup-predicates that causes the completion menu not to pop up.
Above screenshot show tailwindcss works with single lsp server, mutli lsp servers I haven't test, need test code.
@artemkovalyov I have test multi-lsp-server with tailwindcss, works fine.
First, I create lspbridge/multiserver/html_and_tailwindcss.json file with content
{
"completion": ["tailwindcss", "vscode-html-language-server"],
"completion_item_resolve": ["tailwindcss", "vscode-html-language-server"],
"diagnostics": ["vscode-html-language-server", "tailwindcss"],
"code_action": ["vscode-html-language-server", "tailwindcss"],
"execute_command": ["vscode-html-language-server", "tailwindcss"],
"find_define": "vscode-html-language-server",
"find_type_define": "vscode-html-language-server",
"peek_find_definition": "vscode-html-language-server",
"peek_find_references": "vscode-html-language-server",
"find_implementation": "vscode-html-language-server",
"find_references": "vscode-html-language-server",
"formatting": "vscode-html-language-server",
"hover": "vscode-html-language-server",
"signature_help": "vscode-html-language-server",
"prepare_rename": "vscode-html-language-server",
"rename": "vscode-html-language-server",
"document_symbol": "vscode-html-language-server",
"workspace_symbol": "vscode-html-language-server",
"inlay_hint": "vscode-html-language-server"
}
Then I customize lsp-bridge-multi-lang-server-extension-list with
(defcustom lsp-bridge-multi-lang-server-extension-list
'(
(("vue") . "volar_emmet")
(("ts" "tsx") . "typescript_eslint")
(("html") . "html_and_tailwindcss")
)
"The multi lang server rule for file extension."
:type 'cons)
Last, you need execute commands show in https://tailwindcss.com/docs/installation in your tailwindcss project.
@artemkovalyov I'll close this issue first. If you have any questions, please reopen this issue.
You are very welcome to contribute the multi-server configuration of tailwindcss. Thank you for your patient research. It will be of great help to lsp-bridge.
@manateelazycat, I played with it and it works but very weirdly and not in a helpful way.
The most valuable and obvious completion are always missing. I tried with group
and it worked:
Then I tried text
that is very often use and it doesn't work:
Same for font
:
Although it give you smth if you only type fo
It almost never works on very frequently used and widespread keywords like: flex
, mx-
, bg-
, font
, text
, and many others.
I tried with HTML + Tailwind
& Svelte + Tailwind
- same results for both of them.
Does it work fine for you? Do you have meaningful results?
Can you enable log and send content of *lsp-bridge*
?
Sure, here's the one for font
lsp-bridge.log
Here's file for group
lsp-bridge-group.log
Is it convenient for you to upload your project files? I'll test it
I tried creating a new project to test the setup out in a clean environment.
I also seem to find a bug with symbols like +
in file names that are used ubiquitously in Svelte leading to "bad file descriptor" error
my-app.zip
Run npm install
You can open any *.svelte
file or app.css
in src
.
I see smth like this in the logs (notice the encoding on the line two):
--- [11:51:01.832324] Recv window/logMessage notification from 'tailwindcss' for project +layout.svelte
Initialize language server at file:///umetra/tmp/my-app/src/routes/%2Blayout.svelte
--- [11:51:02.352831] Recv response (60880) from 'svelteserver' for project +layout.svelte
--- [11:51:02.353378] Send initialized notification to 'svelteserver' for project +layout.svelte
--- [11:51:02.353593] Send workspace/didChangeConfiguration notification to 'svelteserver' for project +layout.svelte
--- [11:51:02.354167] Send textDocument/didOpen notification to 'svelteserver' for project +layout.svelte
Initialize new ts service at
Trying to load configs for /umetra/tmp/my-app/src/routes/+layout.svelte
Error: ENOTDIR: not a directory, scandir '/umetra/tmp/my-app/src/routes/+layout.svelte'
at Object.readdirSync (node:fs:1514:26)
at readdirWithFileTypes (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.scandir/out/providers/sync.js:16:33)
at Object.read (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.scandir/out/providers/sync.js:10:16)
at SyncReader.scandirSync [as _scandir] (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.scandir/out/index.js:18:17)
at SyncReader._handleDirectory (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/readers/sync.js:28:34)
at SyncReader._handleQueue (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/readers/sync.js:23:18)
at SyncReader.read (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/readers/sync.js:15:14)
at SyncProvider.read (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/providers/sync.js:11:29)
at ReaderSync.walkSync [as _walkSync] (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/@nodelib/fs.walk/out/index.js:20:21)
at ReaderSync.dynamic (/home/artem/.nvm/versions/node/v20.10.0/lib/node_modules/svelte-language-server/node_modules/fast-glob/out/readers/sync.js:13:21) {
errno: -20,
code: 'ENOTDIR',
syscall: 'scandir',
path: '/umetra/tmp/my-app/src/routes/+layout.svelte'
}
here are my multiserver configs for tailwind+ multiserver.zip
I tried with a very simple HTML setup described here: https://tailwindcss.com/docs/installation
I still see very weird bad file descriptor
error:
Lsp-Bridge mode enabled in current buffer
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server
[LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server
[LSP-Bridge] Active file index.html , enjoy hacking!
[LSP-Bridge] index.html (tailwindcss): Unhandled exception: Bad file descriptor
Error: Bad file descriptor
From the logs in lsp bridge
--- [21:58:53.357482] Send textDocument/didChange notification to 'tailwindcss' for project index.html
--- [21:58:53.357646] Send textDocument/didChange notification to 'vscode-html-language-server' for project index.html
--- [21:58:53.517419] Send textDocument/completion request (52050) to 'tailwindcss' for project index.html
--- [21:58:53.517978] Send textDocument/completion request (57223) to 'vscode-html-language-server' for project index.html
Recv message (error):
{
"jsonrpc": "2.0",
"id": 52050,
"error": {
"code": -32603,
"message": "Request textDocument/completion failed with message: Bad file descriptor"
}
}
Both servers are asked for completion:
--- [22:08:14.258710] Send textDocument/completion request (7654) to 'tailwindcss' for project index.html
{
"id": 7654,
"method": "textDocument/completion",
"params": {
"position": {
"line": 9,
"character": 17
},
"context": {
"triggerKind": 1
},
"textDocument": {
"uri": "file:///umetra/tmp/t1/src/index.html"
}
},
"message_type": "request",
"jsonrpc": "2.0"
}
--- [22:08:14.259422] Send textDocument/completion request (37526) to 'vscode-html-language-server' for project index.html
{
"id": 37526,
"method": "textDocument/completion",
"params": {
"position": {
"line": 9,
"character": 17
},
"context": {
"triggerKind": 1
},
"textDocument": {
"uri": "file:///umetra/tmp/t1/src/index.html"
}
},
"message_type": "request",
"jsonrpc": "2.0"
}
Recv message (error):
{
"jsonrpc": "2.0",
"id": 7654,
"error": {
"code": -32603,
"message": "Request textDocument/completion failed with message: Bad file descriptor"
}
}
Eval in Emacs: (message '"[LSP-Bridge] Request textDocument/completion failed with message: Bad file descriptor")
--- [22:08:14.264687] Recv textDocument/completion response (37526) from 'vscode-html-language-server' for project index.html
--- [22:08:14.265011] Got completion candidates (0) from 'vscode-html-language-server' for file index.html
--- [22:08:14.265241] Record completion candidates (0) from 'vscode-html-language-server' for file index.html
Eval in Emacs: (lsp-bridge-completion--record-items '"/umetra/tmp/t1/src/index.html" '"" '() '(:line 9 :character 17) '"vscode-html-language-server" '("." ":" "<" "\"" "=" "/") '("tailwindcss" "vscode-html-language-server"))
{
"jsonrpc": "2.0",
"id": 37526,
"result": {
"isIncomplete": false,
"items": []
}
}
The project is crazy simple. Just run npm install
and then npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
t1.zip
I tried with a very simple HTML setup described here: https://tailwindcss.com/docs/installation I still see very weird
bad file descriptor
error:Lsp-Bridge mode enabled in current buffer [LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server [LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server [LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/tailwindcss-language-server [LSP-Bridge] found language server: /home/artem/.nvm/versions/node/v20.10.0/bin/vscode-html-language-server [LSP-Bridge] Active file index.html , enjoy hacking! [LSP-Bridge] index.html (tailwindcss): Unhandled exception: Bad file descriptor Error: Bad file descriptor
From the logs in lsp bridge
--- [21:58:53.357482] Send textDocument/didChange notification to 'tailwindcss' for project index.html --- [21:58:53.357646] Send textDocument/didChange notification to 'vscode-html-language-server' for project index.html --- [21:58:53.517419] Send textDocument/completion request (52050) to 'tailwindcss' for project index.html --- [21:58:53.517978] Send textDocument/completion request (57223) to 'vscode-html-language-server' for project index.html Recv message (error): { "jsonrpc": "2.0", "id": 52050, "error": { "code": -32603, "message": "Request textDocument/completion failed with message: Bad file descriptor" } }
Both servers are asked for completion:
--- [22:08:14.258710] Send textDocument/completion request (7654) to 'tailwindcss' for project index.html { "id": 7654, "method": "textDocument/completion", "params": { "position": { "line": 9, "character": 17 }, "context": { "triggerKind": 1 }, "textDocument": { "uri": "file:///umetra/tmp/t1/src/index.html" } }, "message_type": "request", "jsonrpc": "2.0" } --- [22:08:14.259422] Send textDocument/completion request (37526) to 'vscode-html-language-server' for project index.html { "id": 37526, "method": "textDocument/completion", "params": { "position": { "line": 9, "character": 17 }, "context": { "triggerKind": 1 }, "textDocument": { "uri": "file:///umetra/tmp/t1/src/index.html" } }, "message_type": "request", "jsonrpc": "2.0" } Recv message (error): { "jsonrpc": "2.0", "id": 7654, "error": { "code": -32603, "message": "Request textDocument/completion failed with message: Bad file descriptor" } } Eval in Emacs: (message '"[LSP-Bridge] Request textDocument/completion failed with message: Bad file descriptor") --- [22:08:14.264687] Recv textDocument/completion response (37526) from 'vscode-html-language-server' for project index.html --- [22:08:14.265011] Got completion candidates (0) from 'vscode-html-language-server' for file index.html --- [22:08:14.265241] Record completion candidates (0) from 'vscode-html-language-server' for file index.html Eval in Emacs: (lsp-bridge-completion--record-items '"/umetra/tmp/t1/src/index.html" '"" '() '(:line 9 :character 17) '"vscode-html-language-server" '("." ":" "<" "\"" "=" "/") '("tailwindcss" "vscode-html-language-server")) { "jsonrpc": "2.0", "id": 37526, "result": { "isIncomplete": false, "items": [] } }
Because tailwindcss don't support single file
, you need run git init
in project t1
first.
I pushed a new patch today
https://github.com/manateelazycat/lsp-bridge/commit/bc10c15698f86c9107712ee0cbe4113d81b9370f
This patch should fix the problem that the acm menu does not display candidate words when the LSP Server returns too many completion items.
The reason why completion is not displayed is that a group of users do not want lsp-bridge to filter candidate words on the Python side, but do not filter candidate words at all. When the LSP server returns too many candidate words, Emacs will create too many objects. It caused GC and eventually stuck Emacs, so the acm-backend-lsp-candidates-max-number option was introduced later to avoid GC.
However, there are also problems with this design. If the candidate words returned by the LSP server are much larger than the acm-backend-lsp-candidates-max-number setting (such as Tailwindcss LSP server), the default no filtering policy will be used, and lsp-bridge will just Candidate words within the acm-backend-lsp-candidates-max-number range are always sent, and these candidate words have nothing to do with the user's input.
The new design is that lsp-bridge will always filter candidate words on the Python side, but users can configure the matching mode of acm-backend-lsp-match-mode. This solves the problem that acm does not display when the LSP server returns too many candidates. Bug in completing candidate words
Yeah, I've read some of your reddit discussions... I actually think propagating filtering logic to python should be the way for the design you've chosen to unload emacs. Another plugin that works is indeed slow because of the sheer amount of completion candidates Tailwind provides. My GC is raised significantly but when you reach a clean up range it can be painful. I'll give it a try again.
By the way, a possibility to rather simply combine LSP server is a killer feature of LSP-bridge. LSP-mode has it partially as well but you approach is much simpler and should be also more performant.
I assumed there's some filtering or limitation because I see completion candidates in the logs but nothing in the menu.
@manateelazycat, I can see completions from the Tailwindcss at last :)
@manateelazycat, I can see completions from the Tailwindcss at last :) ![image](https://private-user-images.githubusercontent.com/10460752/324592603- 81f10aff-9307-4c02-ab18-99c33c114b3e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..VgEr0FA1_F6rdCTaY3U9hnh9jG4aSn71ahmyCXSbFxg)
@artemkovalyov
I noticed that although your screenshot shows candidates, the first ones are fuzzy matches. I pushed a new patch https://github.com/manateelazycat/lsp-bridge/commit/5890f3b6168a1fe7745f6660829624ee76a8e04c
The purpose of this patch is to ensure that the list of candidate words after fuzzy filtering is prioritized again according to the prefix entered by the user.
In this way, when Tailwindcss returns a large number of candidate words that exceed the limit of acm-backend-lsp-candidates-max-number, the acm completion menu will prioritize the candidate words starting with font
instead of other fuzzy matching candidate words.
@manateelazycat , indeed, I didn't even notice immediately. I was too happy about some progress and it was late :)
I'll check again to see the candidates are meaningful. I use orderless
, I'll test with and without it enabled, but usually it filters down great matches.
Works now fine from my perspective. Both servers are considered and return reasonable results.
Aggregation of LSP servers is the killer feature of LSP-bridge.
Thank you for your help. Without your assistance, tailwindcss could not complete autocompletion properly.
Hey, @manateelazycat, I continued on the Tailwindcss topic and managed to get completions from the server in the
lsp-bridge
logs. Because Tailwindcss is a meta-language or embedding language if you will, it can be used in conjunction with other servers more often than not. For that reason a correctlanguageId
has to be provided when configuring the sever for the opened file.You can also check a comment on my issue from the Tailwind LSP server maintainers: https://github.com/tailwindlabs/tailwindcss-intellisense/issues/925#issuecomment-2021323785
I tried with
Svelte
and it worked perfectly well with completion coming amass. See the log below. I believelsp-bridge
implementation has to be fixed in some places to support passing correctlanguageId
instead of taking the one provided in configuration file. I also didn't manage to see completions in the drop-down, probably because some additional wiring in Python is required to move it around correctly.Would you look into this? This should eliminate a need for extra backend you've created and give benefits on top from custom configuration of a specific project accessible via lsp server.
The config I used is super simple:
Here are some example logs for completion requests and a chunk of completion data coming in response.