Webdev in Vim.

Introduction

As you may have noticed from my last post, I’ve been doing a lot of editing and writing in Vim. I mostly used VSCode before this, which came with a lot of nice housekeeping features, such as integrated git menus, and lots of autoformatting and intellisense options. When moving to Vim, the lack of these quality of life features was pretty sorely missed - I remember the first day I was properly on Linux trying to edit scripts for revshare-gh, I was very annoyed by having to type out both the beginning and ending bracket in arrow functions. I was definitely missing the autoformat on save setting, and the nice indenting that was automatically in place.

Then again, Vim definitely can be made to do all these things. The thing is, configuring Vim to do something that VSCode does by default usually takes time. If I was in the middle of a school week when I’d tried to get Vim set up, I definitely wouldn’t have the time (or mental energy) to research language servers or autocompletion. I can see why this might be a reason that people’d prefer just going with an IDE and clicking for one theme change rather than trawl through the Vim Wiki for the solution to a problem that doesn’t exist. However, I do also like the customizability of Vim - I can change every colour, snippet, expansion, and keybinding, among many, many other configuration options.

This post will serve as a sort of journal during my first couple weeks doing webdev in Vim, which isn’t something I’ve seen a lot of resources and blog posts for (that being said, I didn’t go much further than the first couple pages of Google). For context, these couple weeks I’ve mostly been finishing revshare-gh and redesigning my website¹ - so I’ve mostly been working in Javascript (yes, JS), HTML / CSS, and then a bit of YAML.

Phase One

Phase One of my webdev in Vim experiment was mostly the first week or so. At this point, I didn’t have any autocomplete, or much else other than a colourscheme, really.

Immediately, when I tried to edit HTML, I was sorely missing the automatic Emmet expansion and auto-end bracket pairing. I still haven’t figured out how to add that bracket bit, but to fix the very obvious lack of Emmet, I just installed emmet-vim. This adds a <C-y>, expansion for Emmet abbreviations, which definitely made it less painful to write HTML - I didn’t have to struggle around the angle bracket keys.

Within a couple hours of editing, I was also missing the select-surround functionality of VSCode. Essentially, if I selected a block of HTML, and started writing, it’d surround the current tag in whatever I typed. (Also, they had a command palette option to surround in Emmet, which I haven’t quite figured out how to do in Vim yet). I added this via vim-surround. This excellent plugin lets me go into Visual Block to select a tag or so, and press S<tag> to surround with a tag. It makes HTML much, much easier.

I also wanted an autocomplete popup menu, and was a bit hesitant to look into Coc or one of the Vim language server protocol extensions, so I decided to just use this workaround from the Vim Wiki. Nothing fancy, and I didn’t really get much in terms of ‘autocomplete’ - it’d only fill with tabs and words from the current open file. That was fine for what I was doing - basic HTML and JS where I wouldn’t really need to do much documentation referencing. AutoComplPop added the IDE-like tab completion instead of <C-Space>.²

It was also extremely annoying to have to type sequences like () => {} - I was used to the VSCode style of just typing the beginning bracket. All in all, it wasn’t too annoying, but I still installed auto-pairs to bring this into Vim.

Formatting was basically done manually - I ran js-beautify (available here) manually in a terminal split before I committed. Very simple, but a little annoying to have to remember it. No big deal though.

It took me a little bit of research to understand Vim’s splits and tabs feature, but once I learned how to navigate around properly, it was very useful. I usually didn’t work with split windows in VSCode, but I really liked being able to view both HTML and CSS side by side - don’t know why I didn’t enable it in VSCode. When working in my Hugo projects, for example, I’d have a tab open with my HTML layouts and main CSS files, and another tab with a mostly-fullscreen terminal. This let me switch between hugo server and git commands.³

You might notice that I didn’t have one of those filetree plugins. That’s true - I found :Explore more than enough for my needs. My projects are pretty small anyway, just a main file tree in a format that’s familiar enough for me to know mostly where things where. If I needed to find a file, I’d just grep for it in terminal, or click around in Thunar a bit. I don’t find that I miss the side file tree at all, really. It’d just take up more space.

Phase Two

Phase Two is when I actually started investigating autocomplete. I had to properly look into what a language server even was, and understand what the client / server relationship was (i.e. where I was supposed to install things, and what helper extensions that Vim needed to work). I looked into vim-lsp and asyncomplete, both works of Prabir Shrestha. They’re probably better for lightweight setups, but I, for some reason, could not for the life of me get the popup tabs to, well, popup. I tried with HTML and CSS, and I found, after a lot of trawling Reddit, that I was supposed to get another plugin for snippets, and a couple more for actually configuring said snippets.

This was a bit overkill - even just adding the HTML language server involved adding around 5 plugins in my .vimrc, and I honestly didn’t understand them much. I decided it was probably not worth the time to try to debug this. Besides, I have a decently powerful laptop - I could handle the extra resources that Coc needed.

As to why I chose Coc, I found it very easy to set up in comparison to the various lsp plugins, which had a more ‘diy’ approach. I guess this is a bit of a counterpoint to my preference for having configurability, but anyhow, I thought it’d be a better use of time to just put one plugin into place instead of having lots of smaller plugins that I didn’t have any idea as to how they went together. Also, I’d heard it was very fast and replicated a lot of VSCode Intellisense functionality (which, by this point, I was very much missing), so I gave it a go.

Maybe two or three :CocInstalls later, I had a nice setup running. I’ve spent a little too much time doing things in Vim during the last couple weeks, so I’m probably going to take a break from configuration. This setup works nicely for me at the moment, and I can write homework assignments / do math / code all in Vim, which is nice.

Conclusion

If you’d like to see my final configuration files, they’re over at my dotfiles repo. I’ve removed AutoComplPop - don’t need it with Coc’s autocompletion menu. Also took out the auto-pairs extension, which can also be done with coc-pairs.

While Vim’s certainly a lot more minimal than VSCode, I don’t really see a point in going back to VSCode and a Vim extension, for example. I’ve managed to make my Vim work well enough for me at the moment, and I’m not working on large Vue projects at the moment, so for now, it’ll be great. I really like the setup right now - it feels very Emilie™.

Anyway, the school year’s starting in exactly an hour and 4 minutes as of writing (yes, I prewrite these articles), so I’m looking forward to the things I have lined up. Hopefully, I hear back from a couple interviews I have, and I’ll have enough time to balance homework and my personal projects. This time of year is always a flood of emails, new responsibilities, and metric tonnes of assignments, but here’s to hoping it’ll be a great year.