Produtividade no frontend com Neovim

Continuando a configuração do neovim, dessa vez vamos para a parte do frontend fazer alguns ajustes para integrar no seu ambiente. Esse é o segundo post que faço sobre o assunto, é interessante conferir o Go + Neovim pois falo de outras ferramentas não citadas aqui

Esse é um post para quem já usa neovim/vim pois vou tentar ser o mais breve possível para montagem de um ambiente rápido e flexível.

Plugins Necessários

:CocInstall 'coc-html' 'coc-css' 'coc-prettier' 'coc-json' 'coc-tsserver' 'coc-vetur' 'coc-highlight' 'coc-eslint'

"Fechamento de tags HTML
 Plug 'alvan/vim-closetag'  

 "Files Search
    Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
    Plug 'junegunn/fzf.vim'

 "NerdTree
    Plug 'preservim/nerdtree'

"Snippets
    Plug 'SirVer/ultisnips'
    Plug 'honza/vim-snippets'

Descrição dos Plugins

" Autocomplete html,css,js,ts,vue
'coc-html' 
'coc-css' 
'coc-tsserver' 
'coc-vetur' 
'coc-json' 

" Lint com Eslint e autoformat com prettier
'coc-prettier' 
'coc-eslint'

" Esse plugin colore a hexadecimal ao digitar
'coc-highlight' 

"Fechamento de tags HTML
 Plug 'alvan/vim-closetag'

 "Procurar arquivos
    Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
    Plug 'junegunn/fzf.vim'

 "File Manager
    Plug 'preservim/nerdtree'

"Snippets
    Plug 'SirVer/ultisnips'
    Plug 'honza/vim-snippets'

Agora precisamos setar as preferencias em um arquivo coc-settings.json, vou deixar uma configuração inicial que pode ser modificada de acordo com a preferencia

    "coc.preferences.extensionUpdateCheck": "daily",
    "coc.preferences.formatOnType": true,
    "diagnostic.displayByAle": true,
    "coc.preferences.formatOnSaveFiletypes": [
        "html",
        "css",
        "scss",
        "javascript",
        "typescript",
        "vue",
        "go",
        "markdown",
        "json",
        "jsonc"
    ],
    "eslint.autoFixOnSave": true,
    "eslint.filetypes": [
        "javascript",
        "typescript",
        "vue",
        "javascript.jsx",
        "javascriptreact"
    ]

Vue Autocomplete

os demais tambem devem estar funcionando perfeitamente

NerdTree

Com esse plugin podemos ver a estrutura de diretórios e acessar arquivos

Digite :NERDTree para ativar

As cores variam de acordo com seu tema

Extra: Para ter icones instale: Plug 'ryanoasis/vim-devicons'

FZF

Talvez esse seja um dos recursos mais interessantes que temos no neovim/vim.

Com ele podemos fazer buscas de arquivos e expressões em todo o projeto.

Digite :FZF para buscar arquivos

Digite :Ag para buscar ocorrências

Snips

Para configurar os snips digite :UltiSnipsEdit

Depois comece a escrever snip e selecione a opção a seguir

Devera parecer com o seguinte

Esse é o modelo padrão que temos de snips,vamos criar aqui um exemplo de uma função muito usada em Go

Feito isso basta fechar e usar o novo snip

Sobre múltiplos cursores

No vim não precisa deles, existem plugins que o fazem, mas vou mostrar uma opção que pode resolver seu problema.

1-Primeiro escolha o que deseja substituir
2-Se for apenas uma palavra digite * no inicio da palavra para selecionar todas, se for mais digite /palavras que deseja
3- vá ate a primeira ocorrência e digite cgn
4- use o . para repetir
5- pode-se usar n e N para pular o que deseja

Dicas

gd- pula para a definição
[ - pula para proxima função
] - volta para função anterior
% - pula entre { }

Fique a vontade para conferir minha configuração