This post is edited from my original blog post. Find it, and other posts by me on kewbi.sh/blog.
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. I was definitely missing the autoformat on save setting, and the nice indenting that was automatically in place.
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. 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, 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. 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.
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.
For those of you who do webdev in Vim as well - share your experiences below!
Top comments (4)
I've been using vim for webdev for about two years now, it's been a nice experience. My "configuration phase" was actually entertaining because I wasn't trying to turn vim into an IDE. Most of the plugins I use the only thing they do is make a built-in feature more user friendly. Vim is already a good editor, it just needs a little push to make it a comfortable one.
And because I never miss a chance to share my config, here it is.
Super cool - I'll definitely check it out!
I've been putting my configurations in containers for others to use. I actually made a post on it a while back: dev.to/aghost7/developing-from-con...
This seems like a really cool solution - I'll check it out!