In fact, it can make writing HTML and CSS a much more enjoyable experience. The VIM is free and open source, and you should be familiar with VIM plugins. To follow this tutorial, I will be using vim-plug as my plugin manager of choice, just as I do in my personal work.
After back and forth searching for a perfect IDE, I found Vim, Unix default editor, as a perfect alternative. Even though it's simple and lack of many rich features, convert it to become a powerful IDE is possible through plugins.
Vim is doing pretty well with syntax JavaScript highlighting out of the box. But it's not ideal. Many of the old syntax plugins for JavaScript have troubles with some modern features like arrow functions or async/await. Here are some plugins that will help to fix it.
I do all of my HTML editing in vim. The three plugins I find most helpful for editing HTML and XML in vim are matchit, surround, and allml.
Matchit will allow you to jump to the start/end tag with '%'. Surround allows you to easily add, delete, and change the surrounding tags. Allml provides you with a great set of mappings for editing (X)HTML and XML.
wrap selected text with tags:
function! VisualTagsWrap()
if !exists('g:tags_to_wrap')
let g:tags_to_wrap=[]
endif
let g:tags_to_wrap=split(input('space separated tags to wrap block: ', join(g:tags_to_wrap, ' ')), '\s\+')
if len(g:tags_to_wrap)>0
execute 'normal! `>a</'.join(reverse(g:tags_to_wrap), '></').'>'
execute 'normal! `<i<'.join(reverse(g:tags_to_wrap), '><').'>'
endif
endfunction
vnoremap <silent>,w <ESC>:call VisualTagsWrap()<CR>
highlight closing bracket for tags:
set matchpairs+=<:>
dummy text (type "lorem" in insert mode):
inoreabbrev lorem Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
To match tags:
Have a look at matchit plugin. Vim 6 onwards matchit.vim is packaged with standard distribution. To install matchit, read :help matchit-install
.
Make sure filetype plugin on
is in vimrc.
Once installed, use %
to match the start/end tag. :help matchit-intro
for more help.
In Fedora 15 matchit.vim
comes in the vim-common
package. Then add this to your ~/.vimrc
to get it working.
source /usr/share/vim/vim73/macros/matchit.vim
Then just press Shift+5
(aka %
) to jump to the matching tag.
When editing an html file without the .html suffix, use the command:
:set filetype=html
to activate the matchit macro.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With