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

1. Install iTerm2: brew install --cask iterm2
2. Install the MesloLGS fonts
3. 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 ⌥ + ← or → arrow keys to to go left / right to the end of strings, Option ⌥ + Shift ⇧ + ← or → arrow keys to highlight entire strings, and Option ⌥ + Delete to delete entire strings
4. Install oh-my-zsh (run the curl command)
5. 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
6. Install powerlevel10k zsh theme - basically clone the repo and modify the ~/.zshrc file to update the ZSH_THEME
7. You will be prompted to configure powerlevel10k - but my configuration for ~/.p10k.zsh is here
8. My ~/.zshrc config is here
9. Make iTerm2 the default terminal: Make iTerm default terminal (Control ^ + 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 Fonts

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):

{
    "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:

1. GitHub Actions - native GitHub Actions YAML syntax and Actions workflow visualization in the IDE
2. GitHub Copilot - because Copilot! 🤖
3. GitHub Copilot Chat - also Copilot! 🤖 💬
4. 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
5. GitHub Markdown Preview - a non-official GitHub extension to make the markdown preview look more like how GitHub renders markdown
6. 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 Cmd ⌘ + . on unrecognized words and “add to user settings”
7. YAML - for YAML syntax highlighting in the editor
8. Draw.io Integration - for creating charts/architecture diagrams directly in VS Code
9. GitLens - among other things, allows the ability to Git Blame view inline like you can in GitHub
10. Git Graph - another option for visualizing Git branches in VS Code
11. Error Lens - to tweak how errors and warnings are shown
12. TODO Highlight - highlights those TODO comments in your code
13. GitHub Theme - make your VS Code look more like GitHub!

Key Bindings

Coming from Windows, my brain is wired that Ctrl + Z is undo and Ctrl + Y is redo. In macOS, undo is Cmd ⌘ + Z and redo is ⌘ + Shift ⇧ + Z. I added this key binding to allow for both Cmd ⌘ + Shift ⇧ + Z AND Cmd ⌘ + 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"
        }
    ]
}

Tabs, Spaces, and Paste Formatting

When editing GitHub Actions workflows, I would get frustrated when it would add 4 spaces for a tab vs. the customary 2 that the UI editor uses by default. Additionally, it would try to format the YAML upon pasting, which would often break the YAML. To fix this, I added the following to my VS Code settings.json file by opening the command palette (Cmd ⌘/Ctrl + Shift ⇧ + P) and typing > Preferences: Open Settings (JSON):

"[yaml]": {
    "editor.tabSize": 2,
    "editor.autoIndent": "none"
}

I set this specifically for YAML files, but you can set it for any file type by updating the header (or removing the header so that all file types use the same settings).

Colorized Bracket Pairs

I used to use Bracket Pair Colorizer 2, but this is now built-in to VS Code by adding this to your VS Code settings.json file by opening the command palette (Cmd ⌘/Ctrl + Shift ⇧ + P) and typing > Preferences: Open Settings (JSON):

"editor.guides.bracketPairs": true

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 --force

brew bundle dump also includes installed VS Code extensions!

App Store Apps

These are my must have App Store apps:

1. Magnet ($) - for pinning windows to certain regions of the screen
2. Copyclip (free) - for clipboard management
   • I like to go into preferences and remember and display 2,000 clippings and start at system startup!
3. Get Plain Text (free) - paste without formatting
   • I set my keyboard shortcut to Option ⌥ + Cmd ⌘ + v as well as launching at startup
4. MeetingBar (free) - to show upcoming meetings in the menu bar
5. Gifski (free) - for creating GIFs from videos
6. Pro Mouse ($) - a better mouse cursor for presentations
7. Homie (free) - for controlling HomeKit devices in the menu bar
8. Bitwarden (free) - password management
9. Netspot: Wifi Analyzer (free) - for scanning WiFi networks and seeing signal strength

System Settings

• Add the sound icon to the menu bar (easily switch sound outputs)
  • System Settings > Control Center > Sound - Always Show in Menu Bar

Keyboard Shortcuts

General Keyboard Shortcuts

These are helpful, out of the box keyboard shortcuts that I often use:

Action	Shortcut
Hide the windows of the front app	Cmd ⌘ + h
Minimize the front window to the dock	Cmd ⌘ + m
Hide all but current app	Option ⌥ + Cmd ⌘ + h
Use the app in full screen / exit full screen	Control ^ + Cmd ⌘ + f
Maximize an app (not full screen) / put back	Option ⌥ + click maximize button
Find again (when using Cmd ⌘ f)	Cmd ⌘ + g
Quit app	Cmd ⌘ + q
Force quit an app	Option ⌥ + Cmd ⌘ + esc
Screenshot the entire screen	Cmd ⌘ + Shift ⇧ + 3
Screenshot a selection using a picker	Cmd ⌘ + Shift ⇧ + 4
Screenshot or record a selection	Cmd ⌘ + Shift ⇧ + 5
Screenshot the touch bar (RIP)	Cmd ⌘ + Shift ⇧ + 6
Screenshot entire window	Space bar when in screenshot mode
Switch between open apps	Cmd ⌘ + tab
Switch between multiple windows of app	Cmd ⌘ + ` (backtick key)
Quit app when switching between apps	When in the Cmd ⌘ + tab interface, press q
See all apps	F3 (may need fn + F3)
See desktop	Cmd ⌘ + F3 (may need fn + Cmd ⌘ + F3)
Switch between desktops/maximized apps	Control ^ + ← or → arrow keys
Spotlight Search	Cmd ⌘ + Space bar
Re-order menu bar icons	Hold Cmd ⌘ and drag
Refresh page (in browser)	Cmd ⌘ + r
View history (in browser)	Cmd ⌘ + y

Finder Keyboard Shortcuts

Action	Shortcut
Delete a file	Cmd ⌘ + delete
Rename a file	return
Show/hide hidden files	Cmd ⌘ + Shift ⇧ + .
Cut (move) file	Copy normally, then Option ⌥ + Cmd ⌘ + v
Open a file / folder	Cmd ⌘ + o or Cmd ⌘ + ↓ arrow key
Enter folder	Cmd ⌘ + ↓ arrow key
Leave folder	Cmd ⌘ + ↑ arrow key
Rename file/folder	return

Text Editing Keyboard Shortcuts

Action	Shortcut
Delete whole line	Cmd ⌘ + delete
Delete just the last word	Option ⌥ + delete
Go to the beginning of the line	Control ^ + a
Go to the end of the line	Control ^ + e
Highlight just one word	Shift ⇧ + Option ⌥ + ← or → arrow keys
Highlight the entire line	Shift ⇧ + Cmd ⌘ + ← or → arrow keys
Jump to bottom of document	Cmd ⌘ + ↓ arrow key
Jump to top of document	Cmd ⌘ + ↑ arrow key
Highlight text vertically	Shift ⇧ + Option ⌥ + select with mouse

Other Tips

• Open a new Finder window from the current directory in Terminal: open .
• Update the modified time of a file: touch -mt202303261924 ./file-to-update.xyz
• Terminate all instances of a process: killall Finder (case sensitive)
• Open file in application: drag the file over the app (e.g. VS Code) in the dock to open
• Output the URL and title of each tab in all open Chrome windows:

    osascript -e{'set o to""','tell app"google chrome"','repeat with t in tabs of windows','set o to o&url of t&" "&title of t&linefeed',end,end}|sed \$d
  

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 🙏