请问有谁成功在eglot或者lsp-bridge上配置了tailwindcss-language-server？

Emacs-general
1

我是通过 npm install -g @tailwindcss/language-server 安装的服务

试了几个lsp包，包括eglot，lsp-mode，lsp-bridge，只有lsp-mode可以成功补全tailwindcss的信息，但lsp-mode用的却又不是tailwindcss-language-server，而是自己下载的 tailwindcss/extension/dist/tailwindServer.js，这应该是vscode同款扩展

这是我的最小化配置

(setq package-archives
      '(("melpa"  . "https://melpa.org/packages/")
        ("org"    . "https://orgmode.org/elpa/")
        ("gnu"    . "https://elpa.gnu.org/packages/")
        ("nongnu" . "https://elpa.nongnu.org/nongnu/"))
      package-enable-at-startup nil)

(package-initialize)
(unless (package-installed-p 'use-package)
  (package-refresh-contents)
  (package-install 'use-package))

(use-package evil
  :hook (prog-mode . evil-mode))

(use-package corfu
  :hook (prog-mode . corfu-mode)
  :custom
  (corfu-auto t)
  (corfu-auto-prefix 1)
  :config
  (use-package cape
    :demand
    :custom
    (completion-at-point-functions (list (cape-capf-super 'cape-file 'cape-dabbrev 'cape-abbrev 'cape-keyword)))))

(use-package web-mode
  :mode
  ("\\.\\(xml\\|html?\\)$" . web-mode))

(defvar maple-lsp 'lsp-bridge)

(pcase maple-lsp
  ('eglot
   (use-package eglot
     :hook (web-mode . eglot-ensure)
     :config

     (defun eglot-tailwindcss-options (server)
       `(:emmetCompletions
         t
         :experimental (:configFile ,(expand-file-name "tailwind.config.js" (project-root (eglot--project server))))))

     (add-to-list 'eglot-server-programs
                  '(web-mode . ("tailwindcss-language-server" "--stdio" :initializationOptions eglot-tailwindcss-options))))

   )
  ('lsp-mode
   (use-package lsp-mode
     :hook (web-mode . lsp-deferred)
     :custom
     (lsp-completion-provider :none))

   (use-package lsp-tailwindcss
     :hook (web-mode . (lambda () (require 'lsp-tailwindcss)))
     :custom
     (lsp-tailwindcss-add-on-mode t))
   )
  ('lsp-bridge
   (use-package lsp-bridge
     :load-path "site-lisp/lsp-bridge"
     :autoload (lsp-bridge-mode)
     :hook (web-mode . (lambda()
                          (when (bound-and-true-p corfu-mode) (corfu-mode -1))
                          (lsp-bridge-mode)))
     :custom
     (acm-enable-yas nil)
     (lsp-bridge-python-command (expand-file-name "versions/lsp-bridge/bin/python3" (getenv "PYENV_ROOT")))
     (lsp-bridge-multi-lang-server-mode-list
      '(((web-mode) . "html_tailwindcss"))))))

(provide 'init)
;;; init-test.el ends here

我也尝试把 tailwindcss-language-server --stdio 修改成 lsp-tailwindcss 的同款命令也还是不行

node /xxx/.emacs.d/.cahce/lsp/tailwindcss/extension/dist/tailwindServer.js --stdio

eglot 里的输出日志是

No matching project for document ....

lsp-bridge 里的输出日志是

Got completion candidates (0) from 'tailwindcss' for file index.html

有大佬知道这是什么情况以及怎么处理吗？

2

taiwindcss挑languageId, 这个不对，它就拒绝返回补全。

languageId根据项目不同而不同，你可以改改lsp-bridge关于tailwindcss的languageId

3

我试了一下，通过修改 lsp-bridge/langserver/tailwindcss.json 里的 languageId

或者添加配置

(setq lsp-bridge-get-language-id
      (lambda (project-path file-path server-name extension-name)
        (when (string-equal server-name "tailwindcss")
          (cond ((string-equal extension-name "html") "html")
                ((string-equal extension-name "vue") "typescript")
                (t ""))))
      )

最后结果还是不行

项目也是很简单的一个测试项目

test-tailwindcss
├── index.html
├── node_modules
├── package-lock.json
├── package.json
└── tailwind.config.js

package.json

{
  "devDependencies": {
    "tailwindcss": "^3.4.17"
  },
  "dependencies": {
    "@tailwindcss/cli": "^0.1.2"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
    ],
    theme: {
        extend: {},
    },
    plugins: [
    ],
}
4

你改的啥？

npm install了吗？

项目是git项目吗？

5

我创建了一个测试仓库，大佬有时间能否帮忙看一下

6

提issue吧，旅游中，论坛容易忘记

7

lsp-bridge下通过设置 languageId 和 lsp-bridge-completion-in-string-file-types已经可以成功使用tailwindcss了，现在三个lsp客户端只有eglot仍就无法补全。。。。

1 个赞
8

如何配置的？配置文件可以发出来看一下吧？

9

lsp-bridge吗 可以查看一下 https://github.com/manateelazycat/lsp-bridge/blob/master/multiserver/ 这里里面有管理tailwindcss lsp 的多个lsp的配置，如果你有其他需要，可以自己写这个json，引用。

11

{ “completion”: [“volar”, “typescript”, “emmet-ls”, “tailwindcss”], “completion_item_resolve”: [“volar”, “typescript”, “emmet-ls”, “tailwindcss”], “diagnostics”: [“volar”, “emmet-ls”, “tailwindcss”], “code_action”: [“volar”, “typescript”, “emmet-ls”, “tailwindcss”], “execute_command”: [“volar”, “typescript”, “emmet-ls”, “tailwindcss”], “find_define”: “volar”, “find_type_define”: “volar”, “find_implementation”: “volar”, “find_references”: “volar”, “peek_find_definition”: “volar”, “peek_find_references”: “volar”, “formatting”: “volar”, “hover”: “volar”, “signature_help”: “volar”, “prepare_rename”: “volar”, “rename”: “volar”, “document_symbol”: “volar”, “workspace_symbol”: “volar”, “semantic_tokens”: “volar”, “inlay_hint”: “volar”, “imenu”: “volar”, “breadcrumb”: “volar” } 这个vue配置有tailwindcss提示

{ “completion”: [“typescript”, “tailwindcss”], “completion_item_resolve”: [“typescript”, “tailwindcss”], “diagnostics”: [“tailwindcss”], “code_action”: [“typescript”, “vscode-eslint-language-server”, “tailwindcss”], “execute_command”: [“typescript”, “vscode-eslint-language-server”, “tailwindcss”], “find_define”: “typescript”, “find_type_define”: “typescript”, “find_implementation”: “typescript”, “find_references”: “typescript”, “peek_find_definition”: “typescript”, “peek_find_references”: “typescript”, “formatting”: “typescript”, “hover”: “typescript”, “signature_help”: “typescript”, “prepare_rename”: “typescript”, “rename”: “typescript”, “document_symbol”: “typescript”, “workspace_symbol”: “typescript”, “semantic_tokens”: “typescript”, “inlay_hint”: “typescript”, “imenu”: “typescript”, “breadcrumb”: “typescript” }

这个react 没有tailwindcss提示

12

可以查看一下https://github.com/manateelazycat/lsp-bridge/issues/945，有可能使需要发送的languageId 为 tsx，我没有验证，你可以自己验证一下

13

— [23:50:59.892890] Send textDocument/didOpen notification to ‘tailwindcss’ for project next-simple { “method”: “textDocument/didOpen”, “params”: { “textDocument”: { “uri”: “file:///Users/toby/Projects/next-simple/app/page.tsx”, “languageId”: “tsx”, “version”: 0, “text”: “import Image from "next/image";\n\nexport default function Home() {\n return (\n <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">\n\t\t\t<h1 className="text-[40px]">hello\n <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">\n <Image\n className="dark:invert"\n src="/next.svg"\n alt="Next.js logo"\n width={180}\n height={38}\n priority\n />\n <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">\n <li className="mb-2 tracking-[-.01em]">\n Get started by editing{" "}\n <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">\n app/page.tsx\n \n .\n \n <li className="tracking-[-.01em]">\n Save and see your changes instantly.\n \n \n\n <div className="flex gap-4 items-center flex-col sm:flex-row">\n <a\n className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"\n href="New Project”\n target="_blank"\n rel="noopener noreferrer"\n >\n <Image\n className="dark:invert"\n src="/vercel.svg"\n alt="Vercel logomark"\n width={20}\n height={20}\n />\n Deploy now\n \n <a\n className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"\n href="Next.js Docs | Next.js“\n target="_blank"\n rel="noopener noreferrer"\n >\n Read our docs\n \n \n \n <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">\n <a\n className="flex items-center gap-2 hover:underline hover:underline-offset-4"\n href="Learn Next.js | Next.js by Vercel - The React Framework”\n target="_blank"\n rel="noopener noreferrer"\n >\n <Image\n aria-hidden\n src="/file.svg"\n alt="File icon"\n width={16}\n height={16}\n />\n Learn\n \n <a\n className="flex items-center gap-2 hover:underline hover:underline-offset-4"\n href="Find your Template“\n target="_blank"\n rel="noopener noreferrer"\n >\n <Image\n aria-hidden\n src="/window.svg"\n alt="Window icon"\n width={16}\n height={16}\n />\n Examples\n \n <a\n className="flex items-center gap-2 hover:underline hover:underline-offset-4"\n href="Next.js by Vercel - The React Framework”\n target="_blank"\n rel="noopener noreferrer"\n >\n <Image\n aria-hidden\n src="/globe.svg"\n alt="Globe icon"\n width={16}\n height={16}\n />\n Go to nextjs.org \u2192\n \n \n \n );\n}\n" } }, “jsonrpc”: “2.0” }

14

这个说的有问题，遇到tsx，返回的languageId 应该是typescriptreact