Em outro post aqui eu descrevi como configurei o vim para trabalhar com Dart e Flutter. Da mesma forma, pretendo te ajudar a configurar o seu vim para trabalhar com typescript.

Suporte a linguagem

Considerando que você utilize o vim-plug para instalar os plugins para o seu vim. O primeiro passo é adicionar o suporte a linguagem:

Plug 'HerringtonDarkholme/yats.vim' 

React

Se você vai utilizar React (arquivos .tsx):

Plug 'MaxMEllon/vim-jsx-pretty' 

Plugins

Aqui você precisa considerar as ferramentas que você utiliza no seu dia-a-dia. Por exemplo, para quem utiliza styled-components é recomendado que se instale o suporte a syntax:

Plug 'styled-components/vim-styled-components', { 'branch': 'main' } 

Vale considerar também o Prettier:

Plug 'prettier/vim-prettier' 

Para o HTML, eu utilizo apenas o emmet:

Plug 'mattn/emmet-vim' 

CoC

Com os plugins acima você vai conseguir desenvolver tranquilo, com syntax highlight e tudo mais. Porem, para obter recursos mais atuais como "go-to-definition", "autocomplete" e "auto import" precisamos instalar o CoC.

Plug 'neoclide/coc.nvim', {'branch': 'release'} 

Indique as extensões que você irá utilizar:

let g:coc_global_extensions = [  \ 'coc-snippets',  \ 'coc-actions',  \ 'coc-lists',  \ 'coc-tsserver',  \ 'coc-html',  \ 'coc-css',  \ 'coc-prettier',  \ 'coc-vimlsp',  \ ] 

Você também pode instalar por dentro do neovim com o comando:

:CocInstall <extension-name> 

CoC: Popup de sugestão

<Tab> para navegar e <Ctrl-Space> para abrir popup de sugestão:

inoremap <silent><expr> <TAB>  \ pumvisible() ? "\<C-n>" :  \ <SID>check_back_space() ? "\<TAB>" :  \ coc#refresh() inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>" function! s:check_back_space() abort let col = col('.') - 1 return !col || getline('.')[col - 1] =~# '\s' endfunction inoremap <silent><expr> <c-space> coc#refresh() 

CoC: Renomear Símbolo

nmap <leader>rn <Plug>(coc-rename) 

CoC: Navegação de código

nmap <silent> gf <Plug>(coc-definition) 

CoC: Ações de Código

Exemplo de uso: <leader>aap para o parágrafo atual. <leader>aw para a palavra.

xmap <silent> <leader>a <Plug>(coc-codeaction-selected) nmap <silent> <leader>a <Plug>(coc-codeaction-selected) 

CoC: Lista de comandos, extensões e diagnósticos

nnoremap <silent> <space>a :<C-u>CocList diagnostics<cr> nnoremap <silent> <space>e :<C-u>CocList extensions<cr> nnoremap <silent> <space>c :<C-u>CocList commands<cr> 

Meu setup

Vou deixar aqui o repositório onde mantenho minha config. Além do que foi falado aqui você também vai encontrar o tema que eu uso e outras configurações pessoais. Vale pesquisar o da galera por ai também :)

:PaqInstall :PaqSync :LspInstall lua :LspInstall typescript :LspInstall html :LspInstall css :TSInstall lua :TSInstall javascript :TSInstall typescript :TSInstall json :TSInstall html :TSInstall css :TSInstall yaml :TSInstall dart

Qualquer coisa estamos ai nos comentários 😄
Um abraço!