برنامه نویسی

نحوه راه اندازی 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,
          },
        },
      },
    },
  },
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا