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