DEV Community

Cover image for Mac setup for a Developer in 2021
Lucas Kuhn
Lucas Kuhn

Posted on • Updated on

Mac setup for a Developer in 2021

#macos #setup #ruby #tutorial

I updated my Mac to BigSur, and decided to factory reset everything. Here's a tutorial for setting things up from scratch 🚀

First things first

Start by installing HomeBrew, and a few essential apps. Feel free to skip any app you don't want

  • Install HomeBrew to manage your packages. It comes with cask, so installing apps is a breeze 😌 
  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Enter fullscreen mode Exit fullscreen mode

Then use brew to install some recommended apps:

  • Iterm2 for a better terminal 
brew install iterm2
Enter fullscreen mode Exit fullscreen mode
  • Brave for a better browser 
brew install brave-browser
Enter fullscreen mode Exit fullscreen mode
  • Rectangle for window management ( I use the spectacle settings ) 
brew install rectangle
Enter fullscreen mode Exit fullscreen mode 
brew install 1password
Enter fullscreen mode Exit fullscreen mode 
brew install visual-studio-code
Enter fullscreen mode Exit fullscreen mode
  • Atom as another editor 
brew install atom
Enter fullscreen mode Exit fullscreen mode
  • Kap for screen recording (I used it for creating the gif below) 
brew install kap
Enter fullscreen mode Exit fullscreen mode

Make your terminal pretty

This will be the final look:
iTerm

  sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode
  • Set a theme for Oh My Zsh ( I use theunraveler ) 
open ~/.zshrc
ZSH_THEME="theunraveler"
Enter fullscreen mode Exit fullscreen mode
  • [Optional] Set a color theme for iTerm ( I love the one by Clovis, instruction below ) 
  Download the .itermcolors file from:   https://github.com/Clovis-team/clovis-open-code-extracts/tree/master/utils
  Preferences -> Profile -> Colors -> Import
Enter fullscreen mode Exit fullscreen mode 
brew install zsh-autosuggestions
Enter fullscreen mode Exit fullscreen mode 
brew install zsh-syntax-highlighting
Enter fullscreen mode Exit fullscreen mode 
brew install zsh-completions
Enter fullscreen mode Exit fullscreen mode
  • Improve iTerm2 window looks 
Open iTerm2, and go to:
Settings -> Appearance -> Theme: Minimal
Enter fullscreen mode Exit fullscreen mode
  • Change the font to Menlo (available by default) 
Preferences -> Profile -> Text -> Font: Menlo
Enter fullscreen mode Exit fullscreen mode
  • Or install a custom font. I like Hack Font from Nerd Fonts (The one I use in the gif) 
brew tap homebrew/cask-fonts
brew install font-hack-nerd-font
brew untap homebrew/cask-fonts
Enter fullscreen mode Exit fullscreen mode
  • Other worthy mention fonts: 
- Fira Code 
- Source Code Pro
- Cascadia 
- Font Hack 
- Nerd Fonts
Enter fullscreen mode Exit fullscreen mode
  • Remove the last login line on top of iterm: 
cd ~ ; touch .hushlogin
Enter fullscreen mode Exit fullscreen mode
  • [optional] I like traveling the terminal like I travel a code editor, with option + arrow to travel words etc. I created a gist on github with the extra keymappings

Sidenote for people on BigSur

MacOS for some reason forgets to ask for all permissions required by iTerm2, resulting in updates hanging when using home-brew. To fix that:

Open Security and Privacy -> Privacy Tab -> Full Disk Access -> Enable iTerm
Enter fullscreen mode Exit fullscreen mode

Ruby Enviroment

Rbenv for managing ruby versions:

brew install rbenv ruby-build
Enter fullscreen mode Exit fullscreen mode

Then install the latest stable ruby:

rbenv install -l
Enter fullscreen mode Exit fullscreen mode

And enable rbenv on your shell:

rbenv init
Enter fullscreen mode Exit fullscreen mode

Heroku CLI 

brew tap heroku/brew && brew install heroku
Enter fullscreen mode Exit fullscreen mode

VSCode Setup

After installing VSCode, let's go from the bloated default:
Screen Shot 2020-12-07 at 10.01.16 AM

To a cleaner look:
Screen Shot 2020-12-07 at 9.59.46 AM

Open your settings (cmd + ,) and add Fira Code as your code font, or other preferred font:

Screen Shot 2020-12-07 at 10.05.01 AM

Then on settings, search for ligatures, click on edit settings.json, and change the ligatures line to:

"editor.fontLigatures": true
Enter fullscreen mode Exit fullscreen mode

Open your extensions (cmd + shift + x or last button on the side bar) and install a better theme. I like Atom One Dark Theme. Also, install Prettier:
Screen Shot 2020-12-07 at 10.22.00 AM

Then, go back to settings, and enable format on save. You can now focus on coding instead of formatting your code 🚀

-> Open settings
-> Check the box for Format on Save
Enter fullscreen mode Exit fullscreen mode

Remove the clutter!

Remove thing you probably don't use, like the minimap, status bar on the bottom, and the activity bar with huge buttons on the left.

-> Open the VSCode commands ( cmd + shift + P )
-> Toggle Activity Bar Visibility 
-> Toggle Status Bar Visibility 
-> Toggle Minimap
Enter fullscreen mode Exit fullscreen mode

Almost done! The last thing is adding some useful shortcuts. On every program I use, you can toggle tabs by calling cmd+1 for fist tab, cmd+2 for second, and so on. To do so in VSCode, open the shortcuts settings cmd+k cmd+s click on the top right to open keyboard shortcuts, and add these:

[
    // Open tabs with CMD    
    {
        "key": "cmd+1",
        "command": "workbench.action.openEditorAtIndex1"
    },
    {
        "key": "cmd+2",
        "command": "workbench.action.openEditorAtIndex2"
    },
    {
        "key": "cmd+3",
        "command": "workbench.action.openEditorAtIndex3"
    },
    {
        "key": "cmd+4",
        "command": "workbench.action.openEditorAtIndex4"
    },
    {
        "key": "cmd+5",
        "command": "workbench.action.openEditorAtIndex5"
    },
    {
        "key": "cmd+6",
        "command": "workbench.action.openEditorAtIndex6"
    },
    {
        "key": "cmd+7",
        "command": "workbench.action.openEditorAtIndex7"
    },
    {
        "key": "cmd+8",
        "command": "workbench.action.openEditorAtIndex8"
    },
    {
        "key": "cmd+9",
        "command": "workbench.action.openEditorAtIndex9"
    },

    // Toggle the leftmost bar with the huge icons
    {
        "key": "cmd+ctrl+b",
        "command": "workbench.action.toggleActivityBarVisibility"
    },
]
Enter fullscreen mode Exit fullscreen mode

And you're done! Enjoy

Sources

General setup and terminal:

Ruby env:

Top comments (8)

Collapse
 
rafaelloab profile image
Rafaello Battocchio •

Great post, just what I was looking for!
Ps.: deprecated command:
Error: Calling brew cask install is disabled! Use brew install [--cask] instead.

Collapse
 
lucaskuhn profile image
Lucas Kuhn •

Thank you for your tip! Updated the post (;

Collapse
 
davidyao217 profile image
David Yao •

Heya! The command for 1password still has "brew cask install..."

Thread Thread
 
lucaskuhn profile image
Lucas Kuhn •

Nice catch! Updated ✅

Collapse
 
yogithesymbian profile image
Yogi Arif Widodo •

greats !!! thanks for sharing

Collapse
 
lucaskuhn profile image
Lucas Kuhn •

Glad it helped

Collapse
 
khamo profile image
khyam •

Nice post Lucas! I think you should also include installing git

Collapse
 
ambegossi profile image
Anderson •

Awesome!

Read next

tomilonge profile image

Step-by-Step Guide to Building a Beginner-Friendly Shopping Cart Using Arrays and Functions in JavaScript

Tomi Longe -

iamcymentho profile image

Control Structures in C#: Loops and Conditionals

Odumosu Matthew -

paripsky profile image

Building a Meta Tags Scraping API in Under 40 Lines of Code

paripsky -

furkangozukara profile image

Detailed Comparison of JoyCaption Alpha One vs JoyCaption Pre-Alpha - Ultra Advanced Multi GPU Captioning

Furkan Gözükara -