ITpraktika.com

Posted on Jan 5 • Originally published at itpraktika.com

Transform Vim Into a Powerful IDE with File Tree Navigation

#vim #linux #productivity #terminal

This is an English translation and light adaptation of the original Bulgarian article:https://itpraktika.com/%d0%ba%d0%b0%d0%ba-%d0%b4%d0%b0-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d0%bc-%d1%84%d0%b0%d0%b9%d0%bb%d0%be%d0%b2%d0%be-%d0%b4%d1%8a%d1%80%d0%b2%d0%be-%d0%b2-vim/

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

Step 1: Install Plugin Manager

To easily manage Vim plugins, we need a tool called vim-plug.

Open your terminal
Run this command:

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

Step 2: Configure .vimrc

The .vimrc configuration file is the "brain" of your Vim setup. It's located in your home directory (~/.vimrc). If it doesn't exist, simply create it.

Open it with vim ~/.vimrc and add the following content:

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
let NERDTreeShowHidden=1           " Show hidden files

" --- 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

Step 3: Activate the Magic

After saving the file, do the following:

Restart Vim
Type the command: :PlugInstall and press Enter
Wait for installation to complete and exit the helper window with :q

Quick Command Reference

Action	Keyboard Shortcut
Open/Hide tree	`Ctrl + n`
Move to tree	`Ctrl + h`
Move to code	`Ctrl + l`
Open file in new tab	Select file in tree and press `t`
Switch tabs	`Tab` or `Shift + Tab`
File operations	Press `m` while on a file in the tree

How to Work with the File Tree

You now have a panel on the left. Here are the most important commands to become proficient:

Basic Navigation

Ctrl + n: Opens or hides the tree (based on our configuration above)
j and k: Move down and up through the list
Enter: Opens the selected file
C: Makes the selected folder the project "root" (focuses only on it)
u: Goes up one folder in the hierarchy

Working with Splits

Instead of just opening a file, you can arrange it next to the current one:

s: Opens file in vertical split
i: Opens file in horizontal split

File Management (The 'm' Menu)

This is the most useful feature. Point to a folder or file and press m. A menu will appear where you can:

a (add): Create a new file or folder (for folder add / at the end, e.g., src/)
d (delete): Delete a file
m (move): Rename or move a file

Why This Is Useful

Visualization: You see your project structure at all times
Speed: Create and delete files without leaving Vim and without typing long terminal commands
Focus: You can easily switch between dozens of files in large projects

Tip: If you want icons (like in a real IDE), install the ryanoasis/vim-devicons plugin, but remember it requires a Nerd Font installed on your system.

Part 2: Working with Tabs – Organize Your Workspace

In Vim, tabs are extremely powerful. You can have one tab for the Frontend part of your project and another for Backend, switching between them instantly.

1. Basic Tab Commands

These commands work in Vim "out of the box" (no plugins needed):

:tabnew filename – Opens a new tab with a specific file
:tabnew – Opens a new empty tab
:tabclose – Closes the current tab (and all windows in it)
:tabnext (or key gt) – Goes to the next tab
:tabprev (or key gT) – Goes to the previous tab

2. Making Them "Amazing" (Configuration)

To avoid typing long commands every time, add these settings to your .vimrc:

" Quickly open new empty tab with Ctrl + t
nnoremap  :tabnew

" Switch between tabs with Tab and Shift+Tab
nnoremap  :tabnext
nnoremap  :tabprevious

" Always show tab bar at top, even with just one tab
set showtabline=2

3. Integration with NERDTree

Now comes the best part. When you have the file tree open on the left:

Go to any file in the tree and press t
The file will open in a new tab
Press T (capital T) to open it in a new tab "quietly" (staying in the current one)

The Complete Workflow

Imagine the following scenario while programming:

You open Vim and press Ctrl + n to see the project
You find index.html, go to it, and press t (you now have the first tab)
You return to the tree, go to style.css, and press s (Vertical Split). Now in one tab you see both HTML and CSS
Want to look at documentation or a script without disrupting the view? Press Ctrl + t for a new clean tab
Switch between design and scripts with just the Tab key

Why This Is Better Than Standard Editors

In each tab you can have a different layout (splits). For example:

Tab 1: Three files open side by side for comparison
Tab 2: Just one file full-screen for distraction-free coding
Tab 3: Terminal (yes, you can open a terminal inside Vim with the :term command)

Pro Tips

Real-time Monitoring in NERDTree

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

Advanced Split Management

" Resize splits quickly
nnoremap  :resize +2
nnoremap  :resize -2
nnoremap  :vertical resize -2
nnoremap  :vertical resize +2

Color Scheme Recommendation

For a modern look, add this to your .vimrc:

colorscheme desert
syntax on

Conclusion

With NERDTree, tabs, and splits properly configured, Vim transforms from a simple text editor into a fully-featured development environment. The best part? It's still blazing fast and completely keyboard-driven.

Your turn: What's your favorite Vim plugin? Share in the comments!

📖 Read the full guide in Bulgarian: Как да добавим файлово дърво в Vim?

🔧 Want more hands-on Linux guides and automation scripts?

Visit ITpraktika.com for:

Linux command tutorials and cheat sheets
Bash scripting and automation guides
Server administration best practices
WordPress optimization tips
Proxmox and Docker tutorials
And much more!

DEV Community