DEV Community

DEV Community is a community of 554,873 amazing developers

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

Create new account Log in
loading...
Cover image for Mac setup for a Developer in 2020

Mac setup for a Developer in 2020

#macos #setup #ruby #tutorial
lucaskuhn profile image 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 thing 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 cask to install some recommended apps:

  • Iterm2 for a better terminal 
brew cask install iterm2
Enter fullscreen mode Exit fullscreen mode
  • Rectangle for window management ( I use the spectacle settings ) 
brew cask install rectangle
Enter fullscreen mode Exit fullscreen mode 
brew cask install 1password
Enter fullscreen mode Exit fullscreen mode 
brew cask install visual-studio-code
Enter fullscreen mode Exit fullscreen mode
  • Atom as another editor 
brew cask install atom
Enter fullscreen mode Exit fullscreen mode
  • Kap for screen recording (I used it for creating the gif below) 
brew cask 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
  • Remember to use the included iTerm2 history-autocomplete: 
cmd + ;
Enter fullscreen mode Exit fullscreen mode
  • Improve iTerm window looks 
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 cask 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
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. Do do so in iTerm, you need to add some things: 
Settings -> Profile -> Keys

" βŒ₯ + ← " - Travel back a word - Send text with Vim characters: \033b
" βŒ₯ + β†’ " - Travel forward a word - Send text with Vim characters: \033f
" βŒ₯ + del " - Delete a word - Send hex code: 0x1B 0x08
" ⌘ + del " - Delete line - Send hex code: 0x15
Enter fullscreen mode Exit fullscreen mode

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

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

pic
Editor guide
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.

Read next

rahedmir profile image

How to get main menu-toolbar back in Android Studio IDE ?

Mir Rahed Uddin -

lydiahallie profile image

βœ‹πŸΌπŸ”₯ CS Visualized: CORS

Lydia Hallie -

papasanto profile image

Async Await from Beginner to Advanced Features Including Concurrency

Anthony "Papa" Santo -

jacobjzhang profile image

A Beginner's Reference to SQL vs. NoSQL

Jake Z. -