How I setup my Development Environment on macOS 2022 Edition

Current Software Developer Technical Stack 2022

Front-End: HTML, CSS, JavaScript, TypeScript, React, React Native, Redux

Back-End: Python, NodeJS, C#, SQL, NoSQL, Docker

Transfer Files

I always prefer to do a clean install when setting up a new computer. Either use a cloud backup solution to restore your data or use an external storage device to transfer your files to your new computer.

Install Web Browsers

• Brave
• Google Chrome
• Google Chrome Canary
• Firefox
• Firefox Developer Edition
• Firefox Nightly
• Microsoft Edge
• Safari Technology Preview
• Tor Browser

Install Web Browser Extensions (chromium)

• Bitwarden
• ColorZilla
• daily.dev
• JSON Viewer
• Lighthouse
• Momentum
• React Developer Tools
• Redux DevTools
• Pocket
• uBlock Origin
• Video DownlodHelper
• Wappalyzer
• Web Developer

Install Software

I would install all of the apps that I use this includes personal and developer related. I will just include the developer apps as they are more relevant in this guide.

• Adobe CC
• Android Studio
• Bitwarden
• Centered
• Cypress
• Discord
• Docker
• Figma
• Hyper
• iTerm 2
• Microsoft Office
• Microsoft Teams
• MongoDB Compass
• Notion
• Obsidian
• PyCharm
• Slack
• Todoist
• Trello
• Valentina Studio
• Visual Studio
• Visual Studio Code
• Xcode
• Zoom

Install Package Managers

• Hombrew
• npm
• Pip

Hombrew

https://brew.sh/

M1 Macs
Before installing Homebrew you will need to install the Rosetta2 emulator for the new ARM silicon (M1 chip). Install Rosetta2 using the terminal:

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

After installing Rosetta2 using the code above you can then use the Homebrew cmd and install Homebrew for ARM M1 chip.

arch -x86_64 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once Homebrew for M1 ARM is installed use this Homebrew command to install packages:

arch -x86_64 brew install <package>

Install Packages

• Hombrew automatically installs Pip pointing to the Homebrew’d Python 3 for you.

Use brew to install the below packages

brew install tree (It allows you to view all files in a tree view)
brew install ruby
brew install git
brew install python
brew install kotlin
brew install postgresql
brew install yarn --without-node
brew tap heroku/brew && brew install heroku
brew install deno
brew install watchman

Install oh-my-zsh

ZSH is already preinstalled in the latest versions of macOS. I also install https://ohmyz.sh/ as it allows for more configuration and is required in some cases.

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Use the command line to show all hidden files as the files you are searching for are going to be hidden by default.

defaults write com.apple.Finder AppleShowAllFiles true
killall Finder

Install the Oh My Zsh plugins below

brew install zsh-autosuggestions
brew install zsh-syntax-highlighting

To activate the plugins, add the following at the end of your .zshrc:

source /usr/local/share/zsh-autosuggestions/zsh-autosuggestions.zsh
source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

You will also need to force reload of your .zshrc:

source ~/.zshrc

If you receive "highlighters directory not found" error message, you may need to add the following to your .zshenv:

export ZSH_HIGHLIGHT_HIGHLIGHTERS_DIR=/usr/local/share/zsh-syntax-highlighting/highlighters

MongoDB Install and Setup

https://stackoverflow.com/questions/57856809/installing-mongodb-with-homebrew

1) Install the Xcode command-line tools and the Homebrew one from https://brew.sh/#install

xcode-select --install

2) Tap the MongoDB Homebrew Tap:

brew tap mongodb/brew

3) Verify installation prerequisites in the macOS Terminal:

brew tap | grep mongodb

4) install MongoDB

brew install mongodb-community@4.4

5) Finally to run MongoDB (i.e. the mongod process) as a macOS service, issue the following

brew services start mongodb-community@4.4

6) Download and install MongoDB Compass https://www.mongodb.com/try/download/compass

Use the command brew list to see all installed packages.

npm

Install node via nvm because nvm lets you quickly install and use different versions of node via the command line.

https://github.com/nvm-sh/nvm

Install Packages Globally

npm i -g @aws-amplify/cli
npm i -g @sanity/cli
npm i -g babel-cli
npm i -g eslint
npm i -g expo-cli
npm i -g firebase-tools
npm i -g gatsby-cli
npm i -g jest
npm i -g lighthouse
npm i -g netlify-cli
npm i -g newman
npm i -g node-sass
npm i -g parcel-bundler
npm i -g pm2
npm i -g prettier
npm i -g serve
npm i -g spaceship-prompt
npm i -g surge
npm i -g typescript
npm i -g update
npm i -g vercel
npm i -g yarn

Use the command npm list -g --depth 0 to see all installed packages.

Pip

Install Packages

Use the command pip or pip3 to install depending on your system.

pip3 install astroid
pip3 install autopep8
pip3 install certifi
pip3 install chardet2
pip3 install click
pip3 install Flask
pip3 install Flask-Cors
pip3 install harperdb
pip3 install idna
pip3 install isort
pip3 install itsdangerous
pip3 install Jinja
pip3 install lazy-object-proxy
pip3 install MarkupSafe
pip3 install mccabe
pip3 install psycopg2
pip3 install psycopg2-binary
pip3 install pycodestyle
pip3 install pylint
pip3 install python-dotenv
pip3 install requests
pip3 install setuptools
pip3 install six
pip3 install toml
pip3 install urllib3
pip3 install Werkzeug
pip3 install wrapt

Use the command pip3 list or pip list to see all installed packages

Updating Python Packages

Pip can be used to upgrade all packages:

1) Output a list of installed packages into a requirements file (requirements.txt):

pip freeze > requirements.txt

2) Edit requirements.txt, and replace all == with >= Use the ‘Replace All’ command in the editor.
3) Upgrade all outdated packages:

pip install -r requirements.txt --upgrade

React Native Setup

https://expo.io/

Setup BASH Application, Code Editors and IDE

I am currently using the dracula theme in Visual Studio Code, Visual Studio, Android Studio, PyCharm and both Hyper and iTerm 2.

Typeface

For typefaces I am using Jebrains Mono.

https://www.jetbrains.com/lp/mono/

Hyper Terminal

Install Plugins and customize

hyper i hypercwd
hyper i hyper-snazzy
hyper i hyper-dracula

// default font size in pixels for all tabs
    fontSize: 16,

// font family with optional fallbacks
    fontFamily: 'JetBrains Mono, Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

Visual Studio

Download and install the latest version of NET, including ASP.NET Core.

Visual Studio Code

If it is your first time using Visual Studio Code then do a clean install and configure it however you want. Otherwise use the built in Settings Sync feature to sync the settings from your previous setup.

Visual Studio Code Extensions I use

I currently have 41 extensions installed.

Beautify css/sass/scss/less
Better Comments
C#
colorize
Data Workspace
Docker
DotENV
Dracula Official
EJS language support
ES7+ React/Redux/React-Native snippets
ESLint
Excel Viewer
GitHub Pull Requests and Issues
GitLens — Git supercharged
HTMLHint
Import Cost
Jest
Jupyter
Jupyter Keymap
Jupyter Notebook Renderers
Live Server
markdownlint
Material Icon Theme
MDX
MongoDB for VS Code
npm
npm Intellisense
open in browser
Prettier - Code formatter
Project Manager
Pylance
Python
Rainbow CSV
Remote - Containers
Shades of Purple
SQL Database Projects
SQL Server (mssql)
SVG
Thunder Client
TSLint
vscode-styled-components