neovim cmp intergration for props and emits

[RayGuo-ergou]

Hi neovim users, I want to introduce a nvim-cmp integration I am using for props and emits inspired by this post.

Basically changes:

to:

---

Pass this into your `nvim-cmp` setup opts:

-- To see more information :h cmp-config.sources
sources = cmp.config.sources({
  {
    name = 'nvim_lsp',
    ---@param entry cmp.Entry
    ---@param ctx cmp.Context
    entry_filter = function(entry, ctx)
      -- Check if the buffer type is 'vue'
      if ctx.filetype ~= 'vue' then
        return true
      end

      local cursor_before_line = ctx.cursor_before_line
      -- For events
      if cursor_before_line:sub(-1) == '@' then
        return entry.completion_item.label:match('^@')
      -- For props also exclude events with `:on-` prefix
      elseif cursor_before_line:sub(-1) == ':' then
        return entry.completion_item.label:match('^:') and not entry.completion_item.label:match('^:on%-')
      else
        return true
      end
    end 
  },
})

The regex performance is quite good since it only checks the beginning characters. However, this approach can still lead to issues such as a string union.

For example, with this TypeScript type:

type EmailAddresses = '[email protected]' | '[email protected]'

You will lose the items in nvim-cmp if you only type @. To address this, you can add Treesitter to check if the cursor is in a starting tag. ( I am not a fan of complex regex )

To use a local buffer variable to cache the result of the Treesitter is recommended to avoid performance issues as the function will call for every single entry. Here is an example of how to do it:

-- check if in start tag
local function is_in_start_tag()
  local ts_utils = require('nvim-treesitter.ts_utils')
  local node = ts_utils.get_node_at_cursor()
  if not node then
    return false
  end
  local node_to_check = { 'start_tag', 'self_closing_tag', 'directive_attribute' }
  return vim.tbl_contains(node_to_check, node:type())
end


entry_filter = function(entry, ctx)
  -- Use a buffer-local variable to cache the result of the Treesitter check
  local bufnr = ctx.bufnr
  local cached_is_in_start_tag = vim.b[bufnr]._vue_ts_cached_is_in_start_tag
  if cached_is_in_start_tag == nil then
    vim.b[bufnr]._vue_ts_cached_is_in_start_tag = is_in_start_tag()
  end
  -- If not in start tag, return true
  if vim.b[bufnr]._vue_ts_cached_is_in_start_tag == false then
    return true
  end
  -- rest of the code
end

In your cmp configuration, register an event to clear the cache when the menu is closed:

cmp.event:on('menu_closed', function()
  local bufnr = vim.api.nvim_get_current_buf()
  vim.b[bufnr]._vue_ts_cached_is_in_start_tag = nil
end)

[cjrh]

There's an end missing for the function:

-- To see more information :h cmp-config.sources
sources = cmp.config.sources({
  {
    name = 'nvim_lsp',
    ---@param entry cmp.Entry
    ---@param ctx cmp.Context
    entry_filter = function(entry, ctx)
      -- Check if the buffer type is 'vue'
      if ctx.filetype ~= 'vue' then
        return true
      end

      local cursor_before_line = ctx.cursor_before_line
      -- For events
      if cursor_before_line:sub(-1) == '@' then
        return entry.completion_item.label:match('^@')
      -- For props also exclude events with `:on-` prefix
      elseif cursor_before_line:sub(-1) == ':' then
        return entry.completion_item.label:match('^:') and not entry.completion_item.label:match('^:on%-')
      else
        return true
      end
    end   -- <--- HERE
  },
})

[RayGuo-ergou]

Thanks! I have upated

[RayGuo-ergou]

I found that start_tag is not the only type of node I want this filter so the new function for treesitter is:

local function is_in_start_tag()
  local ts_utils = require('nvim-treesitter.ts_utils')
  local node = ts_utils.get_node_at_cursor()
  if not node then
    return false
  end
  local node_to_check = { 'start_tag', 'self_closing_tag', 'directive_attribute' }
  return vim.tbl_contains(node_to_check, node:type())
end

[exzolink]

It seems that after the latest updates, it no longer works.

@RayGuo-ergou can you confirm?

[RayGuo-ergou]

Still working for me. the only noticeable change is :on-vnode-* changed to @vnode*

[exzolink]

Updated to 2.1.4, now it works.