VSCode-like environment with vim + tmux

I like Visual Studio Code, an IDE built on top of Electron, developed by Microsoft. What I like VSCode is that it is aimed for the modern web development such as good support for writing TypeScript and it is useful almost out of the box. I have already tried to switch my development environment to it for several times. I don’t accomplish that yet but got some ideas to improve my current environment based on vim + tmux inspired by VSCode.

I’m usually writing code with vim and tmux on terminal. In this article I’d like to share my configs which would make the environment like VSCode. The guide is for those who know the basics of vim and tmux. Here is the abstract:

• VSCode-like screen layout
• VSCode-like filer
• VSCode-like error outputs
• (Not VSCode-like) Opening tabs for each project on tmux

VSCode-like screen layout

My development environment, the window is usually maximized.

I like that VSCode has a terminal pane at the bottom of the window. So my tmux window is split horizontally at 7:3 where vim is running on the top window and the bottom one is for running other commands like compiling tasks. In addition, I like splitting the bottom window vertically into 3 panes. Following is a script for doing that at once:

#!/bin/bash
tmux split-window -v -p 30
tmux split-window -h -p 66
tmux split-window -h -p 50

VSCode lets you toggle the terminal pane. It can be also accomplished in tmux with zooming. You can get the current window zoomed by pressing <prefix>-z which means you can hide other windows while zooming a particular window. I often use it on the bottom window in order to see logs.

In vim, I’m using following keymaps to split windows:

" Split window
nmap ss :split<Return><C-w>w
nmap sv :vsplit<Return><C-w>w
" Move window
nmap <Space> <C-w>w
map s<left> <C-w>h
map s<up> <C-w>k
map s<down> <C-w>j
map s<right> <C-w>l
map sh <C-w>h
map sk <C-w>k
map sj <C-w>j
map sl <C-w>l
" Resize window
nmap <C-w><left> <C-w><
nmap <C-w><right> <C-w>>
nmap <C-w><up> <C-w>+
nmap <C-w><down> <C-w>-

ss key splits the window horizontally, and sv is for vertical split. s<arrow key> moves the focus between windows. VSCode allows you to split windows up to 3 but vim doesn’t have a limit for it. That’s one of the reasons I can’t quit using vim.

VSCode-like filer

A file tree is not shown by default in my vim because I don’t need it and I’d like to use the screen as large as possible for editing. I use vimfiler only when it’s necessary. Like below, pressing sf key will launch it:

vimfiler

In VSCode, Material Icon Theme brings you cool file icons. vim can also do similar thing with vim-devicons. Cool.

My configuration for vimfiler is:

nmap sf :VimFilerBufferDir<Return>
nmap sF :VimFilerExplorer -find<Return>
nmap sb :Unite buffer<Return>
let g:vimfiler_as_default_explorer = 1
let g:vimfiler_safe_mode_by_default = 0
let g:vimfiler_enable_auto_cd = 0
let g:vimfiler_tree_leaf_icon = ''
let g:vimfiler_tree_opened_icon = '▾'
let g:vimfiler_tree_closed_icon = '▸'
let g:vimfiler_marked_file_icon = '✓'

I like a grep feature that can be used by pressing gr key.

VSCode-like error outputs

VSCode allows you to check lint errors asynchronously on the fly while editing the current file, so you don’t have to wait for the linter running on saving a file. Ale is the plugin to do that exactly on vim:

You can jump to the next error by pressing <C-j> . My keymaps are like so:

nmap <silent> <C-k> <Plug>(ale_previous_wrap)
nmap <silent> <C-j> <Plug>(ale_next_wrap)

To show a list of errors, press :open .

Opening tabs for each project on tmux

I’m developing a Markdown editor called Inkdrop and I often work on multiple projects at the same time such as the server-side, the web front-end and the mobile app. I usually open a tab per project and change its title to avoid to get lost like so:

You can change a title of the window(tab) by pressing <prefix>-, .

As currently VSCode opens a window per project, it’s hard to switch quickly when opened many windows. Virtual desktop would not work for me because I don’t like it. I hope it will support project tabs like tmux in the future.

I configured <prefix>-o to open the current working directory with Finder. It is very useful:

# Open current directory
bind o run-shell "open #{pane_current_path}"

I hope it’s helpful for you!