Mac setup for a Developer in 2021
Tags: macos, setup, ruby, tutorial
Published: 2020-11-25 13:44:50

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](https://brew.sh) 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)"
``` 

*Then use brew to install some recommended apps:*

- [Iterm2](https://iterm2.com) for a better terminal
```
brew install iterm2
``` 

- [Brave](https://brave.com/) for a better browser
```
brew install brave-browser
``` 

- [Rectangle](https://rectangleapp.com) for window management ( I use the spectacle settings )
``` 
brew install rectangle
```

- [1Password](https://1password.com) for password management 
```bash
brew install 1password
```

- [VSCode](https://code.visualstudio.com) as an editor
``` 
brew install visual-studio-code
``` 

- [Atom](https://atom.io/) as another editor 
``` 
brew install atom 
``` 

- [Kap](https://getkap.co) for screen recording (I used it for creating the gif below)
```
brew install kap 
``` 

# Make your terminal pretty 

This will be the final look: 
![iTerm](https://dev-to-uploads.s3.amazonaws.com/i/tn3avyeartadywn3bexf.gif)

- Install [Oh My Zsh](https://ohmyz.sh)
``` 
  sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
``` 

- Set a theme for Oh My Zsh ( I use theunraveler )
``` 
open ~/.zshrc
ZSH_THEME="theunraveler"
``` 

- [Optional] Set a color theme for iTerm ( I love the one by [Clovis](http://www.clovis.pro), instruction below )
``` 
  Download the .itermcolors file from:   https://github.com/Clovis-team/clovis-open-code-extracts/tree/master/utils
  Preferences -> Profile -> Colors -> Import 
```

- Setup [ZSH suggestions](https://github.com/zsh-users/zsh-autosuggestions)
```
brew install zsh-autosuggestions
``` 

- Setup [ZSH Syntax highlighting](https://github.com/zsh-users/zsh-syntax-highlighting)
``` 
brew install zsh-syntax-highlighting
``` 

- Setup [ZSH Completions](https://github.com/zsh-users/zsh-completions)
``` 
brew install zsh-completions
``` 

- Improve iTerm2 window looks
```
Open iTerm2, and go to:
Settings -> Appearance -> Theme: Minimal 
``` 

- Change the font to Menlo (available by default)
```
Preferences -> Profile -> Text -> Font: Menlo
``` 

- Or install a custom font. I like Hack Font from [Nerd Fonts](https://github.com/ryanoasis/nerd-fonts#option-4-homebrew-fonts) (The one I use in the gif)
``` 
brew tap homebrew/cask-fonts
brew install font-hack-nerd-font
brew untap homebrew/cask-fonts
``` 

- Other worthy mention fonts:
```
- Fira Code 
- Source Code Pro
- Cascadia 
- Font Hack 
- Nerd Fonts
```

- Remove the `last login` line on top of iterm:
``` 
cd ~ ; touch .hushlogin
``` 

- [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](https://gist.github.com/LucasKuhn/619345eb75dc3cfeaac3d23833a71ac5) 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  
```

# Ruby Enviroment 

[Rbenv](https://github.com/rbenv/rbenv) for managing ruby versions:
```
brew install rbenv ruby-build
``` 

Then install the latest stable ruby: 
``` 
rbenv install -l
``` 

And enable rbenv on your shell:
```
rbenv init
```

# Heroku CLI 

```
brew tap heroku/brew && brew install heroku
```

# VSCode Setup 

After installing VSCode, let's go from the bloated default: 
![Screen Shot 2020-12-07 at 10.01.16 AM](https://dev-to-uploads.s3.amazonaws.com/i/ydnbno0nd7o1l0io605d.png)

To a cleaner look:
![Screen Shot 2020-12-07 at 9.59.46 AM](https://dev-to-uploads.s3.amazonaws.com/i/v6btchn3pdqqrgjg73ij.png)
  
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](https://dev-to-uploads.s3.amazonaws.com/i/0u1byrwbizu8oyphoht7.png)

Then on settings, search for ligatures, click on edit settings.json, and change the ligatures line to: 
```json
"editor.fontLigatures": true
```

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](https://dev-to-uploads.s3.amazonaws.com/i/6ew63dqypvlyngy23szg.png)
 
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
```

### 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 
```

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: 
```json 
[
    // 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"
    },
]
```

And you're done! Enjoy 

# Sources
General setup and terminal:
- (I like this) https://medium.com/@Clovis_app/configuration-of-a-beautiful-efficient-terminal-and-prompt-on-osx-in-7-minutes-827c29391961
- https://medium.com/better-programming/setting-up-your-mac-for-web-development-in-2020-659f5588b883#3ead
- https://dev.to/v3frankie/setup-your-mac-for-development-2020-edition-1c8a
- https://github.com/bootcoder/ENV_Scratch_Setup#dotfiles

Ruby env:
- https://stackoverflow.com/questions/51126403/you-dont-have-write-permissions-for-the-library-ruby-gems-2-3-0-directory-ma
- https://stevemarshall.com/journal/why-i-use-chruby/
- https://www.moncefbelyamani.com/the-definitive-guide-to-installing-ruby-gems-on-a-mac/
- https://github.com/monfresh/install-ruby-on-macos