[pt-BR] NeoVim para Typescript
Tags: vim, typescript, ide
Published: 2021-01-26 12:11:15

Em [outro post aqui](https://dev.to/enrsaid/flutter-no-neo-vim-297k) 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](https://github.com/junegunn/vim-plug) para instalar os plugins para o seu vim. O primeiro passo é adicionar o suporte a linguagem:

```vim
Plug 'HerringtonDarkholme/yats.vim'

```

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

```vim
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`](https://styled-components.com/) é recomendado que se instale o suporte a syntax:

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

Vale considerar também o [Prettier](https://github.com/prettier/vim-prettier):

```vim
Plug 'prettier/vim-prettier'
```

Para o HTML, eu utilizo apenas o [emmet](https://github.com/mattn/emmet-vim):

```vim
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.

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

Indique as extensões que você irá utilizar:
```vim
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
![Exemplo](https://dev-to-uploads.s3.amazonaws.com/i/gp759ir637hu8l9gpjxf.gif)

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

```vim
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
![Exemplo](https://dev-to-uploads.s3.amazonaws.com/i/9w7r6t1imjtqycetyve8.gif)

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


## CoC: Navegação de código
![Exemplo](https://dev-to-uploads.s3.amazonaws.com/i/a0et9x3pg1w2ggpwl8z9.gif)

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

## CoC: Ações de Código
![Exemplo](https://dev-to-uploads.s3.amazonaws.com/i/5etpgolulv07614inmqx.gif)

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

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

{% github enriquesaid/nvim-config %}

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