[pt-BR] NeoVim para Typescript

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 :)

enriquesaid / nvim-config

my nvim config

nvim-config

my nvim config

requirements

• nvim 0.5+ 🤪
• paq-nvim

color scheme

• dracula

install

: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

View on GitHub

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

Comments

[Kleber Motta]

Cara, sensacional, ficou muito bacana o resultado. Sou iniciante no Vim e depois que comecei a usar me apaixonei, vou usar esse setup tmb, muito obrigado!