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)"
Then use brew cask to install some recommended apps:
- Iterm2 for a better terminal
brew cask install iterm2
- Rectangle for window management ( I use the spectacle settings )
brew cask install rectangle
- 1Password for password management
brew cask install 1password
- VSCode as an editor
brew cask install visual-studio-code
- Atom as another editor
brew cask install atom
- Kap for screen recording (I used it for creating the gif below)
brew cask install kap
Make your terminal pretty
- Install Oh My Zsh
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, 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
brew install zsh-autosuggestions
- Setup ZSH Syntax highlighting
brew install zsh-syntax-highlighting
- Remember to use the included iTerm2 history-autocomplete:
cmd + ;
- Improve iTerm window looks
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 (The one I use in the gif)
brew tap homebrew/cask-fonts
brew cask install font-hack-nerd-font
brew untap homebrew/cask-fonts
- Other worthy mention fonts:
- Fira Code
- Source Code Pro
- Cascadia
- 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. 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
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
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
Then install the latest stable ruby:
ruby-install ruby
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
VSCode Setup
After installing VSCode, let's go from the bloated default:
Open your settings (cmd + ,
) and add Fira Code
as your code font, or other preferred font:
Then on settings, search for ligatures, click on edit settings.json, and change the ligatures line to:
"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:
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:
[
// 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
Discussion
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.