DEV Community

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

Posted on • Edited 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

sajaddp profile image

How to Learn TypeScript in One Day?

Sajad DP -

prince_beec5ccde00b7c6c73 profile image

3d Image carousel rotation illusion using html css and javascript

Prince -

dee_codes profile image

Setting up Redis in a Next.js Application

Hadiza Mohammed -

grenishrai profile image

40 Frontend Developer Interview Questions

Grenish rai -