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 theiterm2-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
- In iTerm, go to: Preferences > Profile, you can use the
- 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 theZSH_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 😀.
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):
1
2
3
4
5
{
"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)
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"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:
1
brew bundle install --file=./Brewfile
I was able to generate the Brewfile
by running:
1
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
- I set my keyboard shortcut to
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 🙏