Transform Vim Into a Powerful IDE with File Tree Navigation

Source: Dev.to

Introduction

Most people think Vim is just a terminal text editor. With the right plugins, it can become a powerful IDE without losing its legendary speed. The most important step in this transformation is adding a file tree.

Installing vim‑plug

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Configuring NERDTree in ~/.vimrc

call plug#begin()
Plug 'preservim/nerdtree' " File tree
call plug#end()

" Convenience settings
let NERDTreeShowHidden = 1          " Show hidden files (.env, .gitignore)
let g:NERDTreeWinSize = 30         " Panel width (30 characters)

" --- NERDTREE SETTINGS ---
nnoremap  :NERDTreeToggle   " Ctrl+n toggles tree

" --- SPLIT NAVIGATION ---
" Use Ctrl + h/j/k/l to move between panels
nnoremap  h
nnoremap  j
nnoremap  k
nnoremap  l

" --- TABS ---
set showtabline=2                " Always show tab bar
nnoremap  :tabnew        " Ctrl+t for new tab
nnoremap  :tabnext       " Tab for next tab
nnoremap  :tabprevious " Shift+Tab for previous tab

" Auto-close if only tree remains
autocmd bufenter * if (winnr('$') == 1 && exists('b:NERDTree') && b:NERDTree.isTabTree()) | q | endif

Installing the plugins

1. Restart Vim.
2. Run :PlugInstall and press Enter.
3. Wait for the installation to complete, then close the helper window with :q.

Quick Command Reference

Using NERDTree

• Ctrl + n – opens or hides the tree.
• j / k – move down and up through the list.
• Enter – open the selected file.
• C – make the selected folder the project “root”.
• u – go up one folder level.

Splits

• s – open file in a vertical split.
• i – open file in a horizontal split.

File operations (press m)

These commands let you create, delete, and move files without leaving Vim.

Icons (optional)

If you want file‑type icons like in a real IDE, install the ryanoasis/vim-devicons plugin. It requires a Nerd Font installed on your system.

Working with Tabs

Vim tabs are powerful for separating different parts of a project.

Built‑in tab commands (no plugins needed)

• :tabnew {filename} – open a new tab with a specific file.
• :tabnew – open a new empty tab.
• :tabclose – close the current tab (and all its windows).
• :tabnext (or gt) – go to the next tab.
• :tabprev (or gT) – go to the previous tab.

Convenience mappings (already in the .vimrc above)

• Ctrl + t – quickly open a new empty tab.
• Tab / Shift + Tab – switch between tabs.
• set showtabline=2 – always show the tab bar, even with a single tab.

Advanced Usage with the File Tree

1. Open the tree (Ctrl + n).
2. Navigate to a file and press t – the file opens in a new tab.
3. Press T (capital) to open the file in a new tab quietly (stay in the current tab).
4. Press s to open a file in a vertical split, i for a horizontal split.

Example workflow

1. Press Ctrl + n, locate index.html, press t → first tab.
2. Return to the tree, locate style.css, press s → vertical split in the same tab.
3. Need a clean view? Press Ctrl + t → new empty tab.
4. Switch between tabs with Tab / Shift + Tab.

• Press R to refresh the tree after creating files outside Vim.
• Press ? inside NERDTree to see all available commands.

Additional Useful Mappings (Resize splits)

nnoremap     :resize +2
nnoremap   :resize -2
nnoremap   :vertical resize -2
nnoremap  :vertical resize +2

Modern Look

colorscheme desert
syntax on

Conclusion

With NERDTree, tabs, splits, and a few convenient mappings, Vim transforms from a simple text editor into a fully‑featured development environment—still blazing fast and completely keyboard‑driven.