نحوه راه اندازی VueJs در Neovim (ژانویه 2025)

سلام، من در راه اندازی neovim با پلاگین های vuejs مشکل داشتم، بنابراین من دانش را در مورد نحوه عملکرد آن به اشتراک می گذارم.
این مقاله دانش اولیه در مورد نحوه افزودن و اصلاح افزونه های خود را با فرض می کند LazyVim.
من استفاده میکنم kickstart.nvim.
بسته هایی که ما استفاده خواهیم کرد: blink.cmp برای تکمیل خودکار، تایپ اسکریپت-ابزار برای تایپ اسکریپت LSP، neovim/nvim-lspconfig برای راه اندازی LSP، و میسون بنابراین ما می توانیم volar را نصب کنیم.
1) تنظیم ابزار تایپ اسکریپت:
return {
'pmizio/typescript-tools.nvim',
dependencies = { 'nvim-lua/plenary.nvim', 'neovim/nvim-lspconfig' },
opts = {},
ft = { 'javascript', 'javascriptreact', 'typescript', 'typescriptreact', 'vue' },
config = function()
require('typescript-tools').setup {
on_attach = function(client, bufnr)
client.server_capabilities.documentFormattingProvider = false
client.server_capabilities.documentRangeFormattingProvider = false
end,
filetypes = {
'javascript',
'javascriptreact',
'typescript',
'typescriptreact',
'vue',
},
settings = {
tsserver_plugins = {
'@vue/typescript-plugin',
},
jsx_close_tag = {
enable = true,
filetypes = { 'javascriptreact', 'typescriptreact' },
},
},
}
end,
}
این است تایپ اسکریپت-ابزار. tsserver است، اما سریعتر.
در جدول tsserver_plugins، ما در حال فراخوانی هستیم @vue/typescript-plugin.
نسخه های اخیر Volar، خود را در تایپ اسکریپت LSP تعبیه می کند و قابلیت هایی را برای آن فراهم می کند.
ما باید در واقع این افزونه را نصب کنیم.
در حالت ایده آل بر اساس هر پروژه، من آن را از هم اکنون به صورت جهانی نصب کردم.
npm i -g @vue/typescript-plugin
2) LspConfig:
در حال استفاده هستیم neovim/nvim-lspconfig برای تنظیم عملکردهای lsp.
return {
'neovim/nvim-lspconfig',
dependencies = {
{ 'williamboman/mason.nvim', config = true },
'williamboman/mason-lspconfig.nvim',
'WhoIsSethDaniel/mason-tool-installer.nvim',
{ 'j-hui/fidget.nvim', opts = {} },
'saghen/blink.cmp',
},
config = function()
local capabilities = vim.lsp.protocol.make_client_capabilities()
capabilities = require('blink.cmp').get_lsp_capabilities(capabilities)
local servers = {
volar = { 'vue' },
lua_ls = {
settings = {
Lua = {
completion = { callSnippet = 'Replace' },
},
},
},
}
require('mason').setup()
local ensure_installed = vim.tbl_keys(servers)
-- vim.list_extend(ensure_installed, { 'stylua' })
require('mason-tool-installer').setup { ensure_installed = ensure_installed }
-- Setup mason-lspconfig
require('mason-lspconfig').setup {
ensure_installed = ensure_installed,
handlers = {
function(server_name)
local opts = servers[server_name] or {}
opts.capabilities = vim.tbl_deep_extend('force', {}, capabilities, opts.capabilities or {})
require('lspconfig')[server_name].setup(opts)
end,
},
}
-- Setup LspAttach autocmd for keymaps and additional functionality
vim.api.nvim_create_autocmd('LspAttach', {
group = vim.api.nvim_create_augroup('kickstart-lsp-attach', { clear = true }),
callback = function(event)
local map = function(keys, func, desc, mode)
mode = mode or 'n'
vim.keymap.set(mode, keys, func, { buffer = event.buf, desc = 'LSP: ' .. desc })
end
map('gd', require('telescope.builtin').lsp_definitions, '[G]oto [D]efinition')
map('gr', require('telescope.builtin').lsp_references, '[G]oto [R]eferences')
map('gI', require('telescope.builtin').lsp_implementations, '[G]oto [I]mplementation')
map('D' , require('telescope.builtin').lsp_type_definitions, 'Type [D]efinition')
map('ds' , require('telescope.builtin').lsp_document_symbols, '[D]ocument [S]ymbols')
map('ws' , require('telescope.builtin').lsp_dynamic_workspace_symbols, '[W]orkspace [S]ymbols')
map('cr' , vim.lsp.buf.rename, '[R]e[n]ame')
map('ca' , vim.lsp.buf.code_action, '[C]ode [A]ction', { 'n', 'x' })
map('gD', vim.lsp.buf.declaration, '[G]oto [D]eclaration')
local client = vim.lsp.get_client_by_id(event.data.client_id)
if client and client.supports_method(vim.lsp.protocol.Methods.textDocument_documentHighlight) then
local highlight_group = vim.api.nvim_create_augroup('kickstart-lsp-highlight', { clear = false })
vim.api.nvim_create_autocmd({ 'CursorHold', 'CursorHoldI' },
{
buffer = event.buf,
group = highlight_group,
callback = vim.lsp.buf.document_highlight,
})
vim.api.nvim_create_autocmd({ 'CursorMoved', 'CursorMovedI'}, {
buffer = event.buf,
group = highlight_group,
callback = vim.lsp.buf.clear_references,
})
end
end,
})
end,
},
مهمترین چیز اینجا این است که ما در حال عبور هستیم blink.cmp و اینکه ما در حال راه اندازی volar به عنوان LSP خود برای فایل های .vue هستیم.
neovim را باز کنید و نصب کنید ولار.
:MasonInstall vue-language-server
Neovim را مجدداً راه اندازی کنید و این باید باشد. شما باید تمام عملکردها را داشته باشید، به تعریف بروید، به مرجع بروید، خطاهای lsp و غیره.
پیکربندی تکمیل خودکار
اگر یک افزونه تکمیل خودکار کاربردی دارید، این را نادیده بگیرید.
من قصد دارم پیکربندی خود را برای آن به اشتراک بگذارم blink.cmp در صورت نیاز به یکی
return {
'saghen/blink.cmp',
-- dependencies = { 'rafamadriz/friendly-snippets', 'onsails/lspkind.nvim' },
dependencies = { 'onsails/lspkind.nvim' },
version = '*',
---@module 'blink.cmp'
---
---@type blink.cmp.Config
opts = {
keymap = {
['' ] = { 'show', 'show_documentation', 'hide_documentation' },
['' ] = { 'hide', 'fallback' },
['' ] = { 'accept', 'fallback' },
['' ] = {
function(cmp)
return cmp.select_next()
end,
'snippet_forward',
'fallback',
},
['' ] = {
function(cmp)
return cmp.select_prev()
end,
'snippet_backward',
'fallback',
},
['' ] = { 'select_prev', 'fallback' },
['' ] = { 'select_next', 'fallback' },
['' ] = { 'select_prev', 'fallback' },
['' ] = { 'select_next', 'fallback' },
['' ] = { 'scroll_documentation_up', 'fallback' },
['' ] = { 'scroll_documentation_down', 'fallback' },
},
appearance = {
use_nvim_cmp_as_default = true,
nerd_font_variant = 'mono',
},
completion = {
accept = {
auto_brackets = {
enabled = true,
},
},
list = {
selection = function(ctx)
return ctx.mode == 'cmdline' and 'auto_insert' or 'preselect'
end,
},
--
menu = {
border = 'rounded',
cmdline_position = function()
if vim.g.ui_cmdline_pos ~= nil then
local pos = vim.g.ui_cmdline_pos -- (1, 0)-indexed
return { pos[1] - 1, pos[2] }
end
local height = (vim.o.cmdheight == 0) and 1 or vim.o.cmdheight
return { vim.o.lines - height, 0 }
end,
draw = {
columns = {
{ 'kind_icon', 'label', gap = 1 },
{ 'kind' },
},
components = {
kind_icon = {
text = function(item)
local kind = require('lspkind').symbol_map[item.kind] or ''
return kind .. ' '
end,
highlight = 'CmpItemKind',
},
label = {
text = function(item)
return item.label
end,
highlight = 'CmpItemAbbr',
},
kind = {
text = function(item)
return item.kind
end,
highlight = 'CmpItemKind',
},
},
},
},
},
sources = {
default = { 'lsp', 'path', 'buffer', 'snippets' },
cmdline = {},
providers = {
lsp = {
min_keyword_length = 2, -- Number of characters to trigger porvider
score_offset = 0, -- Boost/penalize the score of the items
},
path = {
min_keyword_length = 0,
},
snippets = {
min_keyword_length = 2,
},
buffer = {
min_keyword_length = 2,
},
},
},
},
},