Because it has come to stay, and isn’t it better to learn something that will stick around? Well, also because Why would you want to use an editor that is almost 30 years old? it is damn powerful. VIM is free and open source, VIM is probably already installed in your computer (if you are running UNIX). And VIM can be hard. But it does not have to be painful! In fact, it can make writing HTML and CSS a much nicer experience. Working every day with HTML and CSS made me look for plugins and configuration tweaks that allow me to move fast within and through files, maneuvering and editing those nice and readable chunks of indented HTML. OK, maybe they aren’t always that nice. VIM to the rescue. There are many approaches to VIM, some like to keep it minimal and some like to experiment with many plugins. We will not delve into this discussion:pick and choose from what you find useful in this post. Also : it’s our safe haven. (Isn’t for awesome by itself?) strive to get better at vanilla VIM cit changing inside a tag To follow this tutorial, you should be familiar with installing VIM plugins. I will be using as my plugin manager of choice, just as I do in my personal work. Follow the link to understand how to install the plugins. If you’re starting with VIM, YouTube series can help get you up and running vim-plug this All the code in this article goes into your .vimrc (for VIM) or init.vim  (for neoVIM). The code that has the following structure is supposed to be inserted inside your plugin block: Plug ‘git- /git-repo user ' Let’s see some action. 1. emmet-vim Emmet uses css style syntax to spit big blocks of HTML: not much typing and a lot done. Fast. Of course emmet is not exclusive for VIM, in fact it comes already bundled with VSCode (Who’s asking?). But it goes specially well with VIM flexible and configurable approach to editing. Isn’t that much better than typing it all? We can have emmet installed only for HTML and CSS = FileType html,css EmmetInstall let g:user_emmet_install_global 0 autocmd You can pick whichever keyboard shortcut you want. Following I’ve assigned emmet leader key to ‘,’ this example autocmd FileType html,css EmmetInstall g:user_emmet_leader_key=’,’ let 2. tagalong Emmet allows us to have a lot of code, quickly. But who gets it right on the first time? Using tagalong we can change the opening tag and automatically change the corresponding closing one. The fun starts when the text can’t fit in your window. It is nice to have some visual feedback when the text is edited, therefore we can allow tagalong to send us a message once the editing is done. g: = let tagalong_verbose 1 3. vim-surround What about deciding we have to surround our element with yet another one?  Sounds like something you could have to do? vim-surround will let us enter visual line mode, select a block of text and wrap it with another element. Where did that aside come from!? Here it is. 4. ALE (Asynchronous Lint Engine) Just because we are using a piece of software release 28 years ago, that doesn’t mean we can’t benefit from the modern as-you-type linting and fixing. In fact, ALE supports many linters, crossing the bridge between the UNIX extensibility and modularity that we know and love to our editor of choice. Give me a break, ALE! Err... not really, please don’t. Plug ‘dense-analysis/ale’ For better debugging, I will let ALE only use the linters and fixer explicitly defined: this will help us try out new tools and know what is doing the best job for us at the moment, or even use specific project directives. g:ale_fixers = { ‘html’: [‘prettier’], ‘css’: [‘stylelint’], g:ale_linters = { ‘html’: [‘htmlhint’], ‘css’: [‘stylelint’], g:ale_linters_explicit = g:ale_fix_on_save = let \ \ \}let \ \ \} let 1 let 1 The linters should be installed on your computer and available on your path. Check the guidelines of the tool you’ll be using on how to do that. from vim will show the suggested, available and enabled linters/fixers, that can be extremely helpful installing and getting our linter/fixer working. :ALEInfo , what I like the most about VIM is that it makes you think about how your code is structured: We should take advantage of this fact when dealing with it. Besides all these neat plugins source code is text, but it is a much more kind of text than prose. structured Previously published at https://medium.com/@felipe.anjos/vim-for-web-development-html-css-in-2020-95576d9b21ad

Too Long; Didn't Read

Making security fun one episode at a time

How To Use VIM for Frontend Development: 2020 Edition

Too Long; Didn't Read

Felipe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Use VIM for Frontend Development: 2020 Edition

Too Long; Didn't Read

Felipe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES