DEV Community

Cover image for [pt-BR] NeoVim para Typescript
Enrique Marques Junior
Enrique Marques Junior

Posted on • Edited on

[pt-BR] NeoVim para Typescript

#vim #typescript #ide

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'
Enter fullscreen mode Exit fullscreen mode

React

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

Plug 'MaxMEllon/vim-jsx-pretty'
Enter fullscreen mode Exit fullscreen mode

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' }
Enter fullscreen mode Exit fullscreen mode

Vale considerar também o Prettier:

Plug 'prettier/vim-prettier'
Enter fullscreen mode Exit fullscreen mode

Para o HTML, eu utilizo apenas o emmet:

Plug 'mattn/emmet-vim'
Enter fullscreen mode Exit fullscreen mode

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'}
Enter fullscreen mode Exit fullscreen mode

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',
  \ ]
Enter fullscreen mode Exit fullscreen mode

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

:CocInstall <extension-name>
Enter fullscreen mode Exit fullscreen mode

CoC: Popup de sugestão

Exemplo

<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()
Enter fullscreen mode Exit fullscreen mode

CoC: Renomear Símbolo

Exemplo

nmap <leader>rn <Plug>(coc-rename)
Enter fullscreen mode Exit fullscreen mode

CoC: Navegação de código

Exemplo

nmap <silent> gf <Plug>(coc-definition)
Enter fullscreen mode Exit fullscreen mode

CoC: Ações de Código

Exemplo

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)
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo enriquesaid / nvim-config

my nvim config

nvim-config

my nvim config

requirements

color scheme

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
Enter fullscreen mode Exit fullscreen mode
View on GitHub

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

Top comments (1)

Collapse
 
klebermotta profile image
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!