Vim and DevTools might be all you need to be very productive

Philip Oghenerobo Balogun
Building the change
3 min readJan 25, 2018

--

To start with, DevTools is way more than where you go to see the results of `console.log` from your application and Vim is much more than that editor that pops up when you have to leave a merge message after `git pull`.

You have all the power you need.

If you’re like me, you must really love your fancy IDE(VSCode, Sublime, Atom…) with its many features, plugins, themes, a fancy debugger and much. This was all me up until i had a pair programming session with a colleague from work and got really impressed with his usage of Vim and DevTools.
Shocked too right? So was I. Here’s what i learnt that day.

http://mrwgifs.com/wp-content/uploads/2013/09/Morgan-Freeman-Shocked-WTF-Reaction-Gif.gif

Vim

The Vim environment is so simple that it keeps all distraction away while you’re deep in code. Basically, you could throw your mouse away as It has key-maps for almost everything you’ll need a mouse for.
It’s light weight and fast and consumes very little cpu and ram compared to any other IDE you could think off.

In making the decision to switch over to Vim, i did tons of review and this very interesting stackoverflow question helped. I also found out that i could do a lot more with Vim by adding little things i need.

Pathogen: for managing vim runtime plugins
Ale: For lint and syntax checking
Vim-Airline: A lean and mean status/tabline for vim that’s light as air
Dracula: Yep, you guessed it. My mean dark theme for vim
Ctrl+P: A fuzzy search for easily locating files while working

Quick Tutorials
https://scotch.io/tutorials/getting-started-with-vim-an-interactive-guide
https://vim.rtorr.com
http://vim.wikia.com/wiki/Best_Vim_Tips

It’s been pretty awesome with just those few and you can add more as you go.
I find myself doing more with way lesser distraction when working from the Vim environment, and of course feeling like a badass with editor as they do in movies.

some crazy developer using vim

DevTools

Now, onto the second part of the tale. So now you’re using Vim, how do you debug your application?

“I miss my fancy IDE’s debugger”

Look no further, DevTools is here to save the day. What you probably didn’t know was your IDE used DevTools to do the debugging for you behind the scene.

Since my move to Vim, i’ve learnt a lot about DevTools. How to add breakpoints, watch variable scopes and do a lot more. I found chrome’s devtool samples on github very helpful. Prior to now, i’ve never paid much attention to them. This showed me i could get more out of the tools i already had and get way more done.

The first few days were the hardest as i promised myself to stick with Vim and DevTools no matter what, and by the following week i was just as fast as if i were still using VSCode and hope to exceed that by the coming week. The journey here wasn’t easy, but it was totally worth it.

Ultimately, use the tools that works for you and get shit done. Hack on!!!

Get more stuffs like this from https://tech.balogunphilip.com and don’t forget to clap and follow :-)

--

--

An immigrant from the stars who really wants to change the world…Lover of technology, solution architect, entrepreneur.