nvim-html-css
nvim-html-css copied to clipboard
Jezda1337
Error with html-css when run config
Unfortunately, this is a known issue with a ton of files, this issue is fixed in v2. You may want to check it out: https://github.com/Jezda1337/nvim-html-css/tree/v2. However, bdw v2 is still in development mode, and I'm slowly working on it.
@ricardoantonio do you have the same error message? what neovim version are you using?
I'm using neovim 10.2
El sáb, 9 de nov. de 2024 10:01 a. m., Радоје Јездић < @.***> escribió:
@ricardoantonio https://github.com/ricardoantonio do you have the same error message? what neovim version are you using?
— Reply to this email directly, view it on GitHub https://github.com/Jezda1337/nvim-html-css/issues/27#issuecomment-2466267686, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC22KCMQ6GQL5QRCPQLKUY3Z7YWURAVCNFSM6AAAAABMWSBE2OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINRWGI3DONRYGY . You are receiving this because you were mentioned.Message ID: @.***>
I could only reproduce this issue when initializing the htm-css plugin before the CMP plugin. Can someone share the configuration so I can check it?
I tried with this two configs
return {
{
'hrsh7th/nvim-cmp',
event = 'InsertEnter',
dependencies = {
-- Snippet Engine & its associated nvim-cmp source
{
'L3MON4D3/LuaSnip',
build = (function()
-- Build Step is needed for regex support in snippets.
-- This step is not supported in many windows environments.
-- Remove the below condition to re-enable on windows.
if vim.fn.has 'win32' == 1 or vim.fn.executable 'make' == 0 then
return
end
return 'make install_jsregexp'
end)(),
dependencies = {
-- `friendly-snippets` contains a variety of premade snippets.
-- See the README about individual language/framework/plugin snippets:
-- https://github.com/rafamadriz/friendly-snippets
-- {
-- 'rafamadriz/friendly-snippets',
-- config = function()
-- require('luasnip.loaders.from_vscode').lazy_load()
-- end,
-- },
},
},
'saadparwaiz1/cmp_luasnip',
'hrsh7th/cmp-nvim-lsp',
'hrsh7th/cmp-path',
'luckasRanarison/tailwind-tools.nvim', -- Add tailwind colors to completion items
'onsails/lspkind-nvim', -- Add icons to completion items
},
config = function()
-- See `:help cmp`
local cmp = require 'cmp'
local luasnip = require 'luasnip'
luasnip.config.setup {}
cmp.setup {
snippet = {
expand = function(args)
luasnip.lsp_expand(args.body)
end,
},
completion = { completeopt = 'menu,menuone,noinsert' },
-- For an understanding of why these mappings were
-- chosen, you will need to read `:help ins-completion`
--
-- No, but seriously. Please read `:help ins-completion`, it is really good!
mapping = cmp.mapping.preset.insert {
-- Select the [n]ext item
['<C-n>'] = cmp.mapping.select_next_item(),
-- Select the [p]revious item
['<C-p>'] = cmp.mapping.select_prev_item(),
-- Scroll the documentation window [b]ack / [f]orward
['<C-b>'] = cmp.mapping.scroll_docs(-4),
['<C-f>'] = cmp.mapping.scroll_docs(4),
-- Accept ([y]es) the completion.
-- This will auto-import if your LSP supports it.
-- This will expand snippets if the LSP sent a snippet.
['<C-y>'] = cmp.mapping.confirm { select = true },
-- If you prefer more traditional completion keymaps,
-- you can uncomment the following lines
--['<CR>'] = cmp.mapping.confirm { select = true },
--['<Tab>'] = cmp.mapping.select_next_item(),
--['<S-Tab>'] = cmp.mapping.select_prev_item(),
-- Manually trigger a completion from nvim-cmp.
-- Generally you don't need this, because nvim-cmp will display
-- completions whenever it has completion options available.
['<C-Space>'] = cmp.mapping.complete {},
-- Think of <c-l> as moving to the right of your snippet expansion.
-- So if you have a snippet that's like:
-- function $name($args)
-- $body
-- end
--
-- <c-l> will move you to the right of each of the expansion locations.
-- <c-h> is similar, except moving you backwards.
['<C-l>'] = cmp.mapping(function()
if luasnip.expand_or_locally_jumpable() then
luasnip.expand_or_jump()
end
end, { 'i', 's' }),
['<C-h>'] = cmp.mapping(function()
if luasnip.locally_jumpable(-1) then
luasnip.jump(-1)
end
end, { 'i', 's' }),
-- For more advanced Luasnip keymaps (e.g. selecting choice nodes, expansion) see:
-- https://github.com/L3MON4D3/LuaSnip?tab=readme-ov-file#keymaps
},
sources = {
{
name = 'lazydev',
-- set group index to 0 to skip loading LuaLS completions as lazydev recommends it
group_index = 0,
},
{ name = 'nvim_lsp' },
{ name = 'luasnip' },
{ name = 'path' },
{
name = 'html-css',
option = {
-- your configuration here
},
},
},
formatting = {
format = require('lspkind').cmp_format {
mode = 'symbol_text',
menu = {
buffer = '[Buffer]',
nvim_lsp = '[LSP]',
luasnip = '[LuaSnip]',
nvim_lua = '[Lua]',
latex_symbols = '[Latex]',
path = '[Path]',
},
before = require('tailwind-tools.cmp').lspkind_format, -- Add tailwind colors
},
},
}
end,
},
{
'Jezda1337/nvim-html-css',
dependencies = {
'nvim-treesitter/nvim-treesitter',
'nvim-lua/plenary.nvim',
},
config = function()
require('html-css'):setup()
end,
},
}
return {
{
'hrsh7th/nvim-cmp',
event = 'InsertEnter',
dependencies = {
-- Snippet Engine & its associated nvim-cmp source
{
'L3MON4D3/LuaSnip',
build = (function()
-- Build Step is needed for regex support in snippets.
-- This step is not supported in many windows environments.
-- Remove the below condition to re-enable on windows.
if vim.fn.has 'win32' == 1 or vim.fn.executable 'make' == 0 then
return
end
return 'make install_jsregexp'
end)(),
dependencies = {
-- `friendly-snippets` contains a variety of premade snippets.
-- See the README about individual language/framework/plugin snippets:
-- https://github.com/rafamadriz/friendly-snippets
-- {
-- 'rafamadriz/friendly-snippets',
-- config = function()
-- require('luasnip.loaders.from_vscode').lazy_load()
-- end,
-- },
},
},
'saadparwaiz1/cmp_luasnip',
'hrsh7th/cmp-nvim-lsp',
'hrsh7th/cmp-path',
'luckasRanarison/tailwind-tools.nvim', -- Add tailwind colors to completion items
'onsails/lspkind-nvim', -- Add icons to completion items
{
'Jezda1337/nvim-html-css',
dependencies = {
'nvim-treesitter/nvim-treesitter',
'nvim-lua/plenary.nvim',
},
config = function()
require('html-css'):setup()
end,
},
},
config = function()
-- See `:help cmp`
local cmp = require 'cmp'
local luasnip = require 'luasnip'
luasnip.config.setup {}
cmp.setup {
snippet = {
expand = function(args)
luasnip.lsp_expand(args.body)
end,
},
completion = { completeopt = 'menu,menuone,noinsert' },
-- For an understanding of why these mappings were
-- chosen, you will need to read `:help ins-completion`
--
-- No, but seriously. Please read `:help ins-completion`, it is really good!
mapping = cmp.mapping.preset.insert {
-- Select the [n]ext item
['<C-n>'] = cmp.mapping.select_next_item(),
-- Select the [p]revious item
['<C-p>'] = cmp.mapping.select_prev_item(),
-- Scroll the documentation window [b]ack / [f]orward
['<C-b>'] = cmp.mapping.scroll_docs(-4),
['<C-f>'] = cmp.mapping.scroll_docs(4),
-- Accept ([y]es) the completion.
-- This will auto-import if your LSP supports it.
-- This will expand snippets if the LSP sent a snippet.
['<C-y>'] = cmp.mapping.confirm { select = true },
-- If you prefer more traditional completion keymaps,
-- you can uncomment the following lines
--['<CR>'] = cmp.mapping.confirm { select = true },
--['<Tab>'] = cmp.mapping.select_next_item(),
--['<S-Tab>'] = cmp.mapping.select_prev_item(),
-- Manually trigger a completion from nvim-cmp.
-- Generally you don't need this, because nvim-cmp will display
-- completions whenever it has completion options available.
['<C-Space>'] = cmp.mapping.complete {},
-- Think of <c-l> as moving to the right of your snippet expansion.
-- So if you have a snippet that's like:
-- function $name($args)
-- $body
-- end
--
-- <c-l> will move you to the right of each of the expansion locations.
-- <c-h> is similar, except moving you backwards.
['<C-l>'] = cmp.mapping(function()
if luasnip.expand_or_locally_jumpable() then
luasnip.expand_or_jump()
end
end, { 'i', 's' }),
['<C-h>'] = cmp.mapping(function()
if luasnip.locally_jumpable(-1) then
luasnip.jump(-1)
end
end, { 'i', 's' }),
-- For more advanced Luasnip keymaps (e.g. selecting choice nodes, expansion) see:
-- https://github.com/L3MON4D3/LuaSnip?tab=readme-ov-file#keymaps
},
sources = {
{
name = 'lazydev',
-- set group index to 0 to skip loading LuaLS completions as lazydev recommends it
group_index = 0,
},
{ name = 'nvim_lsp' },
{ name = 'luasnip' },
{ name = 'path' },
{
name = 'html-css',
option = {
-- your configuration here
},
},
},
formatting = {
format = require('lspkind').cmp_format {
mode = 'symbol_text',
menu = {
buffer = '[Buffer]',
nvim_lsp = '[LSP]',
luasnip = '[LuaSnip]',
nvim_lua = '[Lua]',
latex_symbols = '[Latex]',
path = '[Path]',
},
before = require('tailwind-tools.cmp').lspkind_format, -- Add tailwind colors
},
},
}
end,
},
}
This is my tree sitter config
return {
'nvim-treesitter/nvim-treesitter',
build = ':TSUpdate',
main = 'nvim-treesitter.configs', -- Sets main module to use for opts
opts = {
ensure_installed = {
'astro',
'bash',
'c',
'comment',
'cpp',
'css',
'csv',
'diff',
'git_config',
'git_rebase',
'gitattributes',
'gitcommit',
'gitignore',
'go',
'gomod',
'gosum',
'gotmpl',
'gowork',
'html',
'http',
'ini',
'javascript',
'jsdoc',
'json',
'lua',
'luadoc',
'markdown',
'markdown_inline',
'python',
'query',
'regex',
'sql',
'tmux',
'toml',
'tsx',
'typescript',
'vim',
'vimdoc',
'vue',
'xml',
'yaml',
},
auto_install = true,
highlight = {
enable = true,
-- Some languages depend on vim's regex highlighting system (such as Ruby) for indent rules.
-- If you are experiencing weird indenting issues, add the language to
-- the list of additional_vim_regex_highlighting and disabled languages for indent.
additional_vim_regex_highlighting = { 'ruby' },
},
indent = { enable = true, disable = { 'ruby' } },
},
}
Is it possible to share whole neovim config? if not can you put this inside option table and try again
enable_on = {
"html",
}, -- set the file types you want the plugin to work on
dir_to_exclude = { "sdk" },
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",
},
it works!
My Nvim config: https://github.com/ricardoantonio/neovim-config/tree/main
The autocompletion file: https://github.com/ricardoantonio/neovim-config/blob/main/lua/plugins/autocompletion.lua
Is it something related to this line? dir_to_exclude = { "sdk" },
Is there a way to make it work with jsx and tsx and the className property?
Thanks for sharing ur config. It wasn't related to dir_to_exclude, did you have something inside option table before? The problem was something with the custom config you had there.
Yes you can add something like this:
enable_on = {
"html",
"javascriptreact",
"typescriptreact",
}, -- set the file types you want the plugin to work on
This was the config I had, as the lazy installation example in the readme page.
{
name = 'html-css',
option = {
-- your configuration here
},
},
That was the reason for your error, you cannot have option with only a comment inside. Under the lazy section there is a configuration section which you can use to configure the plugin. link. Maybe I should merge this two section, to avoid conflicts like this.
Yes, please, that would be very useful.
Just to clarify, so the plugin can't be added as a dependency of nvim-cmp? It might also be a good idea to include a note specifying that it needs to be loaded after nvim-cmp, although with the installation example it should be clear. I just wanted to include it alongside the other cmp plugins.
Yes html-css plugin cannot be added as dependency of nvim-cmp. Thanks for suggestions, I will update README.md.
Thank you! Now your plugin is working in my config! Thanks for your great work!