Skip to content
Search Create account

DEV Community

DEV Community is a community of 850,025 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Twitter Facebook Github Instagram Twitch
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 
brew install discord
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

I recently started using ruby-install and chruby instead of rbenv.
It's a lightweight solution and seems simpler to use:

brew install ruby-install
brew install chruby
Enter fullscreen mode Exit fullscreen mode

Then install the latest stable ruby:

ruby-install ruby
Enter fullscreen mode Exit fullscreen mode

And enable chruby to set that version as default, and change the version according to .ruby-version file on a folder.
To do so, append to your .zshrc:

source /usr/local/opt/chruby/share/chruby/chruby.sh
source /usr/local/opt/chruby/share/chruby/auto.sh
chruby ruby-2.7.2 # <- Your installed version here
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:

Discussion (9)

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 Author •

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 Author •

Nice catch! Updated ✅

Collapse
jaredcwhite profile image
Jared White •

Lots of great suggestions here! I resisted switching to iTerm for a long time, but when I finally did I was so glad. With a nice dark theme and minimal style, it looks awesome.

Collapse
yogithesymbian profile image
Yogi Arif Widodo •

greats !!! thanks for sharing

Collapse
lucaskuhn profile image
Lucas Kuhn Author •

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

achrafash profile image

Fullstack, Type safe application with React and GraphQL codegen

Achraf -

denicmarko profile image

JavaScript Array methods explained

Marko Denic -

alisaduncan profile image

How to Build Micro Frontends Using Module Federation in Angular

Alisa -

kai_wenzel profile image

Mindblowing🤯 features in Javascript

Kai Wenzel -