Journey to Becoming a Vimmer Vol3 ~Setup TS~

Setup TypeScript

Introduction

When I saw a YouTube video about live coding where vimmer code, I was amazed at the speed of coding.
This article is a record until I became a Vimmer.

Prerequisite

• This article was inspired by this
• Using Macbook
• Using Iterm2

Lspconfig

What is Lspconfig

Lspconfig is a language server protocol (LSP) configuration framework for editors such as Vim and Neovim.
LSP is a protocol for linking editors with language servers that provide programming language-specific functions.
Lspconfig provides features such as in-editor auto-completion, real-time error checking, and symbol definition jumps when developing with LSPs.

How to setup

1. Run npm i -g typescript-language-server
2. Add neovim/nvim-lspconfig in lua/plugins.lua
3. Setup Lspconfig in plugin/lspconfig.lua

local status, nvim_lsp = pcall(require, "lspconfig")
if (not status) then return end

local protocol = require('vim.lsp.protocol')

local on_attach = function(client, bufnr)
    -- format on save
  if client.server_capabilities.documentFormattingProvider then
    vim.api.nvim_create_autocmd("BufWritePre", {
      group = vim.api.nvim_create_augroup("Format", { clear = true }),
      buffer = bufnr,
      callback = function() 
        vim.lsp.buf.format({ bufnr = bufnr }) 
      end
    })
  end
end

-- TypeScript
nvim_lsp.tsserver.setup {
  on_attach = on_attach,
  filetypes = { "typescript", "typescriptreact", "typescript.tsx" },
  cmd = { "typescript-language-server", "--stdio" }
}

AutoCompletion(Lspkind and cmp)

What is Lspkind and cmp

How to setup

1.add plugins in lua/plugins.lua

• onsails/lspkind-nvim
• L3MON4D3/LuaSnip
• hrsh7th/cmp-nvim-lsp
• hrsh7th/cmp-buffer
• hrsh7th/nvim-cmp

2.Setup lspkind in after/plugin/cmp.lua

local status, cmp = pcall(require, "cmp")
if (not status) then return end
local lspkind = require 'lspkind'

cmp.setup({
  snippet = {
    expand = function(args)
      require('luasnip').lsp_expand(args.body)
    end,
  },
  mapping = cmp.mapping.preset.insert({
    ['<C-d>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.close(),
    ['<CR>'] = cmp.mapping.confirm({
      behavior = cmp.ConfirmBehavior.Replace,
      select = true
    }),
  }),
  sources = cmp.config.sources({
    { name = 'nvim_lsp' },
    { name = 'buffer' },
  }),
  formatting = {
    format = lspkind.cmp_format({ with_text = false, maxwidth = 50 })
  }
})

vim.cmd [[
  set completeopt=menuone,noinsert,noselect
  highlight! default link CmpItemKind CmpItemMenuDefault
]]

reference this

What does vim.cmd do?

1. control completion behaior. menuone shows completion menu even if there is only one completion candidate, noinsert, noselect set to not automatically insert text or select suggestions during completion.

LSP Uls(Lspsaga)

What is Lspsaga?

Lspsaga is lsp enhance plugin.

How to setup?

1.Add glepnir/lspsaga.nvim in lua/plugins.lua
2.Setup Lspsaga in plugin/lspsage.lua

local status, saga = pcall(require, "lspsaga")
if (not status) then return end

saga.setup({
  ui = {
    winblend = 10,
    border = 'rounded',
    colors = {
      normal_bg = '#002b36'
    }
  },
  symbol_in_winbar = {
    enable = false
  }
})

local diagnostic = require("lspsaga.diagnostic")
local opts = { noremap = true, silent = true }
vim.keymap.set('n', '<C-j>', '<Cmd>Lspsaga diagnostic_jump_next<CR>', opts)
vim.keymap.set('n', 'gl', '<Cmd>Lspsaga show_line_diagnostics<CR>', opts)
vim.keymap.set('n', 'K', '<Cmd>Lspsaga hover_doc<CR>', opts)
vim.keymap.set('n', 'gd', '<Cmd>Lspsaga lsp_finder<CR>', opts)
-- vim.keymap.set('i', '<C-k>', '<Cmd>Lspsaga signature_help<CR>', opts)
vim.keymap.set('i', '<C-k>', '<cmd>lua vim.lsp.buf.signature_help()<CR>', opts)
vim.keymap.set('n', 'gp', '<Cmd>Lspsaga peek_definition<CR>', opts)
vim.keymap.set('n', 'gr', '<Cmd>Lspsaga rename<CR>', opts)

-- code action
vim.keymap.set({ "n", "v" }, "<leader>ca", "<cmd>Lspsaga code_action<CR>")

syntax highlighting(Treesitter)

What is Treesitter?

Treesitter is a parser library for source code parsing and syntax highlighting.

How to setup

1.Run brew install tree-sitter
2.Add nvim-treesitter/nvim-treesitter in lua/plugins.lua
3.Setup nvim-treesitter in plugin/treesitter.lua

local status, ts = pcall(require, "nvim-treesitter.configs")
if (not status) then return end

ts.setup {
  highlight = {
    enable = true,
    disable = {},
  },
  indent = {
    enable = true,
    disable = {},
  },
  ensure_installed = {
    "tsx",
    "toml",
    "fish",
    "php",
    "json",
    "yaml",
    "swift",
    "css",
    "html",
    "lua"
  },
  autotag = {
    enable = true,
  },
}

local parser_config = require "nvim-treesitter.parsers".get_parser_configs()
parser_config.tsx.filetype_to_parsername = { "javascript", "typescript.tsx" }

Autopair and Autotag

What is Autopair?

This is a plugin for auto-bracket completion.

What is Autotag?

Autotag is an automatic tag generation plugin available for Neovim (or Vim). This plugin automatically generates opening and closing tag pairs in HTML, XML, JSX, Vue, etc. files.

How to setup Autopair

1.Add windwp/nvim-autopairs in in lua/plugins.lua
2.Setup Autopair in after/plugin/autopairs.lua

local status, autopairs = pcall(require, "nvim-autopairs")
if (not status) then return end

autopairs.setup({
  disable_filetype = { "TelescopePrompt" , "vim" },
})

How to setup Autotag

1.Add windwp/nvim-ts-autotag in in lua/plugins.lua
2.Setup Autotag in after/plugin/ts-autotag

local status, autotag = pcall(require, "nvim-ts-autotag")
if (not status) then return end

autotag.setup({})

Summarize

Now we can comfortably develop using typescript on vim!!