Terminal commands I use as a frontend developer
Tags: frontend, terminal, beginners, webdev
Published: 2024-03-10 07:13:35



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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpc2ycblmxryf0j47f9u.png)


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](https://iterm2.com/) on my macOS.  Other available options are [Hyper](https://hyper.is/) 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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erppcghxaa1bf0b4an8o.png)

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](https://therdnotes.com/setup-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](https://ohmyz.sh/) and using themes such as [powerlevel10k](https://github.com/romkatv/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. 

```bash
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`  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpsquibkiux6vxqe3x8y.png)

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0xl02almw6qayhlanvw.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnq2j1hmqakdn8int9na.png)

### 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4az3zwtthiocnc3zmze.png)

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb03wfmt88rpvettulad.png)

How do we go back to the previous directory? 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90c6bo53ua9to1ekr566.png)

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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tl04y0t2yk0dsnwslwl.png)

`cd` command can take complex paths as well. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vq09fcfbtwb0j12x56r.png)

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>` 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lye9uf0d2eg6zg8tn93g.png)

### 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1jkhbuuxs7pmmf8g3fh.png)

### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pues1pxt06klxwnr5myt.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgmwxrwj0qrho73ff5m5.png)

## 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvn2mbviji13bzw583up.png)

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

```bash
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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9rcwgu4uhbofrvjivuh.png)

`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` 

```bash
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. 

```bash
open .
```

### lsof

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7w7mt9injldy5b8e7xn.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ey92246i1sx590tun0a.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx2f5r9759eadgqlerm7.png)

### code

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

```bash
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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gawxh1zv9vbadftdxa03.png)

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,

```bash
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](https://twitter.com/junaidshaikh_js) and [Linkedin](https://www.linkedin.com/in/junaidshaikhjs/)

Cover Photo by [Francesco Ungaro](https://unsplash.com/@francesco_ungaro?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/a-red-barn-sitting-on-top-of-a-snow-covered-hillside-PSvYaIxl2aU?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)