I used to use NERD tree for quite a while, then switched to CtrlP for something a little more lightweight. My setup now includes zero file browser or tree view, and instead uses native Vim fuzzy search and auto-directory switching.
There is a super sweet feature in Vim whereby you can fuzzy find your files using **/*
, e.g.:
:vsp **/*<partial file name><Tab>
This will search the current directory and all directories below it for filenames containing your partial search. This can be used with :e
, :sp
, :vsp
.
If there are multiple possible matches, you can see the options you have available by setting this in your .vimrc
:
" Show file options above the command line
set wildmenu
For more information, run :h 'wildmenu'
.
You’ll probably also want to exclude certain file types and directories from this fuzzy finding, so you can stick these in your .vimrc
:
" Don't offer to open certain files/directories
set wildignore+=*.bmp,*.gif,*.ico,*.jpg,*.png,*.ico
set wildignore+=*.pdf,*.psd
set wildignore+=node_modules/*,bower_components/*
Now we’re at a point where I don’t need to look through any directories: if I know I want to open my _components.buttons.scss
file I just need to do:
:vsp **/*butto<Tab>
Vim will go off and find this for me, and if there are multiple possible matches it will also neatly display them all for me.
Vim runs from the context of wherever your ran $ vim
from, so let’s say you have this simple project:
.
├── css
│ ├── components
│ │ ├── buttons.scss
│ │ ├── modal.scss
│ │ └── nav.scss
│ └── main.scss
├── index.html
└── js
└── modules
├── buttons.js
├── modal.js
└── nav.js
If we run $ vim index.html
from here, we’d need to run the following within Vim in order to open the button’s Sass file in a new vertical split:
:vsp css/components/buttons.scss
Them from there, to open the modal.scss
, you’d need to run:
:vsp css/components/modal.scss
This is kind of annoying, but we can get rid of if by telling Vim to track our current file’s directory! Drop this in your .vimrc
:
" Set the working directory to wherever the open file lives
set autochdir
Now all of our file paths are relative to the current file, not absolute based on where we initialised Vim from! This means that we only need to do this in order to open our modal’s Sass file:
:vsp modal.scss
…because Vim automatically moved us into the css/components/
directory.
You can toggle this by running:
:set autochdir!
…or you may prefer to make a mapping.
If you’re not familiar with Ack, give it a quick read and then install Ack.vim. Now we can find things inside of files across our entire project by doing this:
:Ack --html 'button'
This will search all HTML files in the current directory (be mindful of your autochdir
settings) and all directories below it for the string button
. It will then populate your Quickfix list (:h quickfix
) with all matching results (this is basically project-wide Find).
We can then take this one step further (if we need to) by running :cdo
commands: a way of running a command over all of the results in our Quickfix list. Let’s say we found all instances of button by using the above, and now we want to change them all to btn. We can run this:
:cdo %s/btn/button/gc | update
:cdo
tells Vim to do something across all items in our Quickfix list.%s/button/btn/
tells Vim to look at every line (%
) ands
ubstitite all instances ofbutton
forbtn
.gc
tells Vim to do thisg
lobally on each line and asks us, the developer, to manuallyc
onfirm the change.| update
tells Vim to update the Quickfix list after making changes
So now we’re in a position where we can fuzzy search for file names, we can move Vim into our current directory to make things simpler to look for, we can do global finds using Ack, and global find and replace using the Quickfix list.
No more need for file explorer plugins!