CNLS

类名语言服务器。

特性

• 悬停
• 转到定义
• 自动完成

演示

https://github.com/Gnarus-G/cnls/assets/37311893/84af54c0-1695-492c-8081-4bd5d437c901

安装

cargo install cnls

npm install -g cnls

使用方法 (nvim)

local nvim_lsp = require("lspconfig");
local configs = require 'lspconfig.configs'

-- cnls setup
if not configs.cnls then
  configs.cnls = {
    default_config = {
      cmd = { "cnls" },
      filetypes = { "javascript", "javascriptreact", "javascript.jsx", "typescript", "typescriptreact", "typescript.tsx" }
    },
  }
end

nvim_lsp.cnls.setup({
  root_dir = nvim_lsp.util.root_pattern("package.json"),
  capabilities = lsp_capabilities,
  settings = {
    cnls = {
      scopes = { "att:className,class", "fn:createElement" }
    }
  }
})

关于作用域

您可能在除了 className="..." 的其他地方使用 Tailwind 类，甚至 cva(...)。例如，mui 组件中的 classes 属性。

您可以使用 cnls.scopes 设置来定义 cnls 查找类的位置。作用域的语法是 :<...values>

变体 是

• fn 用于目标函数调用（例如 'fn:cva')
• att 用于目标 JSX 属性（例如 'att:className')
• prop 用于目标 JSX 属性（例如 'prop:className')

值 是字符串，您可以在开头或结尾使用通配符 *。例如 'att:className att:*ClassName' 将找到所有这些属性的类

<Btn
  className="w-10 bg-red"
  iconClassName="text-black"
  textClassName="text-xl"
/>

默认情况下，cnls 使用 'att:className,class fn:createElement'。