roobert / tailwindcss-colorizer-cmp.nvim

:rainbow: A Neovim plugin to add vscode-style TailwindCSS completion to nvim-cmp
323 stars 3 forks source link

Installation with Lsp-Zero #17

Open RafaelZasas opened 6 months ago

RafaelZasas commented 6 months ago

I am following This Guide to setup my LSP, Auto complete and LSP installations.

In the guide, it is stated that the name for the sources property on cmp.setup is not the same as the plugin name.

What is the source name for this plugin?

Am I able to use this plugin alongside other CMP sources?

This is my config for cmp:

local cmp = require('cmp')
local lsp_zero = require('lsp-zero')

local cmp_action = lsp_zero.cmp_action()
local cmp_format = lsp_zero.cmp_format()

cmp.setup({
    preselect = 'item',
    completion = {
        completeopt = 'menu,menuone,noinsert',
    },
    sources = {
        { name = 'nvim_lsp' }, -- lsp
        { name = 'buffer' },   -- text within the current buffer
        { name = 'path' },     -- file system paths
        { name = 'emoji' },
        { name = 'luasnip' },
        { name = 'vsnip' },
        { name = 'calc' },
        {
            name = 'spell',
            option = {
                keep_all_entries = false,
                enable_in_context = function()
                    return true
                end,
            },
        },

    },
    mapping = cmp.mapping.preset.insert({
        -- `Enter` key to confirm completion
        ['<CR>'] = cmp.mapping.confirm({ select = false }),

        -- Ctrl+Space to trigger completion menu
        ['<C-Space>'] = cmp.mapping.complete(),

        -- Abort completion
        ['<C-e>'] = cmp.mapping.abort(),

        -- Navigate between snippet placeholder
        ['<C-f>'] = cmp_action.luasnip_jump_forward(),
        ['<C-b>'] = cmp_action.luasnip_jump_backward(),

        -- scroll up and down the documentation window
        ['<C-u>'] = cmp.mapping.scroll_docs(-4),
        ['<C-d>'] = cmp.mapping.scroll_docs(4),

        -- SuperTab
        ['<Tab>'] = cmp_action.luasnip_supertab(),
        ['<S-Tab>'] = cmp_action.luasnip_shift_supertab(),
    }),
    -- Show source name in completion menu
    formatting = cmp_format,

    snippet = {
        expand = function(args)
            require('luasnip').lsp_expand(args.body)
        end,
    },
    window = {
        completion = cmp.config.window.bordered(),
        documentation = cmp.config.window.bordered(),
    },
})

I was able to get the plugin to work, and show tailwindcss colors by replacing cmp_format with format = require("tailwindcss-colorizer-cmp").formatter } but then I lose autocompletion from my LSP, which is not ideal.

I see that other CMP sources such as buffer follow a similar pattern of including a after/plugin/insert_source_name.lua. With contents of (something like):

require('cmp').register_source('buffer', require('cmp_buffer'))

I tried including cmp.register_source('tailwindcss-colors', require('tailwindcss-colorizer-cmp').formatter) and then adding {name = 'tailwindcss-colors'} to the sources, but I got shouted at by cmp when trying to trigger autocomplete.

I'm a bit stuck.

RafaelZasas commented 6 months ago

I realize now that this doesnt actually have any opinion on what the completion menu contains, just how it is styled.

Nevertheless, I got it working as follows:

local cmp = require("cmp")
local lsp_zero = require("lsp-zero")

local cmp_action = lsp_zero.cmp_action()
local cmp_format = lsp_zero.cmp_format()
local tailwindcss_colors = require("tailwindcss-colorizer-cmp")

local cmp_formatter = function(entry, vim_item)
    -- vim_item as processed by tailwindcss-colorizer-cmp
    vim_item = tailwindcss_colors.formatter(entry, vim_item)

    -- change menu (name of source)
    vim_item.menu = ({
        nvim_lsp = "[LSP]",
        buffer = "[Buffer]",
        path = "[Path]",
        emoji = "[Emoji]",
        luasnip = "[LuaSnip]",
        vsnip = "[VSCode Snippet]",
        calc = "[Calc]",
        spell = "[Spell]",
    })[entry.source.name]
    return vim_item
end

cmp.setup({
     -- same preselect and completion as before
     -- same sources as before
     -- Same mappings as before
    formatting = {
        -- changing the order of fields so the icon is the first
        fields = { "menu", "abbr", "kind" },
        format = cmp_formatter,
    },
    -- same window and snippet as before
})
SirFrey commented 6 months ago

Thanks man, I was looking for something similar for my lsp-zero config, I didn't want to deep so much and thanks god I found you!!!