Ariel Mejia

Posted on Aug 28

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

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>

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

Install using oh my zshell

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

Then edit the oh my zsh rc file:

Using vi

vi ~/.zshrc

Using nano

nano ~/.zshrc

Search for the ZSH_THEME key and update the value:

ZSH_THEME="powerlevel10k/powerlevel10k"

Restart ZSH

exec zsh

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

Install it using MacPorts

port install bat

Set Syntax Highlight Theme

Generate a config file

bat --generate-config-file

The output should look like this:

Success! Config file written to /Users/<username>/.config/bat/config

Grab the output and edit the file:

vi /Users/<username>/.config/bat/config

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

--theme="Dracula"

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

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

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:

Thanks for reading!

DEV Community

Set an awesome terminal in MacOS

Install Homebrew

Install Iterm

Optionally you can add a custom theme for Iterm

Install Oh My Zsh

Install Power Level 10 theme

Install autosuggestions

Install Bat

Set Syntax Highlight Theme

Set Vim syntax

Set same terminal font for VSCode

Top comments (0)

Read next

React Basics~unit test/user event

No more Try/Catch: a better way to handle errors in TypeScript

Installing Node.js on Windows: A Complete Tutorial

Deno HAR Parser: Simplify Your Network Debugging 🚀🦕