Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Become A Command-Line Power User With Oh-My-ZSH And Z

The command line is increasingly becoming a part of every web developer’s workflow. With tools like Grunt, Gulp and Bower leveraging the increase in productivity that comes with working in the command line, we are seeing it become a much more friendly and comfortable place for beginners and experts alike.

This article provides insight into some of the best tools to use in your day-to-day workflow in the command line and gets you started with a totally customized setup. Also, please make sure to check out my series on how to become a command-line power user1, available for free, of course.

Getting The Right Terminal Link

Before we can start using ZSH, Z and related tools, getting the right terminal application up and running would be extremely helpful. The default Terminal and Powershell applications on OS X and Windows leave much to be desired.

For OS X users, iTerm 22 is recommended as a replacement for OS X’s default Terminal. iTerm 2 introduces some features that are missing in the regular terminal, including commands you would regularly use in your text editor. This includes pane splitting, custom color schemes, paste history, fine-grained control over hotkeys, together with dozens3 of other handy preferences that you will find useful as you become more comfortable in the terminal.

On Windows we have the built-in PowerShell. Most users find this quite different to the interface of the typical UNIX servers used to host websites; it’s also rarely addressed in online tutorials. For this reason, it’s recommended to use an emulator that provides a closer experience to a real UNIX command line, like Linux and OS X do.

You have a couple of options here. The easiest would be to install Cmdr, which provides Git integration, custom prompt and color schemes out of the box. For most, this will be more than enough to get started with all major web development tooling. It cannot, however, do any of the ZSH and Z that we will be exploring below.

For a full-blown UNIX emulation, there is Cygwin4 which allows us to run all UNIX commands as well as to work with Oh-My-ZSH. It’s not for the faint of heart, but if you are fairly comfortable with Windows, it might be worth trying out. Alternatively there is the all-in-one OH MY CYGWIN5, which might speed up your installation process.

Use ZSH and Oh-My-ZSH Link

When you start a terminal application, whether it be on your server or your local computer, it is running a shell called Bash. Bash is by far the most popular shell and comes with pretty much every UNIX-based operating system. There are, however, alternatives to Bash that make using the terminal faster and more comfortable for web developers.

One of the most popular shells with web developers is the Z shell, or ZSH. Along with that, we use a ZSH framework named Oh-My-ZSH6.

Installing Oh-My-ZSH is very simple. Simply run the following command and restart your terminal:

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Now, each time you start a terminal session, you will be using ZSH rather than the default Bash!

ZSH Settings Link

Before jumping into the next few sections, we need to know about ZSH settings. These are stored in a .zshrc file located in your home directory. It’s a hidden file, so you might not see it in your home directory, but you can view it by running open ~/.zshrc from the terminal. Swap out open with your favorite editor command, such as nano, subl or vim.

Now, we aren’t making any changes to this file just yet, but leave it open. Whenever you make a change to this file, you need to source it in order for the changes to take effect in your terminal. To do this, you can either close the current tab and open a new one or run the source ~/.zshrc command from the terminal.

Terminal Customization Link

Customizing what your terminal looks like is one of the best things you can do. Not only does it make you look like a bad-ass coder, but it can greatly improve readability via different colors. It can also improve productivity by displaying important information related to file path, Git status and more!

Prompts Link

Prompts are the line(s) of text shown when you are about to type something into the terminal. Your prompt provides useful information related to your project, such as the current version of Ruby, Node.js and so on, the current status of your Git repository, the outcome of the last run task, as well as the current working directory.

You can customize your path into oblivion, but chances are that someone has created a prompt that already suits your needs.

Your ZSH theme is set in the few lines of your .zshrc file. Look for something like ZSH_THEME="robbyrussel" — this is the default theme that comes with ZSH. I recommend setting this to ZSH_THEME="random", which will randomly assign a theme each time you open a new terminal tab or run source ~/.zshrc. Run this a few times until you find one you like; you can find the current theme name by running echo $ZSH_THEME.

01-cobald2-opt-small7
(View large version8)

You can browse all the ZSH themes and prompts in the wiki9. Because there are hundreds of themes, not all of them come with ZSH by default. Any you want will need to be downloaded and placed in ~/.oh-my-zsh/themes; Because this is a hidden directory, you can access it by running open ~/.oh-my-zsh/themes.

Here are a few popular themes:

02-agnoster-opt-small10
Agnoster11 (View large version12)
03-cobalt2-opt-small13
Cobalt214 (View large version15)
04-bira-opt-small16
Bira17 (View large version18)

Note: Many of these themes require a patched font to display the arrows and Git icons. You can download the fonts on GitHub19; then, make sure to set them in your iTerm2 settings.

05-bira-opt-small20
(View large version21)

Color Schemes Link

Now, the prompts define the standard color to be used, but we’ll use iTerm2 themes to customize what those colors actually look like. By default, the themes come with your basic red, green, yellow and blue, but we can tweak those to be the exact variants that we want.

06-schemes-opt-small22
You can think of these colors as variables we can tweak. (View large version23)

You can edit the colors or even make your own theme in “Preferences” → “Profiles” → “Colors,” or grab one of the existing themes already out there.

The ZSH Cobalt2 prompt also comes with an iTerm2 theme24, and you can find hundreds of them25 with a GitHub search; Bastien Dejean’s repository in particular houses a few interesting ones.

File Tabbing Link

So, now that our terminal is looking great, what can we actually do with ZSH and related tools? Probably one of the most useful features of ZSH is that it enables us to list and tab through files and folders. If you have ever tried to perfectly spell the name of a file, struggled with the case or fought with an impossibly long list of folders with spaces in it, you know the pain and limitations of Bash.

Folder and file tabbing works with any terminal command: cd, trash, cp, open, subl, etc. But for the purposes of this tutorial, let’s use cd for folders and open for files.

Go ahead and type cd (note the space after cd), and hit the “Tab” key twice. You can now use your arrow keys to move over, up and down through the files and folders. To select a folder, hit “Return.” You can now hit “Tab” and “Tab” again to discover subdirectories or hit “Return” to run the command.

This also works for completing file and folder names. Let’s say I’ve got two folders, css/ and /Capitalize. If I type cd c and then hit “Tab” twice, I’ll be able to cycle through all of the folders that start with C. You’ll noticed it’s case-insensitive. This is extremely helpful when you have many files with similar names.

Finally, this also works with command names whose names you might not totally remember. For example, if you’re working with MongoDB, 13 commands are associated with it: mongod, mongodump, mongoexport, mongofiles mongoimport and so on

By typing mong and hitting “Tab,” you’ll see all available commands that start with mong.

ZSH Plugins Link

ZSH allows you to extend built-in functionality by adding plugins, and it actually ships with a bunch of fantastic ones. To enable a plugin, open your .zshrc file and scroll down until you see the spot where active plugins are defined. To add a new one, just type the name between the parentheses, making sure to include a space between each name.

plugins=(git cloudapp node npm bower brew osx extract z)

Once you’ve added a plugin, you’ll need to either run source ~/.zshrc or open a new tab.

Some recommended ones are:

  • git
    Enabled by default with Oh-My-Zsh, this enables Git aliases, tab completion and descriptions of all Git commands.
    git + tab
  • cloudapp
    Enables uploading of files to CloudaApp right from the command line.
    cloudapp Archive.zip
  • node
    Opens the Node.js API for your current version in your browser.
    node-docs http
  • npm
    Adds autocompletion to npm, displaying all npm commands.
    npm + tab
  • bower
    Adds autocompletion for Bower commands.
    bower + tab
  • brew
    Adds autocompletion and descriptions for all Brew commands.
    brew + tab
  • osx
    Enables a number of Finder commands26 that are accessible via the terminal.
  • extract
    Unzip all types of compressed files.
  • z
    More on this in the next section!

View the entire list of plugins on the Oh-My-ZSH wiki27.

Using Z To Jump To “Frecent” Folders Link

Z isn’t part of Oh-My-ZSH, but it’s the perfect companion for anyone who heavily uses the command line. The idea behind Z is that it builds a list of your most frequent and recent — “Frecent” — folders and allows you to jump to them quickly in one command, rather than having to tab through a nested folder structure.

To install it, make sure Z is included in the plugins list from above. While this works for most, some users have trouble getting this to work. If that is the case, download download Z28 and put it in your home directory so that it’s located at ~/z.sh. Then, in your .zshrc file, include the following and then source your .zshrc file again.

# include Z, yo
. ~/z.sh

Once it is installed, continue with your regular traversing of directories with your cd command. Z is watching where you frequently and recently have been, and is building a weighted list of directories.

After a few hours of moving around, you can use the z command followed by a word that is in your directory. It uses fuzzy matching to figure out what folder you are trying to get to, and it’s almost always right!

  • z styles might bring you to ~/Dropbox/projects/0202-coffee-shop/styles.
  • z pizza might bring you to ~/Dropbox/projects/0300-pizza/.
  • z pizza styles might bring you to ~/Dropbox/projects/0300-pizza/styles.
  • z 303 might bring you to ~/Dropbox/projects/0303/candy-store/.

For a full list of advanced Z commands, visit the GitHub repository29, or watch the Command Line Power User video on Z.

More, More, More! Link

As developers, we know how important it is to sharpen our tools and continually add new ones to our workflow. The command line is one of the best tools you can master as a developer. With this article, we are just scratching the surface of what we can do with the command line. Check out Command Line Power User30 for all 11 free videos about getting comfortable with the command line.

(al)

Footnotes Link

  1. 1 http://commandlinepoweruser.com/
  2. 2 https://www.iterm2.com/
  3. 3 https://www.iterm2.com/features.html
  4. 4 https://www.cygwin.com/
  5. 5 https://github.com/haithembelhaj/oh-my-cygwin
  6. 6 http://ohmyz.sh/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/07/01-cobald2-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/07/01-cobald2-opt.png
  9. 9 https://github.com/robbyrussell/oh-my-zsh/wiki/themes
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2015/07/02-agnoster-opt.png
  11. 11 https://github.com/robbyrussell/oh-my-zsh/wiki/themes#agnoster
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/07/02-agnoster-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/07/03-cobalt2-opt.png
  14. 14 https://github.com/wesbos/Cobalt2-iterm
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/07/03-cobalt2-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/07/04-bira-opt.png
  17. 17 https://github.com/robbyrussell/oh-my-zsh/wiki/themes#bira
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/07/04-bira-opt.png
  19. 19 https://github.com/powerline/fonts
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/07/05-bira-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/07/05-bira-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/07/06-schemes-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/07/06-schemes-opt.png
  24. 24 https://github.com/wesbos/Cobalt2-iterm
  25. 25 https://github.com/search?q=iterm+extension%3Aitermcolors&ref=searchresults&type=Repositories&utf8=%E2%9C%93
  26. 26 https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins#osx
  27. 27 https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins
  28. 28 https://github.com/rupa/z/blob/master/z.sh
  29. 29 https://github.com/rupa/z
  30. 30 http://CommandLinePowerUser.com
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Wes Bos is an independent full stack JavaScript developer living in Hamilton, Canada where he works with startups and companies to build their products. Wes also works with HackerYou where he teaches web development topics ranging from CSS3 to AngularJS. He is passionate about the workflow and tooling surrounding building web sites and applications. You can find Wes' video tutorials at Wesbos.com and his latest book on Sublime Text at SublimeTextBook.com.

  1. 1

    I’ll have to give this a try. I used git bash tool on windows and found it pretty good but I think for the amount of time I spend in terminal and via I should definitely test these. Thanks for the in depth review and videos, very helpful.

    1
  2. 3

    Santosh Kumar

    July 11, 2015 3:26 pm

    Well I use bash and I find that more productive. Everything that can be done on zsh can be done there. Currently pressing page up and down on half of any command takes me to the history of that command. There are many more extensions than to just move on to zsh.

    4
    • 4

      zhanyan1225

      July 14, 2015 2:12 am

      good

      0
    • 5

      Yeah – all of this stuff can be done with Bash – it’s just easier to get setup with ZSH. So if you already are setup with Bash with all this stuff + what is in the video – great! No need to switch :)

      0
    • 6

      When I started digging into the command line last year, I committed to Bash because it has such wide adoption as a default Unix shell. The ability to sit down at most terminals and have my tool of choice available is quite nice – there’s something to be said for being able to leverage the default.

      For +1 bash cred, you can edit your .bash_profile to set up text highlighting, aliases, and other modifications to improve your workflow.

      1
  3. 7

    Z is installed by default. It’s just that the z.sh won’t run when it’s not executable. So go to: ~/.oh-my-zsh/plugins/z and do a chmod u+x z.sh. Then again source your ~/.zshrc and it should work.

    At least this was the way it worked for me. I haven’t checked what happens now when updating omz via git.

    0
    • 8

      Great tip – you can try this if you aren’t interested in downloading Z separately.

      0
  4. 9

    Well I definitely don’t do enough via the command line so maybe that’s why I can’t get anything to work. I definitely can’t get do subl ~/.zshrc to edit the file in Sublime Text but that’s okay because it’s easy enough to find and just edit. However that doesn’t matter because whenever I try to do source ~/.zshrc I get the error message “The term ‘source’ is not recognized…”. By the way this is in Windows.

    0
    • 10

      I forgot to mention that I initially did all of that from a different command line app I had installed before I remembered that I should probably be doing this all from something like cygwin. So I installed cygwin and tried to run source ~/.zshrc. This time it tried to run that shell script however for some reason when in cygwin it doesn’t recognize any directories or files that begin with a “.” so it couldn’t find the ./oh-my-zsh directory and therefore errored out.

      If anyone has any advice for me that would be great.

      0
      • 11

        I’m having the same issues, but my problem seems to be that when I try to curl or wget the installer, it’s installing it to C:/home/… rather than C:/cygwin/home, which means that when the final step of the installer looks for the .zshrc, it never finds it, and exits.

        Anybody successfully run this on cygwin?

        0
  5. 12

    Love oh-my-zsh. Git aliases are awesome. Also, you don’t even need to type cd to change directory and get tabbing. You can just start typing, even using “..” will take you up a directory without using cd.

    2
  6. 13

    Robby Russell

    July 15, 2015 4:52 am

    Hi Wes!,

    Thanks for sharing some tips on how to use @ohmyzsh!

    One thing that I’d love more people to know about it… is that Oh My Zsh based on the hard work of over 800+ contributors around the globe (to the main git repository that you’d install today). It’s a pretty exciting project to manage and I’m so delighted to read articles like this. I had no idea it was going to be used by so many folks.

    I really appreciate you spreading the word.

    Cheers,
    @RobbyRussell
    @ohmyzsh maintainer

    5
  7. 14

    You better try fish shell!!

    -2
  8. 15

    Jorge Bucaran

    July 20, 2015 1:50 pm

    Nice writeup. If anyone wants to take a break from zsh, and try something more user friendly, but just as powerful, give the fish-shell a try with Wahoo.

    => https://github.com/fish-shell/wahoo

    2
  9. 17

    Namanyay Goel

    July 20, 2015 2:50 pm

    “The easiest would be to install Cmdr” the name is “Cmder” not “Cmdr”.

    0
  10. 18

    I can also recommend The Art of Command Line as a follow-up read

    https://github.com/jlevy/the-art-of-command-line

    1

↑ Back to top