Home Linux HTML/CSS PHP React VR Blog T-Shirt Shop PHP Fiddle

Intro to VI/VIM








Watch the video tutorial for this lesson:

Intro to VI/VIM:

If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE

Check out my blog:

Coding Commanders Blog

Linux/LampIntro to VIM

In this lesson you will learn all about vi / vim. I will give you a breif background and show you some basic commands. Then we will use vi text editor to create a PHP Hello World program.
If you do not have a Linux environment set up, visit: Setting up LAMP Lessons


What is VI?

Vi is a powerful text editor that was written for Unix. In 1976 Bill Joy wrote the first version.

Definitions

  1. Text Editor: A text editor is what you will use to write your code. Notepad is an example of a very basic text editor. What is the difference between a text editor and word processor? Formatting. A word processor, saves formatting, like colors and spacing, to display text. A text editor will not save formating, just the text. That is why it is suitable to write code.

  2. Unix: Unix is an operating system. It was created in the 1970s as a great platform for software development and an OS to meet the needs of businesses.

    Since its creation, many "Unix family" OS have emerged. These are other OS that are based on the Unix model. Linux is the most popular example of a Unix family OS.

    Unix, and other OS in the family, are:
    Multitaking
    Multiuser

VI vs VIM?

Vim is like an upgraded version of vi. Most Unix family operating systems come standard with vim. Vi has evolved and improved a lot since 1976.

Many programmers, including myself, say 'vi', but mean the modern improved version (vim).

The terms 'vi' and 'vim' are like the terms 'burger' and 'cheese burger'. If your buddy says "I am going to a get a burger", he may be getting his burger with cheese. In fact, I have found people usually do get cheese on their "burger". But, if your buddy says, "I am going to get a cheese burger", he is surely intending to order a burger with cheese.

If someone says 'vim' they mean 'vim'. If someone says 'vi', they are also probably talking about vim (unless it is an old story).


How Do You Use VI?

This tutorial uses Ubuntu and there may be differences in other Linux distributions.

Power up your VirtualBoxes (VMs or computer) and get ready to learn about vi!


Cisco Learning Network Store

Open VI

To open or create a new file in your current directory type vi followed by the file name, like this:

~$ vi performance_reviews.php

~ - If you see a ~ before the $ you know you are in your home directory.
vi - the application we are using
performance_reviews.php - If no file named performance_reviews.php exits in your home directory, you will create one and open it with vi. If performance_reviews.php does exists in your home directory, you will open it with vi and be able to modify the file.

Remember to use ls to see what is in your directory. To learn more basic Linux commands that will be used in this lesson, visit Intro to Linux.


Today's File Location

Today we are going to create a file called cherry.php. Using vi, we write PHP code to display "Hello World! Good-bye Cherry!". Where do you want to put it?

Do you remember the deleting the Apache default page? /var/www/html is where we want it. As long as it is somewhere in that directory (including subdirectories), we will be able to to see our applications in the web browser.

cd

Let's go to /var/www/html

$ cd /var/www/html

mkdir

Next, let's create a directory named projects We will put all of our work in that directory.

$ mkdir projects

Change to the projects directory

cd

$ cd projects

Now that we are there, let's create our file!


Our First File!

To create a file named cherry.php:

$ vi cherry.php

You should see something like this:


Modes: Insert and Command

There are two modes:
1. insert mode (i)
2. command mode (esc)


insert mode allows you to edit the file. To enter insert mode type: i

Once in insert mode, you will be able to type inside the document.

command mode allows you to type commands. To go back to command mode press the escape key: esc

While in command mode, you will be able to execute commands such as saving a file or exiting the application.


Saving a File

You may want to save and continue editing or save and quit. Either way, first make sure you are in command mode.

Save and Quit (ZZ)

If you type ZZ while in command mode, you will save the file and exit vi.

Save and Continue (:w)

If you type :w while in command mode, you will save the file and you WILL NOT close vi. Remember to type i to go back to insert mode.


Quit VI (q!)

To quit without saving the file, while in command mode type: q!


Moving the Cursor

Command Mode
When you are in command mode, you can move the cursor by typing the keys list below.



Insert Mode
If you are in insert mode, you can move the cursor around using your arrow keys.


Deleting Characters

Command Mode
Move the cursor directly below the character you want to delete, then type x

In the picture above, the cursor is under the first 'a'.

If you want to delete more than one character (in command mode), enter the number of characters you want to delete followed up x. So, if you want to delete 4 characters you would type 4x.

Look at the image above. If you wanted to delete all 9 numbers, you would place the curser below the 1 then type 9x
Here are some other useful deleting commands:

You can add a number before each of the above commands to delete multiple lines, rows ect.

Insert Mode
Put the cursor under what character you want to delete and press the delete button.


Undo

Command Mode
u - undo last edit
U - undo all edits option the line.


Replace

Command Mode
REPLACE CHARACTER (r)
✶ Place the cursor on the character you want to replace.
✶ Type r .
✶ Type the new character.
REPLACE WORD (cw)
✶ Place the cursor on the first letter of the word you want to replace.
✶ Type cw .
✶ The last character of your selected word should turn into $
✶ You will automatically be brought back to insert mode and will be able to type the new word.
When you are done typing, you will remain in insert mode until you press the esc button.
REPLACE LINE (C)
✶ Place the curser on the first charcter of the line that you want deleted.
✶ Type a capital C
✶ Type the new text
✶ press esc button.


Copy, Cut & Paste

Command Mode
Select Text:
1) Place the curser under the first character you want to copy.
2) Character: v
Single Line: V
Code block / Multiple Lines: Ctrl + v
3) move the cursor until all the code you want is selected. Copy:
y Cut:
y Paste:
1) Place the curor where you want paste.
2) To paste before the cursor: P
3) To paste after the cursor: p


More Commands

a Append text (after the cursor )
A A Append text (end of line)
I Insert before the first line that isn't blank
o Insert text into a new line below the cursor
O Insert text into a new line above the cursor
X Delete before the curser
x Delete after the curser


Applied Assignment

If you have a Linux environment set up, preform these tasks in Linux. If you do not have a Linux environment set up, you can follow my tutorials to install Oracle VirtualBox, Ubuntu and Apach + MySQL + PHP. To view your code in the web browser visit Delete the Apache Default Page

Background: You were just hired to write and maintain a programming blog.
Assignment: Your boss has given you a list of tasks. Complete each task using VI / VIM text editor.
Tasks:
1) Create a directory called Practice.
Put Practice in this directory: /var/www/html/projects 2) Inside the Practice directory (/var/www/html/projects/practice) create a file named blog_1
3) Using vi, write a paragraph about either why you love coding or why you want to learn code.
4) ONLY USE COMMAND MODE NAVIGATION! Do not use your arrow keys.
5) After you write the paragraph, proofread and edit it in command mode. Make sure to make at least 5 changes/corrections/improvements.

Coding Commanders Storyline:

Coding Commanders Story

Watch the Coding Commanders LAMP Animation:

Coding Commanders: Episode 1

Color Selector



Hex:


RBG:


Follow Coding Commanders on:

YouTube

GitHub

Facebook

Instagram

Twitter

Back to Previous Lesson | Continue to Next Lesson