DEV Community

loading...
Cover image for Mac setup for a Developer in 2021

Mac setup for a Developer in 2021

Lucas Kuhn
・Updated on ・4 min read

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
  • 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
  • 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 (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 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
yogithesymbian profile image
Yogi Arif Widodo

greats !!! thanks for sharing

Collapse
lucaskuhn profile image
Lucas Kuhn Author

Glad it helped

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
ambegossi profile image
Anderson

Awesome!