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 = 'a@b.c' | 'd@e.f'

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 node = vim.treesitter.get_node() 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.

[RayGuo-ergou]

Made a small update to use neovim native api to get TS node, here's the diff. From what i have tested so far, it works identical. (Maybe require neovim version ^0.11 not sure)

- local ts_utils = require('nvim-treesitter.ts_utils') - local node = ts_utils.get_node_at_cursor() + local node = vim.treesitter.get_node()

see :h vim.treesitter.get_node()