Journey to Becoming a Vimmer Vol3 ~Setup TS~
Published: 2023-07-08 00:13:05

# 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](https://zenn.dev/takuya/articles/4472285edbc132)
- 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`
```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" }
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fi9eilcp24qamqrnhki.png)

## 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`
```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](https://github.com/craftzdog/dotfiles-public/blob/master/.config/nvim/after/plugin/cmp.rc.lua)

**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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuu8g8elxqcx5n8nlrp4.png)



## 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`
```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`
```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`
```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`
```lua
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!!