cnls
v0.1.2
Published
Class Name Language Server for web frontend projects.
Downloads
6
Maintainers
Readme
CNLS
Class Name Language Server.
Features:
- [x] Hover
- [x] Go To Definition
- [ ] Completions
Demo
https://github.com/Gnarus-G/cnls/assets/37311893/84af54c0-1695-492c-8081-4bd5d437c901
Install
cargo install cnls
npm install -g cnls
Usage (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" }
}
}
})
About Scopes
You may have tailwind classes in other places besides className="..."
, or even cva(...)
.
For examples, the classes
prop in mui components.
You can define places for cnls
to look for classes with the cnls.scopes
settings.
The syntax for a scope is :<...values>
Variants are:
fn
to target a function call (e.g 'fn:cva')att
to target a jsx attribute (e.g. 'att:className')prop
to target a jsx attribute (e.g. 'prop:className')
Values are strings, and you can use a wildcard *
at the begining or the end.
For example 'att:className att:*ClassName' will find classes all of these attributes
<Btn
className="w-10 bg-red"
iconClassName="text-black"
textClassName="text-xl"
/>
By default cnls
uses 'att:className,class fn:createElement'.