<- Moral of the story... there's no perfect code editor (except maybe Vim)
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.
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).
Pros:
Cons:
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)
Command | Description |
---|---|
ls | Show directory contents, lists names of files |
cd | Change directory |
mkdir | Make a new directory |
rm | Remove a file |
mv | Move a file to a new location |
cat | Output file contents |
pwd | Print working directory (where you are in your terminal) |
Vim has the following modes:
Motions allow you to move around the document
h, j, k, l map to left, down, up, and right respectively.
Command | Description |
---|---|
w and b | Move one word forward/backward (respectively) |
e | Move to end of word |
gg and G | Move to first/last line in current file, respectively |
#+G | Move to a specific line number in current file (replace # with desired line number) |
0 | Move to very beginning of current line |
^ and $ | Move to first/last character of current line (from regular expression syntax) |
Combine numbers with motions:
For the following commands, replace @ with the characters you want to apply the command for (ie. don't actually type @)
Command | Description |
---|---|
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)
Verbs much (usually) be mixed with motions (nouns)
Command | Description |
---|---|
x | Delete one character forward (no motion required) |
dw | Delete one word forward (include whitespace) |
de | Delete to end of word (don't include whitespace) |
d$ | Delete from current cursor position to end of line |
dd | Delete entire line |
d#w | Delete # words forward (replace # with number of words you want to delete) |
For the above commands starting with 'd', change 'd' to:
Use u to undo last command (this is really helpful!)
Use R to redo last undo (this is really helpful!)
Combine everything for superpowers
i (inside) a (around)
Syntax: <verb><i/a><motion>
Examples:
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)
Command | Description |
i | Enter insert mode at current cursor position |
I | Enter insert mode just before first character of line |
a | Enter insert mode just after current cursor position |
A | Enter insert mode just after last character in line |
o | Enter isnert mode while adding a new line below current cursor position |
O | Enter isnert mode while adding a new line above current cursor position |
Command | Description |
---|---|
v | Enter visual mode. All motions will now move the highlight. |
V | Enter visual mode. Highlights entire lines. |
CTRL+v | Enter 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 lets you send commands to Vim
Typing a colon (:) from Normal Mode puts in you Command Mode
Example commands:
Command | Description |
---|---|
:w | Save the current file |
:e /path/to/file | Edit a file |
:q | Quit Vim |
:wq | Save and quit Vim |
:q! | Quit Vim without saving (if Vim yells at you when you try to quit without saving, this force-quits) |
:%s | Find and replace (more details on next slide) |
: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)!
Command | Description |
---|---|
:%s/old/new | Replace first occurrence of old with new |
:%s/old/new/g | Replace 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/g | Replace each occurrence of 'old' (in the current line only) with 'new' |
:%s/old/new/gc | Replace each 'old' with 'new', but ask for confirmation first |
:%s/old/new/gci | Replace each 'old' with 'new' (case-insensitive due to i flag); ask for confirmation |
:5,12s/old/new/g | Replace each 'old' with 'new' for all lines from line 5 to line 12 (inclusive) |
:.,+2s/old/new/g | Replace 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)
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!
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
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).
medskm@pikapi ~/explorations/vim/ $ chrome vim.html
alias chrome='google-chrome'
In the terminal, you can use bash to run a local PHP server:
medskm@pikapi ~/explorations/vim/mowglis/ $ phpserv
I use the following alias helper to use this shorthand for php:
alias phpserv='php -S localhost:8000'
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).
medskm@pikapi ~/explorations/vim/mowglis/ $ chrome mowglis.html
medskm@pikapi ~/explorations/vim/mowglis/ $ phpserv
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:
sudo apt-get install
php7.0-cli
Then you can run the server and access your running webpages on a browser!
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).
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)Vim Cheatsheets
Bash/Command Line Tutorials
Bash/Command Line Cheatsheets
.bashrc and .vimrc files made for you!
~/
directory from the terminalsource ~/.bashrc
and source ~/.vimrc
to update them or
close/reopen a terminal to see the
changes.
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"
Feel free to reach out (medskm@cs.washington.edu) if you have any questions with setting up, etc.!