Como melhorar o recurso de autocompletar para elementos CSS no Vim

Esta é apenas uma dica rápida sobre o recurso de autocompletar do Vim.

Tenho usado o excelente plugin SuperTab Vim há alguns anos, e ele funciona razoavelmente bem (autocompleta com base em palavras de todos os tipos, nomes de arquivos, tags, contextos etc.), mas não funciona muito bem para texto que possui divisão por traços – e códigos CSS↳CSS31 conteúdosArquitetura CSS: CSS FuncionalDev (Back & Front) · set 2019Entendendo posicionamento com CSS de uma vez por todasDev (Back & Front) · jul 2025Sites que combinam estética e usabilidade: reflexos da evolução do CSSDev (Back & Front) · fev 2025Ver tudo em Dev (Back & Front) → contêm grande quantidade de traços… então, comecei a ficar frustrado com isso.

Você pode alterar o comportamento do recurso de autocompletar com set iskeyword, que também altera o comportamento de comandos padrão de movimento como w, e, b (que altera o delimitador de palavras). Minha solução rápida para o problema era manter iskeyword com o valor mínimo possível e só mudar isso durante InsertEnter. Dessa forma, eu ainda posso usar cw, ve e db para editar cada fragmento do código e o autocompletar funcionará adequadamente para palavras como foo-bar__baz, e você ainda pode usar W, B e E se você quiser ir rapidamente para palavras similares. Para mim, esse é o melhor dos dois mundos!

function! KeywordsAll()
    setl iskeyword=@,48-57,192-255,\@,\$,%,-,_
endfunc

function! KeywordsBasic()
    setl iskeyword=@,48-57,192-255
endfunc

" improve the 'search word under cursor' behavior
nnoremap * :silent call KeywordsAll() * :silent call KeywordsBasic()
nnoremap # :silent call KeywordsAll() # :silent call KeywordsBasic()

augroup is_keyword
  " clear commands before resetting
  autocmd!
  " make sure `complete` works as expected for CSS class names whithout

E aqui estão as minhas outras configurações de preenchimento automático:

set infercase
set completeopt=longest,menuone
set omnifunc=syntaxcomplete#Complete
set completefunc=syntaxcomplete#Complete
set complete=.,w,b,u,U,t,i,d

augroup omni_complete
  " clear commands before resetting
  autocmd!
  " Enable omnicomplete for supported filetypes
  autocmd FileType css,scss setlocal omnifunc=csscomplete#CompleteCSS
  autocmd FileType html,markdown setlocal omnifunc=htmlcomplete#CompleteTags
  autocmd FileType javascript setlocal omnifunc=javascriptcomplete#CompleteJS
  autocmd FileType python setlocal omnifunc=pythoncomplete#Complete
  autocmd FileType xml setlocal omnifunc=xmlcomplete#CompleteTags
augroup END

Não estou usando plugins para gerar JavaScript ou tags CSS, por isso a minha conclusão de código se baseia principalmente em todas as palavras contidas em todos os buffers de código abertos. Por causa da maneira com a qual estruturo código atualmente, quase não preciso de mais do que isso.

PS: Eu não recomendo o uso do Vim caso você seja um desenvolvedor novato e, ao mesmo tempo, não consigo me ver usando outro editor atualmente… – aqui está a configuração do completa do meu .vimrc e alguns links úteis caso você esteja interessado.

Edição 1: alterei o autocmd para ser disparado em BufEnter e BufLeave para melhorar o recurso de autocompletar em todos os buffers abertos.
Edição 2: alterados os comportamentos * e #.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://blog.millermedeiros.com/vim-css-complete/