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
- Run
npm i -g typescript-language-server - Add
neovim/nvim-lspconfiginlua/plugins.lua - 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-nvimL3MON4D3/LuaSniphrsh7th/cmp-nvim-lsphrsh7th/cmp-bufferhrsh7th/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?
- control completion behaior.
menuoneshows completion menu even if there is only one completion candidate,noinsert,noselectset 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!!
Top comments (0)