Terminal commands I use as a frontend developer

Using a terminal can be a daunting task if you are just starting or don’t know the commands required to do the work at hand.

The good news is you don’t need to remember or learn every command out there in the wild before you start using a terminal ( You don’t need to be an expert ). I don’t use more than a dozen commands in my daily job. And once you get used to using the terminal it becomes a superpower.

In this article, we will talk about setting up the terminal, common terminal commands you need to know for daily work and some tips and tricks. Let’s get started.

Terminal Setup

Here is how my terminal looks at the moment.

Pretty simple. We use micro-service architecture, and I like to have a separate tab for each service for easy and quick access.

Every operating system comes up with a built-in terminal feature. macOS has a Terminal app while on Windows we have PowerShell.

I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.

We also need the shell language for the terminal to work. Terminal software runs the command line environment. It’s a way for the user to input the commands and see the output. Shell language executes the command we run on the command line.

macOS already ships with zsh shell language. If you are on Windows you need to do some extra work. Check out this tutorial: Setup terminal with ZSH on Windows. Another popular shell language is Bash

That’s the minimum terminal setup. You can modify the look and add plugins such as autocompletion to your terminal by installing ohmyzsh and using themes such as powerlevel10k. I am already using them.

Terminal Commands

Before we look at commands, we first need to understand the syntax of the commands. Every command takes some input and produces output.

Also, every command comes with some default behaviour. This default behaviour can be tweaked in a pre-defined way using options ( also called as flags ). Multiple options can be combined or can be used separately. This makes it very powerful. So, the general structure of every command goes as follows, where options and input are sometimes optional.

command [options] [input]

pwd

pwd stands for “Print Working Directory”. It’s a way of knowing where we currently are in the file system.

If you are not sure what the current path of the directory you are in the file system pwd can help locate the current path.

When we open a terminal, it lands us in the home directory of the user. On my machine, it’s located at /Users/junaid

Look at the ~ character, it represents the home directory and that cute little home icon is from the powerlevel10k theme mentioned above.

You might not need to use this command if you are not deep inside the file tree structure, up to a certain level the terminal helps us locate where we currently are.

If the terminal window is small enough, it trims the directory name.

ls

Terminal by default doesn’t help us much in understanding the content of the current directory. ls command short for “list” helps us list down the content of the current directory.

Notice that the directories look different than the files. Directory names are in a shade of blue colour and are bold while file names are in greyish and regular weight. The visual indication might differ in your terminal but generally there is some distinction between the two.

cd

Now that we know what the directory contains, we can start moving in between the directories. That’s where the cd command stands for “change directory” is useful.

cd followed by the name of the directory we want to go in.

How do we go back to the previous directory?

We go one step back by using a double dot ( .. ) This is a special character.

• A single dot . represent the current directory
• A double dot .. represents the parent directory.

But, if we want to go deep inside the file structure, do we need to run the cd command for each directory? That would be a terrible experience.

cd command can take complex paths as well.

But, how do I know what is the content of the current directory I am in?

tab-completion for the rescue. tab inside the terminal can do amazing things. After cd try clicking the tab. To go to the previous selection click shift + tab and Enter to select.

mkdir

Once in a while, we need to create a new folder in the file system. mkdir (make directory ) helps us achieve this. cd into the directory you want to create a new directory and run mkdir <directory name>

touch

touch command is used to create a new empty file. This is something I don’t use often, but it’s good to know and can come in handy sometimes.

cat

cat command is useful to view the content of the file. We need to pass the file we want to view the content of and it will print it out on the screen.

I took the liberty to edit the file we created above using the touch command.

We can also print files to show the line numbers using the -n option.

rm

Now, that we learned how to create new files and directories. We should also learn to delete stuff.

rm (remove) helps in removing the file or directory. Be extremely cautious when using rm It deletes the file / directory permanently.

By default rm only delete files and not directories. When we input directory name it throws an error.

rm: [dir_name]: is a directory

To delete directory we need to tweak the behaviour of the command using options. We can use -r ( recursive ) options to remove directory.

rm will ask for permission to delete file if it is write protected. If the file is write protected the user can’t update or delete the file. In such case we can use -f (force) option to delete such files.

This one is my favourite command to delete node modules in a project. Also notice, we combined two options here -r and -f

rm -rf node_modules

clear

Terminal output can get messy. To clear the terminal we can use clear command.

You can also use keyboard shortcut cmd + k to clear the terminal. Benefit of using the keyboard shortcut is that you can clear the terminal while the process is running. To use clear command we need to stop the currently running process.

open

If you want to open any directory in the file explorer, you can use the open command. The following command will open the current directory in file explorer.

open .

lsof

Sometimes, when starting a project in my local machine, I get this warning.

It tells that some other service is running on the same port we are trying to start our server so instead we will choose another one.

Now, this isn’t a big issue, we can continue using this port as well, but on new port I don’t get the benefit of path completion in my browser. I need to type them again.

Instead of trying to find terminal tabs in which other service is running on a particular port, 3000 in this case, we can use the lsof (list of open files) command with -i options to do the work for us. It list down all the open network on this particular port.

Now, we can’t do much with this output to stop this open network. But, the column data PID is useful for us to stop this service. That’s where next command enters.

kill

We got a PID ( process ID ). Now to kill the process, we can run following command.

-9 is the signal number for SIGKILL which signal the command to immediately terminate the process

code

This command is specific to VSCode. To open a directory in VS Code you can run this command.

code . 

You might run into command not found error. To fix, head to VS Code. Open command palette using cmd + shift + p and search for code. Click the option seen below and you will be able to use this command from your terminal.

That’s all the commands I use. There are lot’s of other powerful commands which you can learn and use but this will give a great start in your terminal journey. Start using terminal today! It’s useful skill to have.

I want to end this article with quick tip. You can use your up and down arrow keyboard button to navigate between your previous entered commands. This is useful if you did ran some long command, for example,

git commit -m "fix: footer colors"

and this command fails for some reason. After fixing the issue, I can go back to this command using up arrow key and run it again.

I hope this was useful for you. Thank you for taking the time to read this. You can find me on Twitter and Linkedin

Cover Photo by Francesco Ungaro on Unsplash