My macOS Development Environment: iTerm2, oh-my-zsh, and VS Code

Overview

A new team member had just joined my team at GitHub and it was their first time using macOS as the primary work machine. They had asked if I had any tips on setting up your local development environment. Hint: I do! I also came from a Windows background and only first started using macOS for work in late 2019.

I was going to link them to my Powerlevel10k Zsh Theme in GitHub Codespaces, but then I realized: this is for setting up a development environment in Codespaces, not so much locally. I wrote up these instructions for my co-worker, but I thought I would re-purpose them into a blog post that I can share with others as well!

iTerm2, oh-my-zsh, and powerlevel10k theme setup

Install iTerm2: brew install --cask iterm2
Install the MesloLGS fonts
Download my iTerm profile as a json file and import into iTerm
- In iTerm, go to: Preferences > Profile, you can use the + to import the iterm2-profile.json profile
- I believe the only other special things that I have in the profile (other than colors) is the ability to use OPTION+arrow keys to to go left / right to the end of strings, OPTION+SHIFT+arrow keys to highlight entire strings, and OPTION+Backspace to delete an entire strings
Install oh-my-zsh (run the curl command)
Install plugins like zsh-autosuggestions, zsh-syntax-highlighting (basically you clone the repo and then add the plugin to the list of plugins in your ~/.zshrc file
Install powerlevel10k zsh theme - basically clone the repo and modify the ~/.zshrc file to update the ZSH_THEME
You will be prompted to configure powerlevel10k - but my configuration for ~/.p10k.zsh is here
My ~/.zshrc config is here
Make iTerm2 the default terminal: Make iTerm default terminal (^ + Shift + Command + \)

That should be all you need to make your terminal look exactly like mine 😀.

My iTerm terminal

If you’re using the powerlevel10k theme, make sure to set up the font in VS Code’s terminal as well!

You can now back up your ~/.zshrc file and ~/.p10k.zsh files in a dotfiles repository similar to mine by creating symlinks (documentation on how to do this is in my repo also).

VS Code

Terminal

To allow VS Code’s terminal to look similar to the iTerm terminal, there are a few additional things we need. Add/modify these lines to your VS Code settings.json file by opening the command palette (CMD/CTRL + Shift + P) and typing > Preferences: Open Settings (JSON) :

Adding the font configuration, osx shell, and shell to use when using a Linux environment (ie: in Codespaces):

  
{
    "terminal.integrated.shell.osx": "/bin/zsh",
    "terminal.integrated.defaultProfile.linux": "zsh",
    "terminal.integrated.fontFamily": "MesloLGS NF",
}

Now the terminal in VS Code looks nice also!

The terminal looks good in VS Code too!

Pro-tip: Turn on VS Code settings sync!

Extensions

I’ll just highlight some of my favorite extensions that I use in VS Code:

GitHub Copilot - Because of course
Markdown All in One - I love this because I can highlight a piece of text and paste in a link and it will automatically format the markdown for me, similar to this feature in GitHub
Code Spell Checker - to help me from misspelling, and as a bonus if you’re using VS Code settings sync, you can keep a custom dictionary synced across VS Code instances / Codespaces by using the “quick fix” on aka ⌘ + . on unrecognized words and “add to user settings”
YAML - for YAML syntax highlighting in the editor
Bracket Pair Colorizer - I used to use Bracket Pair Colorizer 2, but this is now built-in to VS Code by adding this to your settings: "editor.guides.bracketPairs": true
Draw.io Integration - for creating charts/architecture diagrams directly in VS Code
GitLense - it’s nice to be able to do things such as opening up a Git Blame view inline like you can in GitHub

Key Bindings

Coming from Windows, my brain is wired that CTRL + Z is undo and CTRL + Y is redo. In macOS, undo is ⌘ + Z and redo is ⌘ + SHIFT + Z. I added this key binding to allow for both ⌘ + SHIFT + Z AND ⌘ + Y to be used for redo while editing in VS Code.

You can modify VS Code’s keybindings.json file by opening the command palette (CMD/CTRL + Shift + P) and typing > Preferences: Open Keyboard Shortcuts (JSON):

  
{
    "keybindings": [
        {
            "key": "ctrl+z",
            "command": "undo",
            "when": "editorTextFocus"
        },
        {
            "key": "ctrl+shift+z",
            "command": "redo",
            "when": "editorTextFocus"
        }
    ]
}

Brew

My Brewfile of things that I have installed with Brew is here.

You can install everything in the Brewfile by running:

  
brew bundle install --file=./Brewfile

I was able to generate the Brewfile by running:

brew bundle dump

App Store Apps

These are my must have App Store apps:

Magnet ($$$) - for pinning windows to certain regions of the screen
Copyclip (free) - for clipboard management
- I like to go into preferences and remember and display 2,000 clippings and start at system startup!
Get Plain Text (free) - paste without formatting
- I set my keyboard shortcut to ⌥ ⌘ V as well as launching at startup

Troubleshooting

Question: I’m seeing special characters that aren’t rendering in my terminal?
Answer: Make sure you install the MesloLGS fonts and configure it to be used in iTerm and VS Code. Powerlevel10k uses custom glyphs from the font to render the terminal correctly.

Summary

Before writing this post, I had most of this in OneNote of what to do when I get a new Mac. Most things are automated, but some like the App Store Apps I install, are not. I plan on sharing this with folks who ask how to get started quickly on a new Mac!

Let me know anything I missed or improvements I can make here, or tips for anyone else coming over from the Windows world 🙏