DEV Community

loading...
Cover image for Here's what you need to learn and master Vim, the modal text editor 🤸‍♀️
Bytesized Code

Here's what you need to learn and master Vim, the modal text editor 🤸‍♀️

signalnerve profile image Kristian Freeman Originally published at bytesized.xyz ・5 min read

Bytesized is a weekly newsletter covering important ideas for developers. Join 4,000+ developers who get our newsletter in their inbox every week ➝

Vim (Vi IMproved) was first released in 1991 by Bram Moolenaar. It started as a clone of vi, a Unix text editor initially released in 1976.

Vim (and Vi) are modal text editors: they have contextual "modes" that allow you to interact with the text in your file in different ways. Vim has modes for different situations – insert for when you're writing text, visual for selecting text and manipulating it, normal for navigating through your document, and many more for ancillary situations.

Here's Greg Hurrell on modal text editors:

A modal text editor is a, nowadays rare, text editor that offers multiple interaction modes which are optimized for specific types of action and interaction. The rationale is that each mode is a finely-tuned tool which allows the user to realize their objectives in an efficient and powerful manner. This does require more learning than you might be accustomed to as a user of a non-modal editor, but the reward is hopefully increased efficiency and power.

Vim

Last week, we looked at the most popular editor in the world, VSCode.

Our focus was on productivity – most readers of Bytesized probably know of VSCode, and are probably using it.

The same generally can't be said of Vim: only 25% of people surveyed in Stack Overflow's 2019 Developer Survey use Vim, and it has a notoriously hard learning curve.

I've used Vim for almost a decade, and even if I'm not in Vim every day, the concepts of modal editing and keyboard-based navigation have transferred over into everything I do on the computer. Learning Vim is worth doing!

In this edition of the Bytesized newsletter, I'll cover both how to learn Vim, by going through some great tutorials and long-form pieces on how to think about modal editing, as well as some batteries-included configurations and plugins to have a great setup quickly. The Vim ecosystem is incredibly active and there's a ton of great developer experience improvements to be made over Vim's default setup as well, so if you're using Vim, you'll still get a ton out of this newsletter. Let's dig in!

Learn Vim, fast

How to Learn Vim: A Four Week Plan

Peter Jang offers a structured four-week plan to learn the fundamentals of Vim:

  • Week 1: Complete vimtutor once a day, every day
  • Week 2: Use Vim with minimal config, no plugins
  • Week 3: Use Vim with minimal plugins
  • Week 4: Compose Vim commands with verbs and nouns

VimTricks – weekly tips, tricks, guides, plugins, videos, screencasts, and more – all about Vim

VimTricks is a newsletter covering Vim tricks and plugins. Each week, you get a new Vim command, tip, or hack on how to work inside of Vim more effectively. Even if I'm not using Vim and I'm experimenting with a new editor or tool, I still try to catch up with VimTricks every week – it's a great read!

Learn Vim For the Last Time: A Tutorial and Primer

Daniel Missler's blog has a comprehensive (and up-to-date) reference to Vim, covering both the basics – working with files, changing/deleting text, etc., and more advanced topics, like repeating commands, macros. Of particular note is the section on Vim's editing language – see the video "Mastering the Vim Language" later in the newsletter for more on this.

vim.so: Learn and Master Vim faster with interactive exercises

Kenneth Cassel is building an interactive online Vim course that's available for just $8 at an early-bird discount.

Instant configurations

A huge part of Vim's culture is sharing your configuration. The rise of GitHub has made this super easy: there's a ton of batteries-included Vim configurations that you can install in minutes to completely change (and hopefully enhance) your Vim workflow. Here's some of the more popular ones:

GitHub logo amix / vimrc

The ultimate Vim configuration (vimrc)

VIM

The Ultimate vimrc

Over the last 10 years, I have used and tweaked Vim. This configuration is the ultimate vimrc (or at least my version of it).

There are two versions:

  • The Basic: If you want something small just copy basic.vim into your ~/.vimrc and you will have a good basic setup
  • The Awesome: Includes a ton of useful plugins, color schemes, and configurations

I would, of course, recommend using the awesome version.

How to install the Awesome version?

Install for your own user only

The awesome version includes a lot of great plugins, configurations and color schemes that make Vim a lot better. To install it simply do following from your terminal:

git clone --depth=1 https://github.com/amix/vimrc.git ~/.vim_runtime
sh ~/.vim_runtime/install_awesome_vimrc.sh

Install for multiple users

To install for multiple users, the repository needs to be cloned to a location accessible for all the intended users.

git clone --depth=1 https://github.com/amix/vimrc.git
…

GitHub logo SpaceVim / SpaceVim

A community-driven modular vim distribution - The ultimate vim configuration

SpaceVim

Wiki | Community | Sponsors | Twitter | Gitter Chat | 中文官网

Build Status Build status codecov Docker Build Status Version GPLv3 License Doc

welcome page

SpaceVim is a community-driven modular Vim distribution. It manages collections of plugins in layers, which help to collect related packages together to provide IDE-like features.

The last release is v1.6.0, check out following-HEAD page for what happened since last release.

See the followings below for more information:

Support SpaceVim

This project exists thanks to all the people who contributed We are thankful for any contributions from the community.

The best way to support SpaceVim is to contribute to it either by reporting bugs Helping the community on the Gitter Chat or sending pull requests.

For more information please check our development guidelines.

If you use SpaceVim…

GitHub logo spf13 / spf13-vim

The ultimate vim distribution

spf13-vim : Steve Francia's Vim Distribution

                __ _ _____              _
     ___ _ __  / _/ |___ /      __   __(_)_ __ ___
    / __| '_ \| |_| | |_ \ _____\ \ / /| | '_ ` _ \
    \__ \ |_) |  _| |___) |_____|\ V / | | | | | | |
    |___/ .__/|_| |_|____/        \_/  |_|_| |_| |_|
        |_|

spf13-vim is a distribution of vim plugins and resources for Vim, Gvim and MacVim.

It is a good starting point for anyone intending to use VIM for development running equally well on Windows, Linux, *nix and Mac.

The distribution is completely customisable using a ~/.vimrc.local, ~/.vimrc.bundles.local, and ~/.vimrc.before.local Vim RC files.

spf13-vim image

Unlike traditional VIM plugin structure, which similar to UNIX throws all files into common directories, making updating or disabling plugins a real mess, spf13-vim 3 uses the Vundle plugin management system to have a…

Watch Vim in action

How to Configure Vim like VSCode

Ben Awad covers his configuration to setup Vim like VSCode, including a file explorer, type-ahead suggestions, and more.

THE PERFECT VIM CONFIGURATION

Sebastian Karlsson dives into his .vimrc (the Vim configuration file), how it works, and how to install it for yourself.

Mastering the Vim Language

Chris Toomey covers Vim's editor language – a dense mapping of text objects, nouns, and verbs – that allow you to think about inserting and editing text in a way that many other editors simply can't do.

What is Neovim, and why should you care?

Neovim is an open-source project to modernize Vim and Vim's modal editing for a new generation of programmers. In this video, the MinuteVimTricks YouTube channel covers why Neovim matters for Vim developers, and why it may be worth switching to.

My favorite plugins

Like I said at the beginning of the email, I've been using Vim for almost a decade. Since this newsletter is getting a bit long, I narrowed down my choice picks to just three – the plugins I can't live without when I'm in Vim.

Syntastic

syntastic is a syntax checking plugin for Vim. If you've only worked with VSCode or other IDEs (integrated development environments), you might be surprised to learn that Vim ships without any sort of syntax checking! This plugin hooks into your language's checker tools (e.g. jslint, rustc, or gcc) and renders potential code errors right in your editor.

GitHub logo vim-syntastic / syntastic

Syntax checking hacks for vim


              / \,,_  .'|
           ,{{| /}}}}/_.'            _____________________________________________
          }}}}` '{{'  '.            /                                             \
        {{{{{    _   ;, \          /            Ladies and Gentlemen,              \
     ,}}}}}}    /o`\  ` ;)        |                                                |
    {{{{{{   /           (        |                 this is ...                    |
    }}}}}}   |            \       |                                                |
   {{{{{{{{   \            \      |                                                |
   }}}}}}}}}   '.__      _  |     |    _____             __             __  _      |
   {{{{{{{{       /`._  (_\ /     |   / ___/__  ______  / /_____ ______/ /_(_)____ |
    }}}}}}'      |    //___/   --=:   \__ \/ / / / __ \/ __/ __ `/ ___/ __/ / ___/ |
jgs `{{{{`       |     '--'       |  ___/ / /_/ / / / / /_/ /_/ (__  ) /_/ / /__   |
     }}}`                         | /____/\__, /_/ /_/\__/\__,_/____/\__/_/\___/   |
                                  |      /____/                                    |
                                  |                                               /
                                   \_____________________________________________/

  1. Introduction
  2. Installation 2.1. Requirements 2.2. Installing syntastic with Pathogen
  3. Recommended settings
  4. FAQ 4.1. I installed syntastic but it isn't reporting any errors... 4.2. Syntastic supports several checkers for my filetype, how…

vim-airline

vim-airline was one of the first plugins I used to make my Vim installation look good. It updates Vim's tabline (the solid bar across the bottom of Vim's UI) with better colors, as well as the ability to customize it with information from other plugins, or from your own custom scripts.

GitHub logo vim-airline / vim-airline

lean & mean status/tabline for vim that's light as air

vim-airline

Say Thanks! reviewdog CI

Lean & mean status/tabline for vim that's light as air.

img

When the plugin is correctly loaded, there will be a nice statusline at the bottom of each vim window.

That line consists of several sections, each one displaying some piece of information. By default (without configuration) this line will look like this:

+-----------------------------------------------------------------------------+
|~                                                                            |
|~                                                                            |
|~                     VIM - Vi IMproved                                      |
|~                                                                            |
|~                       version 8.2                                          |
|~                    by Bram Moolenaar et al.                                |
|~           Vim is open source and freely distributable                      |
|~                                                                            |
|~           type :h :q<Enter>          to exit                               |
|~           type :help<Enter> or <F1>  for on-line help                      |
|~           type :help version8<Enter> for version info                      |
|~                                                                            |
|~                                                                            |
+-----------------------------------------------------------------------------+
| A | B |                     C                            X | Y | Z |  [...] |
+-----------------------------------------------------------------------------+

The statusline is the colored line at the bottom, which contains the sections (possibly in different colors):

section
…

ctrlp

ctrlp is a classic fuzzy file finder for Vim, used to quickly look up files in a project. This keyboard-based file finder became extremely popular via the editor TextMate, and this project seeks to bring it to Vim. Just type <CTRL>-p (or whatever you customize it to), write a few characters of the file you're looking for, and press enter. So easy!

GitHub logo kien / ctrlp.vim

Fuzzy file, buffer, mru, tag, etc finder.

#This project is unmaintained You should use this fork instead.

ctrlp.vim

Full path fuzzy file, buffer, mru, tag, ... finder for Vim.

  • Written in pure Vimscript for MacVim, gVim and Vim 7.0+.
  • Full support for Vim's regexp as search patterns.
  • Built-in Most Recently Used (MRU) files monitoring.
  • Built-in project's root finder.
  • Open multiple files at once.
  • Create new files and directories.
  • Extensible.

ctrlp

Basic Usage

  • Run :CtrlP or :CtrlP [starting-directory] to invoke CtrlP in find file mode.
  • Run :CtrlPBuffer or :CtrlPMRU to invoke CtrlP in find buffer or find MRU file mode.
  • Run :CtrlPMixed to search in Files, Buffers and MRU files at the same time.

Check :help ctrlp-commands and :help ctrlp-extensions for other commands.

Once CtrlP is open:
  • Press <F5> to purge the cache for the current directory to get new files, remove deleted files and apply new ignore options.
  • Press <c-f> and <c-b>…

Liked this issue? Good news—Bytesized's theme this month is editors. We'll be looking at text editors, tools for thought, and how to be more productive this year as we build software. See you next week!

Bytesized is a weekly newsletter exploring important ideas for developers. Join us on our Discord server 👋

Discussion

pic
Editor guide