01-05-2021



Developing with Vim

<- Moral of the story... there's no perfect code editor (except maybe Vim)

Run interactive vim tutorials as many times as needed to feel comfortable with the basics. Vim features several modes, e.g. Normal mode, insert mode and command-line mode. Normal mode is for editing and navigating text. In this mode h, j, k and l correspond to the cursor keys ←, ↓, ↑ and →.Most commands in normal mode can be prefixed with a 'count', e.g. 3j moves down 3 lines. Vim +PluginInstall +qall # or run:PluginInstall within Vim To upgrade bundles to their latest version, use the bang version: vim +PluginInstall! +qall # or run:PluginInstall! Within Vim tmux support (optional) If you will be using VIM with tmux for remote pairing or window management, see the pivotal/tmux-config README.

A Basic Web Development Toolbox

Computer (kinda important)

Operating System (Windows, Mac, Linux)

IDE/Text Editor (e.g. Cloud9, Sublime, Notepad++)

A way to run server-side code (e.g. PHP or SQL) on a server (e.g. Cloud9, Filezilla)

These are the basics. We support Cloud 9 for this course as a text editor and tool for running PHP and SQL, but there are many other options depending on the context and the person.

My Web Development Toolbox

Tutorial

Operating System: Linux/Ubuntu

Text Editor: Vim :D

Vim

A way to run server-side code: Bash

Note: When I took this class, I was on a Windows PC using Sublime (a text editor) and Filezilla (a really tedious way to push files to a server).

Vim - The Ultimate Development Tool

Pros and Cons of Vim

Pros:

  • Speed and Efficiency
  • One tool to rule them all (you can edit pretty much any file type with vim)
  • Customization
  • Tried and true - great tutorials and resources, supported on every operating system
  • Very lightweight

Cons:

  • Learning curve
  • Autocomplete isn't built in

The Basics of Bash

Vim is used on a terminal, and to use the terminal, you'll have some command line interpreter which executes commands to do things like changing your current directory, listing all files in the current directory, copying a file, removing files, etc.

Each operating system now supports Bash. Linux and Mac OS X come with Bash already installed. To get Bash on Windows 10, follow these steps.

Note: If you'd like to follow these slides without using the command line on your own computer, you may find this site helpful (it has a built-in command line, as well as tutorials)

CommandDescription
ls Show directory contents, lists names of files
cdChange directory
mkdirMake a new directory
rmRemove a file
mvMove a file to a new location
catOutput file contents
pwdPrint working directory (where you are in your terminal)

The Basics of Vim

Vim has the following modes:

  1. Normal Mode - Keys are used to move around the text.
  2. Insert Mode - Keys used to type/insert as normal.
  3. Visual Mode - Moving the cursor around highlights text (e.g. for cut/copy/paste).
  4. Command Mode - Giving commands to Vim to get things done, such as saving and quitting.

The Basics of Vim: Normal Mode - Motions

Mac Vim Config

Motions allow you to move around the document

h, j, k, l map to left, down, up, and right respectively.

CommandDescription
w and bMove one word forward/backward (respectively)
eMove to end of word
gg and GMove to first/last line in current file, respectively
#+GMove to a specific line number in current file (replace # with desired line number)
0Move to very beginning of current line
^ and $Move to first/last character of current line (from regular expression syntax)
Vim mac tutorial for beginners

Combine numbers with motions:

  • 10j - move 10 lines down
  • 4w - move 4 words forward

The Basics of Vim: Normal Mode - Advanced Motions

For the following commands, replace @ with the characters you want to apply the command for (ie. don't actually type @)

CommandDescription
f@Move cursor on top of first occurrence of @ in current line
F@Same as f@ but backwards
t@Move cursor behind first occurrence of @ in current line
T@Same as t@ but backwards
.Repeat last command (very helpful, especially if prepended with the number of times you want to repeat (e.g. 10. to repeat last dd (delete line) command from current position)
/@Search for all occurrences of @ in file; enter n during search to navigate to next search match, and N to navigate to previous search match

Note that the /@ command is really helpful for quickly finding something in your file (e.g. a specific function name in a JavaScript or PHP file)

Normal Mode - Verbs

Verbs much (usually) be mixed with motions (nouns)

CommandDescription
xDelete one character forward (no motion required)
dwDelete one word forward (include whitespace)
deDelete to end of word (don't include whitespace)
d$Delete from current cursor position to end of line
ddDelete entire line
d#wDelete # words forward (replace # with number of words you want to delete)

For the above commands starting with 'd', change 'd' to:

  • c to change instead of delete (same as delete but puts you in Insert Mode after)
  • y to yank instead of delete (copies whatever you yank; e.g. yw copies next word)

Use u to undo last command (this is really helpful!)

Use R to redo last undo (this is really helpful!)

Normal Mode - Sentences

Combine everything for superpowers

i (inside) a (around)

Syntax: <verb><i/a><motion>

Examples:

  • ci' - delete inside quotes
  • ci{ - delete inside { ... }
  • ciw - change inside current word

Insert Mode

Text editing as normal

ESC key or CTRL+[ exit Insert Mode back into Normal Mode (you can change to another key if ESC is too far for you (I use jj instead of ESC since it's faster, and have this configured in my .vimrc file, also included in the linked .vimrc file I've included for students to get started)

CommandDescription
iEnter insert mode at current cursor position
IEnter insert mode just before first character of line
aEnter insert mode just after current cursor position
AEnter insert mode just after last character in line
oEnter isnert mode while adding a new line below current cursor position
OEnter isnert mode while adding a new line above current cursor position

Mac Vim Gui

Visual Mode

CommandDescription
vEnter visual mode. All motions will now move the highlight.
VEnter visual mode. Highlights entire lines.
CTRL+vEnter visual mode, highlighting lines vertically (useful for selecting multiple linlines and executing the same Insert Command on all).

All motions still work - w to jump words, $ to jump to end of line, etc.

All verbs still work - highlight text, press d to delete, c to change, etc.

Command Mode

Command mode lets you send commands to Vim

Typing a colon (:) from Normal Mode puts in you Command Mode

Mac

Example commands:

CommandDescription
:wSave the current file
:e /path/to/fileEdit a file
:qQuit Vim
:wqSave and quit Vim
:q!Quit Vim without saving (if Vim yells at you when you try to quit without saving, this force-quits)
:%sFind and replace (more details on next slide)

Command Mode - Find and Replace with :s and :%s

You may have found find/replace tools pretty helpful in other editors. Vim lets you do this very easily (and you can even do some fancy find/replace with regex)!

CommandDescription
:%s/old/newReplace first occurrence of old with new
:%s/old/new/gReplace all occurrences of 'old' with 'new' (the g stands for global, the % before s indicates to do find/replace for all lines)
:s/old/new/gReplace each occurrence of 'old' (in the current line only) with 'new'
:%s/old/new/gcReplace each 'old' with 'new', but ask for confirmation first
:%s/old/new/gciReplace each 'old' with 'new' (case-insensitive due to i flag); ask for confirmation
:5,12s/old/new/gReplace each 'old' with 'new' for all lines from line 5 to line 12 (inclusive)
:.,+2s/old/new/gReplace each 'old' with 'new' for all lines from the current line (.) and the next two lines (+2)

Note that when searching, +, ?, |, &, {, (, and ) must be escaped to use their special function (similar to regex), and t is tab, n is newline, and s is whitespace (space or tab)

How to Start Practicing

First make sure you have a terminal available on your computer to navigate, then practice the basic bash commands to move around directories, create new directories, etc.

Next use vim on the terminal to edit an existing file of your choice. Practice using the hjkl keys to move left, down, up, and right, respectively.

After you get the hang of the navigation (in Normal Mode), try your hand at Insert Mode (remember to enter i to enter Insert Mode). Get used to typing as you would normally at first. Once you get the hang of typing in Vim, you can start to practice with using the different noun/verb/sentences.

After you've gotten the hang of the basic commands introduced in these slides, focus on learning a new command per day for the first 2 weeks. There are plenty more really powerful ones!

Using Bash/Vim in CSE 154

To edit any file (txt, HTML, CSS, JS, PHP, SQL, etc.), just type vim filename when you're in the directory for the file you want to edit.

Once you get the hang of typing and moving around in Vim, you can starting writing/editing code much faster.

In the slides below, I've included suggestions for how to most efficiently edit and run different file types using Vim/Bash

HTML/CSS/JS

You can open your HTML page with Chrome from the terminal as well! How to do this depends on the operating system, but I use the google-chrome command on bash to open a file on the browser (I have a .bashrc alias to chrome because it's even quicker to type).

Bash Terminal (in explorations/vim/ directory)

Alias helper defined in .bashrc

PHP

In the terminal, you can use bash to run a local PHP server:

Bash Terminal (in explorations/vim/mowglis/ directory)

I use the following alias helper to use this shorthand for php:

Alias helper defined in .bashrc

You can then view any of your files in the directory you executed phpserv in, and any PHP code will run (e.g. if you wrote JavaScript for your HTML which fetches data from a PHP web service you also wrote in the same directory), using localhost:8000/file/path.

For example, assuming I have mowglis.html which uses mowglis.js/mowglis.php in the directory I ran phpserv in, I would open up the url localhost:8000/mowglis.html in my browser (screenshots on slides below).

Opening mowglis.html locally before running a PHP server

Opening mowglis.html locally after running a PHP server

Vim Mac Tutorial

A Few Notes About Running a Local PHP Server

Note that you can't do anything in bash (including editing any files) when a server is running, but to edit your PHP/etc. files in real-time without shutting down the server, you can simply open up a new terminal and edit from there.

If you don't have PHP installed on your system, you'll have to install it first:

  • On Linux or Windows 10 Bash (Ubuntu), type: sudo apt-get install php7.0-cli
  • Mac installation tutorial (includes steps for installing mysql on Mac)
  • Windows installation tutorial (without Bash)

Then you can run the server and access your running webpages on a browser!

MySQL

To use mysql on the terminal, you'll need to install it if you don't already have it on your computer. This tutorial includes steps for each operating system (the only steps you need to read is 3.1 for your corresponding operating system. Feel free to read the rest of the tutorial for advanced features).

Then use the same commands you use in the Cloud9 terminal to list your databases, tables, and write queries (see slide below).

Using mysql On the Terminal

More Resources

Here are a few tutorials and resources I recommend when learning bash/Vim:

Vim Tutorials

  • vimtutor (type this command on your terminal, and it will bring you to a pretty great interactive walkthrough of Vim on the terminal)
  • Step-by-Step Guide on Starting with Vim (includes tips for getting started on different OS versions)
  • Vim Adventures (a cute game to learn Vim, which I found pretty helpful in the first few days)
  • Really neat Vim Plugins (I use a few for autocomplete in the different web programming languages we use [this is a favorite, here's a demo of me using it to create an HTML page with a table in ~10 seconds] as well as navigation through my directories while in Vim)

Vim Cheatsheets

  • Vim Cheatsheet (the best I've found)

More Resources (Continued)

Mac Install Vim

Bash/Command Line Tutorials

Bash/Command Line Cheatsheets

.bashrc and .vimrc files made for you!

  • These have various syntax-highlighting features, auto-indent features, aliases for running a php server or mysql, etc. You can continue to customize your own with new bashrc/vimrc options you find online!
  • Save both .bashrc and .vimrc to the ~/ directory from the terminal
  • You'll then need to run source ~/.bashrc and source ~/.vimrc to update them or close/reopen a terminal to see the changes.

Vim Mac Tutorial Youtube

Conclusion

Have fun learning Vim and the command line! Once you learn the basics, you can do quite a bit of configuration to make it the most effective tool in your 'web development toolbox'

Vim Mac Tutorial Download

Feel free to reach out (medskm@cs.washington.edu) if you have any questions with setting up, etc.!