Vim For Mac Terminal

Developing with Vim

• Mac Vim Setup
• Vim For Mac Terminal Connector
• Windows Terminal Vim
• Vim Terminal Plugin
• Vim Open Terminal
• Vim Colors Mac Terminal

First run vim -version in the terminal. Notice the +(s) and -(s) and keep it in mind, maybe even take a picture. Next we will install a package manager, if one is not already installed on your computer. We will use Homebrew for this tutorial. Run xcode-select -install in the terminal. It will take about 10-15 min to install the Xcode Command Line Tools. Dec 05, 2019 Terminal: A command line interface to control the UNIX-based operating system that underlies the Mac. VIM: This is a contraction of Vi and IMproved. That is, it is a clone (with additions) of the.

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

A Basic Web Development Toolbox

Mac remote control iphone app. Computer (kinda important)

You simply type vim into the terminal to open it and start a new file. You can pass a filename as an option and it will open that file, e.g. You can open multiple files by passing multiple file arguments. Vim has different modes, unlike most editors you have probably used. Set the EDITORand VISUALenvironment variables to nano. If you use bashon macOS, this is easiest done by editing your /.bashprofilefile and adding the two lines. Export EDITOR=nanoexport VISUAL='$EDITOR'. To the bottom of the file. If the file does not exist, you may create it. I wish to have a normal, small terminal size, and for vim to maximise when I type it in. For this reason I would consider dropping iTerm2, as I actually don't really use any of the handy features I know it offers to people who use terminals a lot. Also, the above line works perfectly well for the normal mac terminal.

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

Operating System: Linux/Ubuntu

Text Editor: Vim :D

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)

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

Motions allow you to move around the document

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

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 @)

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)

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)

Visual Mode

Mac Vim Setup

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

Example commands:

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

Vim For Mac Terminal Connector

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)!

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 Zelda minish cap cheat codes. 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).

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:

Windows Terminal Vim

• 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)

Vim Terminal Plugin

Bash/Command Line Tutorials

Vim Open Terminal

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.

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 Colors Mac Terminal

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