Guia de sobrevivência: Typescript no Vim

Apesar de ter um nome direcionado para o typescript esse texto te guiará no rumo para deixar o vim com cara de VSCode. Diante disso, presumo que já esteja com seu Vim devidamente instalado.

Arquivo .vimrc

Antes de fazermos as instalações dos plugins é importante saber que o vim possui um arquivo de configuração, onde iremos realizar a maioria das nossas configurações.

Quase sempre ele estará em seu diretório principal, /home/$usuario e oculto. Para acessar, basta digitar no terminal:

$ vim ~/.vimrc

Configurações padrões no seu .vimrc

Basta copiar e colar essas configurações, caso não queria colocar uma delas é só retirar.

set autoindent 
“Para indentação automática
set history=100 
“Mantém o histórico dos seus últimos 100 comandos (pode ser mais ou menos)
set mouse=a 
“Usar o mouse dentro do vim
set number
“Mostrar o número das linhas
set cursorline
“Algumas configurações para o tab
set shiftwidth=2 
“Número de espaços para usar no autoindent
set expandtab
set tabstop=2
set softtabstop=2
set clipboard=unnamedplus
set nocompatible
set laststatus=2

Plugins

VundleVim/Vundle.vim — https://github.com/vim-airline/vim-airline

É possível instalar plugins sem a necessidade de uma ferramenta como o Vundle por exemplo, entretanto, como quero economizar tempo, acredito que o Vundle deixe ações como essas bem mais rápidas.

Para utilizá-lo, basta clonar o repositório, em sua pasta do vim que geralmente em distribuições linux é essa ~/.vim.

git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

Após clonar o repositório em sua pasta do vim, basta copiar esse trecho:

filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin ‘VundleVim/Vundle.vim’
call vundle#end() 
filetype plugin indent on 

Vocês podem copiar do jeito que está no repositório do github, porém vem com algumas extensões que particularmente não gosto.

A partir desse momento vocês vão poder instalar qualquer plugin.

É muito importante que se atente a isso aqui:

set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
"--- INÍCIO ---
Plugin 'VundleVim/Vundle.vim'
Plugin 'extensaonova/typescriptehdemais.vim'
"--- FIM ---
call vundle#end()

Entre o início e o fim, é que será colocado cada extensão.

Logo após isso, basta salvar, sair do vim e entrar de novo. Quando entrar digite (no modo visual) ‘:PluginInstall’ para que os plugins sejam carregados.

Extensões para deixar o VIM BONITÃO

vim-airline/vim-airline — https://github.com/vim-airline/vim-airline

vim-airline/vim-airline-themes — https://github.com/vim-airline/vim-airline

Esses plugins servem apenas para deixar a barra dos modos mais bonita e personalizada.

Plugin ‘vim-airline/vim-airline’

Plugin ‘vim-airline/vim-airline-themes’

Para escolher um dos temas basta acessar aqui e escolher um dos tema.

let g:airline_statusline_ontop=0
let g:airline#extensions#tabline#enabled = 1
let g:airline_powerline_fonts = 1
let g:airline#extensions#tabline#buffer_nr_show = 1
let g:airline_theme=’violet’ “ Coloque aqui o tema que foi escolhido.
let g:airline#extensions#tabline#formatter = ‘default’

dracula/vim — https://github.com/dracula/vim

Acredito que muitos gostam desse tema, então caso seja do seu interesse fazer a instalação do mesmo, basta seguir os passos que os próprios desenvolvedores fizeram, porém vou colocar aqui para ficar mais fácil.

Criar uma pasta para temas no diretório do vim:

mkdir -p ~/.vim/pack/themes/start 

navegar até a pasta criada:

cd ~/.vim/pack/themes/start

clonar o repositório do dracula para a pasta start

git clone https://github.com/dracula/vim.git dracula 

Após isso basta abrir o seu .vimrc e colar as seguintes instruções

packadd! dracula
syntax enable
colorscheme dracula

Caso você não goste desse tema, basta procurar um de sua preferência e fazer os mesmos procedimentos, apagando a linha packadd! Dracula, e no lugar de dracula no colorscheme, você coloca o tema de sua preferência.

alvan/vim-closetag — https://github.com/alvan/vim-closetag

Plugin ‘alvan/vim-closetag’

Será necessário adicionar algumas variáveis para que o auto fechamento das tags funcionem.

let g:closetag_filenames = “*.html,*.xhtml,*.jsx,*.tsx”
let g:closetag_emptyTags_caseSensitive = 1
let g:closetag_shortcut = ‘>’
let g:closetag_close_shortcut = ‘<leader>>’

Não vem ao caso explicar o que cada uma faz, porém essa primeira é indispensável para que funcione em linguagens como html, jsx ou tsx. Caso exista outras linguagens que usem tag, basta digitar logo após o *.tsx, *.extensaodeoutralinguagem.

jiangmiao/auto-pairs — https://github.com/jiangmiao/auto-pairs

Anteriormente, vimos uma extensão para fechamento automático de tags, já esse plugin essa extensão tem como funcionalidade, fechar parênteses, colchetes, aspas, chaves, entre outras.

Plugin ‘jiangmiao/auto-pairs’

ap/vim-css-color — https://github.com/ap/vim-css-color

Se você gosta dos pequenos detalhes assim como eu, vai adorar ver seu css com as cores todas bonitinhas igual o Colorize ou Color Highlight (ambas extensões do VSCode).

Plugin ‘ap/vim-css-color’

preservim/nerdtree — https://github.com/preservim/nerdtree

Diria que o nerdtree é um dos plugins indispensáveis para quem quer ter uma boa produtividade no vim.

Para abrir o nerdtree basta ctrl + n e navegar.

Além de poder fazer a navegação, também é possível criar pastas e arquivos, renomear, deletar e até mesmo abrir o documento na pasta que está.

Para fazer isso, basta ir em um dos arquivos ou pastas e digitar ‘m’ e selecionar uma das opções.

Plugin ‘preservim/nerdtree’

Após instalar, basta colar essas configurações no ‘.vimrc’

filetype plugin on
set encoding=utf8
let g:NERDTreeShowHidden=1 
“ Mostrar arquivos ocultos
let g:NERDSpaceDelims = 1
let g:NERDDefaultAlign = ‘left’
let g:NERDTreeWinPos = “right” 
“aqui você pode colocar left, para abrir seu nerdtree pela esquerda
let g:NERDTreeDirArrowExpandable = ‘▸’
let g:NERDTreeDirArrowCollapsible = ‘▾’
let g:NERDTreeGitStatusUseNerdFonts = 1 
map cc <Plug>NERDCommenterInvert
map <C-n> :NERDTreeToggle<cr>

Xuyuanp/nerdtree-git-plugin — https://github.com/Xuyuanp/nerdtree-git-plugin

Este plugin serve apenas como uma forma de mostrar quais são os arquivos que foram editados, adicionados na branch e outras funcionalidades. Nos ajuda bastante a termos a noção do que já foi mexido.

Para que os ícones apareçam, basta apenas colar isso no seu .vimrc

let g:NERDTreeGitStatusIndicatorMapCustom = {
\ ‘Modified’ :’✹’,
\ ‘Staged’ :’✚’,
\ ‘Untracked’ :’✭’,
\ ‘Renamed’ :’➜’,
\ ‘Unmerged’ :’═’,
\ ‘Deleted’ :’✖’,
\ ‘Dirty’ :’✗’,
\ ‘Ignored’ :’☒’,
\ ‘Clean’ :’✔︎’,
\ ‘Unknown’ :’?’,
\ }

Plugin ‘Xuyuanp/nerdtree-git-plugin’

lepture/vim-css — https://github.com/lepture/vim-css

Para ajudar na inteligência do css (se posso dizer assim):

Plugin ‘lepture/vim-css’

terryma/vim-multiple-cursors https://github.com/terryma/vim-multiple-cursors

Para editar múltiplas palavras, frases e expressões esse plugin irá te ajudar.

Para fazer essa seleção, basta no modo visual selecionar a palavra e digitar crtl + d para selecionar todas as palavras. Após selecionar todas, basta apertar c. Caso queira cancelar a selecão Esc.

Algumas variáveis que precisam estar no seu .vimrc

let g:multi_cursor_start_word_key = ‘<C-d>’
let g:multi_cursor_next_key = ‘<C-d>’
let g:multi_cursor_quit_key = ‘<Esc>’
let g:multi_cursor_use_default_mapping=0
let g:jsx_ext_required = 0

Plugin ‘terryma/vim-multiple-cursors’

Dense-Analysis/Ale — https://github.com/dense-analysis/ale

Essa extensão é indispensável para qualquer um que busque programar sem muito estresse. Saber onde seu código têm erros é importante, e este plugin te ajudará a ver os erros em seu código.

Plugin ‘Dense-Analysis/Ale’

Para que o Ale funcione corretamente:

let g:ale_lint_on_enter = 0
let g:ale_lint_on_save = 1
highlight ALEErrorSign ctermbg=NONE ctermfg=red
highlight ALEWarningSign ctermbg=NONE ctermfg=yellow
let g:ale_sign_error = ‘✘’
let g:ale_sign_warning = ‘⚠’
let g:ale_linters = {
\ ‘javascript’: [‘eslint’],
\ ‘typescript’: [‘tsserver’, ‘tslint’]
\ }

pangloss/vim-javascript — https://github.com/pangloss/vim-javascript

Destinado para sintaxe do JavaScript e aprimoramento da indentação.

Plugin ‘Pangloss/Vim-Javascript’

herringtondarkholme/yats.vim — https://github.com/HerringtonDarkholme/yats.vim

Plugin ‘herringtondarkholme/yats.vim’

leafgarland/typescript-vim — https://github.com/leafgarland/typescript-vim

Plugin ‘leafgarland/typescript-vim’

peitalin/vim-jsx-typescript — https://github.com/peitalin/vim-jsx-typescript

Plugin ‘peitalin/vim-jsx-typescript’

sheerun/vim-polyglot — https://github.com/sheerun/vim-polyglot

Plugin ‘sheerun/vim-polyglot’

neoclide/coc.nvim — https://github.com/neoclide/coc.nvim

O cérebro do nosso vim, o famoso Intellisense. Esse plugin é indispensável

Plugin ‘neoclide/coc.nvim’

Após fazer a instalação, é necessário instalar as ferramentas que você usará, no nosso caso typescript, para isso, basta digitar no modo visual

:CocInstall coc-json coc-tsserver

Após isso, é importante adicionar alguma linhas para que funcione corretamente

if isdirectory(‘./node_modules’) && isdirectory(‘./node_modules/prettier’)
let g:coc_global_extensions += [‘coc-prettier’]
endif
if isdirectory(‘./node_modules’) && isdirectory(‘./node_modules/eslint’)
let g:coc_global_extensions += [‘coc-eslint’]
endif

Ainda não para por aí, no repositório do github após o “Example vim configuration” é de suma importância para que o coc funcione bem, copiar toda aquelas linhas de código e colar no seu .vimrc

prettier/vim-prettier — https://github.com/prettier/vim-prettier

let g:prettier#quickfix_enabled = 0

Plugin ‘prettier/vim-prettier’

Separando em arquivos.

Pode ser que, com o decorrer da instalação de vários plugins e variáveis seu arquivo .vimrc fique enorme, dessa forma, para deixar o mesmo organizado e fácil de ser lido, podemos modularizá-lo. Para isso, basta criar os arquivos que você deseja modularizar dentro da pasta .vim.

É importante que a extensão dos seus arquivos sejam .nvimrc

Podemos aplicar por exemplo na extensão que falei, o coc.nvim, como são várias configurações, coloquemos em um arquivo que iremos chamar de coc.nvimrc. Após colar as informações que estão no github do coc, basta salvar o arquvio e após isso em seu arquivo .vimrc basta colocar o diretório do arquivo coc.nvim:

source ~/.vim/coc.nvimrc

Conclusão

Programar no vim é uma experiência muito boa, confesso que lutei por mais de uma semana para me acostumar com os comandos mais simples, porém vejo que depois desse tempo dei-me muito bem com ele. É uma experiência de muita batalha, mas que é recompensadora.

Qualquer dúvida que vierem a enfrentar ou problema, estarei deixando minhas configurações do vim em meu repositório do GitHub e meu email, qualquer dúvida sintam-se a vontade para sanar suas dúvidas.

Repositório — https://github.com/peidrao/vimsao

Email: peidrao@outlook.com