Neovim에서 VueJ를 설정하는 방법(1월 5일)

안녕하세요. vuejs 플러그인으로 neovim을 설정하는 데 문제가 있어서 작동 방법에 대한 지식을 공유합니다.

이 글에서는 LazyVim을 사용하여 플러그인을 추가하고 수정하는 방법에 대한 기본 지식이 있다고 가정합니다.

저는 kickstart.nvim을 사용하고 있습니다.

우리가 사용할 패키지: 자동 완성을 위한 blink.cmp, typescript LSP를 위한 typescript-tools, 설정을 위한 neovim/nvim-lspconfig LSP와 Mason을 설치하려면 볼라.

1) Typescript 도구 설정:

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,
}

typescript-tools 입니다. tsserver이지만 더 빠릅니다.

tsserver_plugins 테이블에서 @vue/typescript-plugin을 호출합니다.

최신 버전의 Volar는 TypeScript LSP에 자체적으로 내장되어 기능을 제공합니다.

이 플러그인을 실제로 설치해야 합니다.
이상적으로는 프로젝트 단위로 현재 전 세계에 설치했습니다.
npm i -g @vue/typescript-plugin

2) Lsp구성:
우리는 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('<leader>D', require('telescope.builtin').lsp_type_definitions, 'Type [D]efinition')
          map('<leader>ds', require('telescope.builtin').lsp_document_symbols, '[D]ocument [S]ymbols')
          map('<leader>ws', require('telescope.builtin').lsp_dynamic_workspace_symbols, '[W]orkspace [S]ymbols')
          map('<leader>cr', vim.lsp.buf.rename, '[R]e[n]ame')
          map('<leader>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,
  },
</leader></leader></leader></leader></leader>

여기서 가장 중요한 것은 blink.cmp를 전달하고 .vue 파일에 대한 LSP로 volar를 설정한다는 것입니다.

neovim을 열고 volar를 설치하세요.

: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 = {
        ['<c-space>'] = { 'show', 'show_documentation', 'hide_documentation' },
        ['<c-e>'] = { 'hide', 'fallback' },
        ['<cr>'] = { 'accept', 'fallback' },

        ['<tab>'] = {
          function(cmp)
            return cmp.select_next()
          end,
          'snippet_forward',
          'fallback',
        },
        ['<s-tab>'] = {
          function(cmp)
            return cmp.select_prev()
          end,
          'snippet_backward',
          'fallback',
        },

        ['<up>'] = { 'select_prev', 'fallback' },
        ['<down>'] = { 'select_next', 'fallback' },
        ['<c-p>'] = { 'select_prev', 'fallback' },
        ['<c-n>'] = { 'select_next', 'fallback' },
        ['<c-up>'] = { 'scroll_documentation_up', 'fallback' },
        ['<c-down>'] = { '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,
          },
        },
      },
    },
  },
</c-down></c-up></c-n></c-p></down></up></s-tab></tab></cr></c-e></c-space>

위 내용은 Neovim에서 VueJ를 설정하는 방법(1월 5일)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!