DEV Community

Ariel Mejia
Ariel Mejia

Posted on

Set an awesome terminal in MacOS

#macos #terminal #webdev

Here a few tips that would bring your terminal experience to a whole new level.

Install Homebrew

You can install homebrew Here

Install Iterm

It allows to work on a pretty custom terminal

You can install Iterm 2 Here

Personally I like to change iterm colors, it is placed in: preference > profiles > colors tab > colors preset, then just choose the preset you like.

Optionally you can add a custom theme for Iterm

You can find iterm themes Here

Take in mind to add a theme you need to create an .itermcolors file

For example I like Dracula Theme

So in order to add it I need to grab the content and create file like:

cd $HOME
vi .Dracula.itermcolors
Enter fullscreen mode Exit fullscreen mode

Then insert the content of the selected theme in my case for dracula

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Ansi 0 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.0</real>
        <key>Green Component</key>
        <real>0.0</real>
        <key>Red Component</key>
        <real>0.0</real>
    </dict>
    <key>Ansi 1 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.3333333432674408</real>
        <key>Green Component</key>
        <real>0.3333333432674408</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Ansi 10 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.4823529411764706</real>
        <key>Green Component</key>
        <real>0.98039215686274506</real>
        <key>Red Component</key>
        <real>0.31372549019607843</real>
    </dict>
    <key>Ansi 11 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.5490196078431373</real>
        <key>Green Component</key>
        <real>0.98039215686274506</real>
        <key>Red Component</key>
        <real>0.94509803921568625</real>
    </dict>
    <key>Ansi 12 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.97647058823529409</real>
        <key>Green Component</key>
        <real>0.57647058823529407</real>
        <key>Red Component</key>
        <real>0.74117647058823533</real>
    </dict>
    <key>Ansi 13 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.77647058823529413</real>
        <key>Green Component</key>
        <real>0.47450980392156861</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Ansi 14 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.99215686274509807</real>
        <key>Green Component</key>
        <real>0.9137254901960784</real>
        <key>Red Component</key>
        <real>0.54509803921568623</real>
    </dict>
    <key>Ansi 15 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>1</real>
        <key>Green Component</key>
        <real>1</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Ansi 2 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.4823529411764706</real>
        <key>Green Component</key>
        <real>0.98039215686274506</real>
        <key>Red Component</key>
        <real>0.31372549019607843</real>
    </dict>
    <key>Ansi 3 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.5490196078431373</real>
        <key>Green Component</key>
        <real>0.98039215686274506</real>
        <key>Red Component</key>
        <real>0.94509803921568625</real>
    </dict>
    <key>Ansi 4 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.97647058823529409</real>
        <key>Green Component</key>
        <real>0.57647058823529407</real>
        <key>Red Component</key>
        <real>0.74117647058823533</real>
    </dict>
    <key>Ansi 5 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.77647058823529413</real>
        <key>Green Component</key>
        <real>0.47450980392156861</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Ansi 6 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.99215686274509807</real>
        <key>Green Component</key>
        <real>0.9137254901960784</real>
        <key>Red Component</key>
        <real>0.54509803921568623</real>
    </dict>
    <key>Ansi 7 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.73333334922790527</real>
        <key>Green Component</key>
        <real>0.73333334922790527</real>
        <key>Red Component</key>
        <real>0.73333334922790527</real>
    </dict>
    <key>Ansi 8 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.33333333333333331</real>
        <key>Green Component</key>
        <real>0.33333333333333331</real>
        <key>Red Component</key>
        <real>0.33333333333333331</real>
    </dict>
    <key>Ansi 9 Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.33333333333333331</real>
        <key>Green Component</key>
        <real>0.33333333333333331</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Background Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.15977837145328522</real>
        <key>Green Component</key>
        <real>0.12215272337198257</real>
        <key>Red Component</key>
        <real>0.11765811592340469</real>
    </dict>
    <key>Bold Color</key>
    <dict>
        <key>Blue Component</key>
        <real>1</real>
        <key>Green Component</key>
        <real>1</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Cursor Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.73333334922790527</real>
        <key>Green Component</key>
        <real>0.73333334922790527</real>
        <key>Red Component</key>
        <real>0.73333334922790527</real>
    </dict>
    <key>Cursor Text Color</key>
    <dict>
        <key>Blue Component</key>
        <real>1</real>
        <key>Green Component</key>
        <real>1</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Foreground Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.94901961088180542</real>
        <key>Green Component</key>
        <real>0.97254902124404907</real>
        <key>Red Component</key>
        <real>0.97254902124404907</real>
    </dict>
    <key>Selected Text Color</key>
    <dict>
        <key>Blue Component</key>
        <real>1</real>
        <key>Green Component</key>
        <real>1</real>
        <key>Red Component</key>
        <real>1</real>
    </dict>
    <key>Selection Color</key>
    <dict>
        <key>Blue Component</key>
        <real>0.35294118523597717</real>
        <key>Green Component</key>
        <real>0.27843138575553894</real>
        <key>Red Component</key>
        <real>0.26666668057441711</real>
    </dict>
</dict>
</plist>
Enter fullscreen mode Exit fullscreen mode

And save

Then Go to Settings > Profiles > Colors > Colors Presets > Import > Users Home Directory

Then press the three keys at the same time command+shift+. to show hidden files and select the color theme created.

Install Oh My Zsh

It allows to add more abilities to your terminal

You can install it here

Install Power Level 10 theme

It adds a lot of customizations options handled with an installation wizard:

Clone manually

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ~/powerlevel10k
echo 'source ~/powerlevel10k/powerlevel10k.zsh-theme' >>~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Install using oh my zshell

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
Enter fullscreen mode Exit fullscreen mode

Then edit the oh my zsh rc file:

Using vi

vi ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Using nano

nano ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Search for the ZSH_THEME key and update the value:

ZSH_THEME="powerlevel10k/powerlevel10k"
Enter fullscreen mode Exit fullscreen mode

Restart ZSH

exec zsh
Enter fullscreen mode Exit fullscreen mode

It would run the installation wizard automatically.

To run again in the future the wizard execute p10k configure

Install autosuggestions

Now you are able to install autosuggestions with "Oh My ZSH" the installation guide here

Install Bat

cat is a command to show a file content, bat does pretty much the same, but adding highlight syntax in the terminal output:

Install it using Hombrew

brew install bat
Enter fullscreen mode Exit fullscreen mode

Install it using MacPorts

port install bat
Enter fullscreen mode Exit fullscreen mode

Set Syntax Highlight Theme

Generate a config file

bat --generate-config-file
Enter fullscreen mode Exit fullscreen mode

The output should look like this:

Success! Config file written to /Users/<username>/.config/bat/config
Enter fullscreen mode Exit fullscreen mode

Grab the output and edit the file:

vi /Users/<username>/.config/bat/config
Enter fullscreen mode Exit fullscreen mode

In this case, I update the theme to "Dracula", but there are some pretty popular themes like "Nord" or "Monokai"

--theme="Dracula"
Enter fullscreen mode Exit fullscreen mode

Set Vim syntax

open vim .vimrc

And set this values (you can go as far as you need, this is just a simple example)

set showmode
set autoindent
set tabstop=4
set expandtab
syntax on
Enter fullscreen mode Exit fullscreen mode

Set same terminal font for VSCode

Open VSCode and press CMD + ,

Then would open the palette and type settings.json then add the font family and size that you want, in this case I would use the same Font Family from iterm using powerlevel10 theme:

"terminal.integrated.fontFamily": "Meslo LG M for Powerline"
"terminal.integrated.fontSize": 14
Enter fullscreen mode Exit fullscreen mode

There are a lot of changes so it requires restarting your computer

There is room to improve your terminal even more, in my case this configuration is fine, but there are other pretty common tools like:

  • fzf
  • exa

Thanks for reading!

Top comments (0)

Read next

laznic profile image

Building a realtime eye tracking experience with Supabase and WebGazer.js

Niklas Lepistö -

djangotricks profile image

HTTPS for Django Development Environment

Aidas Bendoraitis -

sudhil profile image

Mystery of Hoisting in JavaScript!

Sudhil Raj K -

sunilkumrdash profile image

25 top open-source tools for building web apps you can't afford to miss in 2025🎉 🚀

Sunil Kumar Dash -