My Editor Setup for Web Development 2021 - Vim + Tmux
The most often question that I get is what editor I'm using and how I configured it. I'm using vim + tmux + alacritty terminal. If you are interested in this video I will describe on the top layer what I use it and how to configure it.
Let's jump right into it.
So the first question is why I'm not using something normal as other people like VsCode or Intelij IDEA. And actually I used almost all popular editors and IDEs before. But I see 2 main problems for me personally with all other editors except of Vim and Emacs.
Problem #1 is that they are slow.
This means that you normally get some default features and to can extend them by installing plugins. This leads to the problem that I'm getting a lot of stuff that I will never use inside by default. And actually every additional feature makes the editor slower.
Problem #2 is that they are not configurable.
Also the amount of configuration what we can normally do in editor is really small. For example even I we take the most popular editor why I always highly recommend which is VsCode there is still an open pull request to be able to increase size of fonts in sidebar. And actually it's opened there from 2015. Which is mindblowing for me because it's such a basic feature.
https://github.com/Microsoft/vscode/issues/519
And as I workaround they suggest to zoom your whole editor because then all sidebar fonts will also be zoomed. So this kind of stuff is really limiting and there are a lot of them.
Problem #3 is that you can't be more efficient in them.
So we have some keybinds in every editor (and of course they are different in all editors) to make our life harder and very often we can't even change them. Also all editors are relying a lot of mouse which means you can't really be fast there.
So this is exactly why I'm using Vim. By default it has near 0 features, it is fully configurable, you can add any keybinds that you want and normally I'm not using mouse at all while writing code.
And of course it's not a silver bullet and I'm not recommending just to switch to it especially if you just started to learn coding. Just take VsCode and learn programming. But if you are coming to the point that you spend your whole day typing the feature without even thinking about them then it's logical to invest some time and learn the editor that can improve this significantly.
So vim exists already 30 years, it's completely free but really difficult to learn and use. Which means you can't jump in it and start writing code in a matter of hours. You need to invest time in learning basic Vim command and understand how it works.
So here I'm using neovim which is a fork of Vim in console. And if you want to ask "why in console?" because it's more efficient, fast and allow me to use a lot of other tools which can be combined with Vim.
If you just want to see my vim config I will link it down in the description.
As I already said Vim is highly configurable and you can setup any hotkeys that are comfortable for you. And you can use all of them without mouse because Vim was intended to be used without mouse.
So with dd we can cut a line and paste somewhere else, with yy copy the line.
There are also lots of commands which are working with words, sentences, lines and paragraphs.
For example the often usage is to delete everything inside brackets. di( or select and copy everything in quotes.
And I know that all this commands is looking like some magic but there is a lot of logic inside them. Also all this commands are coming after some time in muscle memory. Which means I don't think what combination should I click to select a word. My hands remember this.
Also you can of course add additional features to Vim by installing packages. And here is important thing. Packages can be quite flexible because Vim is highly configurable. Here are 2 feature what I think are done wrong in all editors and are done better in Vim.
Feature #1 is tabs. You can tabs on the top of any editor. But here is the think. Every new file is just a new tab on the top. And after some time you have like 10 or 20 of them and you can't find anything and you need to sort them manually. In Vim by default you use buffers and not tabs. The idea is kind of similar but you can just see the list of previously opened buffers at the moment when you need it or filter this list to find the file you want in files that you opened before. This functionality is extremely useful and I miss it in other editors.
Feature #2 is file tree. In all editors we see all files of the project on the left side. The main problem is if you start splitting your window. Because normally we have a big monitor or widescreen and we like to open 3-5 files simultaneously. Then every time when we click in file tree to open something it is opening it either in tab that is in focus now or create a new tab in the same split.
In Vim there is no file tree by default but there are several different implementations of them. The version that I like opens the filetree directly in my buffer where I'm now. In this case it doesn't matter what split I have I always know where the file will be opened.
So here are features that most people use every day and of course you can configure them in Vim.
- Filetree
- Last seen buffers
- Git blame
- Search in file
- Search in all files
- Language server
As I said previously I'm using Vim in console because it plays nicely with other console tools. And the main other tool that I'm using is Tmux. It's a terminal multiplexer which means we can open different sessions inside the terminal, switch between them and open different things inside. The biggest benefit is that Tmux sessions are hanging even when you close terminal.
So the workflow of people in terminal is normally to open 5-10 tabs with webservers of all projects that you need, tests and consoles. So there is no good way to manage several projects, switch between them and most importantly restore them fast.
Here is what I have in Tmux. As you can see this are all opened projects or sessions. So here I can close Tmux and even Terminal completely but my Tmux sessions are still there. And I can always open them back in exactly same state like they where previously. Even on the same like with same error messages.
The other problem that people normally have is to run a single project you need several repositories where you change code. The typical solutions are either opening 5 times the editor (hello Intelij IDEA) or open all projects in the sidebar which is unreadable because we have too many files there.
Here is how I can switch between different projects in less than a second and their editor, webserver and console are completely isolated.
What is also important is that I am not using Vim only for writing code. All my notes I'm doing in markdown in a Git repo. Which means I just open it as a project in Tmux and I just write markdown with Vim. And I know that I don't need any additional programs and I can use it until the end of my life without jumping from one programs to store all my notes to another. And it works offline, and it's just a bunch of files.
The same goes for Vim. This editor exists already 30 years and there are lots of people who are productive with it. For me it makes more sense to invest several months in learning and configuring Vim and then use it until the end of the life than jump from one editor to another. It was Sublime, then Atom, then VsCode and lots of others.
There are a lot of other console tools which plays nicely with Tmux and Vim. For example my music player is mpd which was created in 2003 and it eats just 10 mb of ram. It also lives in a separate Tmux tab and actually it has nice similar to Vim keybinds
The same goes for file manager which is vifm and is more configurable than Finder.
The last piece of software that I didn't mention yet is my terminal. I'm using Alacritty terminal which is a cross platform terminal. It's benefit compared to Iterm2 what I used long time is tht it is super fast and highly configurable. It's so fast because it doesn't have anything inside: there are no tabs or split. Really nothing. This is why it plays so nicely with Tmux because Tmux gives everything that I need out of the box and the task of terminal is just to render the symbols.
So this was my setup which I use already more then 8 years. It's for sure not for everybody but it fits my workflow really nice. I hope this video was helpful for you and you got some ideas about how to improve your own workflow.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
📚 Source code of what we've done