Neovim CSS Intellisense for HTML
- HTML
idandclassattribute completion. - Supports
linkedandembeddedstyle sheets. - Supports additional
style sheets.
- plenary.nvim
- sharkdp/fd (finder)
⚠️ Currently, the plugin only works in projects that contain a .git folder, in case your project is not initialized using git, you can create a .git folder to use the plugin, this is only temporary.
⚠️ In case your tree-sitter is lazy loaded, you must also lazy load the html-css plugin in the same way as the tree-sitter. Another way is to add dependencies as in the example below.
return require("lazy").setup({
{
"hrsh7th/nvim-cmp",
opts = {
sources = {
-- other sources
{
name = "html-css",
option = {
-- your configuration here
},
},
},
},
},
{ "Jezda1337/nvim-html-css",
dependencies = {
"nvim-treesitter/nvim-treesitter",
"nvim-lua/plenary.nvim"
},
config = function()
require("html-css"):setup()
end
}
})option = {
max_count = {}, -- not ready yet
enable_on = {
"html"
...
}, -- set the file types you want the plugin to work on
file_extensions = { "css", "sass", "less" }, -- set the local filetypes from which you want to derive classes
style_sheets = {
-- example of remote styles, only css no js for now
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css",
}
}explanation and types for options.
| Property | Type | Description |
|---|---|---|
| max_count | number | Max item in cmp menu |
| enable_on | table | Table accepts strings, one string one extension in which the plugin will be available |
| file_extensions | table | Table accepts strings, extensions that you enter, classes that will be available to you will be read from them. |
| style_sheets | table | External cdn css styles such as bootstrap or bulma. The link must be valid. Can be minified version or normal. |
Setting the formatter this way you will get the file name with an extension in your cmp menu, so you know from which file that class coming.
require("cmp").setup({
sources = {
{
name = "html-css"
},
},
formatting = {
format = function(entry, vim_item)
if entry.source.name == "html-css" then
vim_item.menu = entry.completion_item.menu
end
return vim_item
end
}
})