How to Create the Flatiron School Terminal Command Prompt

Tech

 

Starting out as a software developer, I was so excited to dive deep into Terminal. The command line is ground zero for software development. You can control everything and write some fun programs. It’s dynamic, responsive and there’s no limit to what it can do.Today I’m going to walk you through customizing your terminal prompt. By the end of this resource you should be able customize it however you’d like. Add emojis to it, change the colors of it, etc.

Today lets start by changing this:

The Default Configuration of the Command Line in Mac OS Terminal

 

To this:

A Basic Reconstruction of the Flatiron School Command Line

Let’s get started. Here’s what we’ll do first, and every-time you want to make a change to your command-line again.

 

1. Open Terminal, navigate to the root (~) directory.

Whenever you type a command in terminal, press return to run it.

 

cd ~

 

2. Edit the .bash_profile

There are a few ways of going about this. If you’re familiar with vi or vim, or you’re feeling like trying something new, go ahead and type in:

 

vim .bash_profile

 

Note: If you’re new to the “vim” command, this is a built in text editor. Some senior devs frown on those who don’t know it, but most devs cant stand it. But here are the basic commands for it and how to learn more about it:

 

  • vim tutor = opens up the vim tutorial with a list of commands
  • a = press to “insert” or modify an open file in vim
  • ESC = press this key when you’re done typing to exit “insert” mode
  • :wq = to save a file and exit
  • :q! = to force exit
  • ctrl + u = to undo
  • ctrl + r = to redo

 

If you’re not comfortable with vim or don’t want to use it. Press ESC and then type :wq and press enter to save and exit. Let’s open this file in my favorite text editor instead, Atom. To do this, type in this command instead, or skip to the next step using vim

 

atom .bash_profile

 

Great! Now you can use atom or vim to write and save your changes to this file. So, now that we’ve got that covered let’s get into the good stuff.

 

EXTREMELY IMPORTANT NOTE!

If you’ve been developing for a while, you’ll probably notice a bunch of text already existing in this .bash_profile. Never delete the preexisting text, we generally add these customizations BEFORE what already exits… but…

Before you make ANY changes, BACK UP THIS FILE!

You can save it to a .txt file or anything of the sort.

 

3. Add our new BASH customizations

 

export PS1="[\[\e[48;5;25m\]\t\[\e[0m\]] \[\e[38;5;70m\]\W\[\e[0m\]\n\e[38;5;25m\]\e[0m\]\e[38;5;160m\]♥ \e[0m\]"

 

Try copying my configuration above, and paste it into your .bash_profile file. Save it, and then quit terminal and reopen it… Tada! You’ve now got the Flatiron School command line prompt!

But let’s not stop here… I want to teach you how to customize your command line however you’d like. Though BASH is an incredibly complicated language, you shouldn’t expect yourself to need to understand it at this point. As you move along in your dev career, it’ll become more clear. But for now, we’ve got a generator!

 

http://bashrcgenerator.com/

 

Woop woop! Click and drag what you want into the “your selection” window, edit the colors, and pro-tip, to add an emoji anywhere in this generator / configuration. You’ll want to add a “@” symbol, then when you copy and paste into your .bash_profile. Locate that “@” symbol, select it, then replace it with the edit > Emoji & Symbols menu… Select an emoji to replace it as your heart desires! Then save!

Here are some examples of some previous configurations of mine

 

export PS1="✨"
export PS1="[\t] \w\n ✨ \[$(tput sgr0)\]"
export PS1="[\[\033[48;5;6m\]\t\[\e[0m\]] \[\e[38;5;70m\]\W\[\e[0m\]\n\e[38;5;25m\]\e[0m\]\e 🌊 \e[0m\]"
export PS1="[\[\033[48;5;6m\]\t\[\e[0m\]] \[\e[38;5;70m\]\W\[\e[0m\]\n\e[38;5;25m\]\e[0m\]\e 🥶 \e[0m\]"

 

If you’re interested in learning more about these individual bash commands, here’s some of the basic syntax:

  • \u— Username
  • \d — Current date
  • \t — Current time as HH:MM:SS
  • \W— Current working directory
  • \w — Full path of your current working directory
  • \n — Adds a new line
  • see more

 

Conclusion

I’ve added a few additional resources below — there are tons of possibilities with your BASH profile and so many ways of configuring it. I hope you’re able to use this information to make yours look more professional, personal and fun.

I think it’s definitely worth the effort getting to know BASH and VIM a bit more over time, but take it little by little. Obviously learning code is a bit overwhelming at first, but trust that it all comest together in time.

Happy coding!

More Resources