How I setup my Development Environment on macOS 2021 Edition

Current Full-Stack Developer Technical Stack 2021

Front-End: HTML, CSS, JavaScript, Typescript, React, React Native, Redux, Flutter/Dart

Back-End: Python, NodeJS, SQL, NoSQL, Kotlin

Transfer Files

Use an external Hard Drive or USB to transfer your files to your new computer. In my case I transfer files in the, Documents, Movies, Pictures and Downloads folders.

Install Web Browsers

Google Chrome

Google Chrome Canary

Firefox

Firefox Developer Edition

Firefox Nightly

Safari Technology Preview

Tor Browser

Install Web Browser Extensions (chrome)

Adblock Plus

Apollo Client Developer Tools

ColorZilla

Honey

JSON Viewer

LastPass

Lighthouse

Momentum

React Developer Tools

Redux DevTools

Pocket

Video DownlodHelper

Wappalyzer

Web Developer

daily.dev

Install Software

I would install all of the apps that I use this includes personal and developer related. So tools like Adobe CC, Microsoft Office, Discord, Slack etc.... I will just include the developer apps as they are more relevant in this guide.

Developer Apps

Android Studio

Docker

Hyper

Insomnia

IntelliJ IDEA CE

iTerm 2

MongoDB Compass

Postman

Valentina Studio

Visual Studio Code

Xcode

Install Package Managers

• Hombrew
• npm
• Pip

Hombrew

https://brew.sh/

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

Install Packages

• Hombrew automatically installs Pip pointing to the Homebrewd Python 3 for you

You can install Yarn through the Homebrew package manager. This will also install Node.js if it is not already installed. If you use nvm or similar you should exclude installing Node.js so that nvms version of Node.js is used.

Use brew to install the below packages

brew install tree (It allows you to view all files in a tree view)brew install rubybrew install gitbrew install nodebrew install pythonbrew install kotlinbrew install postgresqlbrew install yarn or brew install yarn --without-nodebrew tap heroku/brew && brew install herokubrew install graphql-playgroundbrew install deno

Install oh-my-zsh

ZSH is already preinstalled in the latest versions of macOS. Catalina onwards I believe. 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 truekillall Finder

Install the Oh My Zsh plugins below

brew install zsh-autosuggestionsbrew 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.zshsource /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 from https://brew.sh/#install

xcode-select --install

1. Tap the MongoDB Homebrew Tap:

brew tap mongodb/brew

1. Verify installation prerequisites in the macOS Terminal:

brew tap | grep mongodb

1. install MongoDB

brew install [email protected]

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

brew services start [email protected]

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

Use the command brew list to see all installed packages

npm

Install Packages Globally

npm i -g babel-clinpm i -g eslintnpm i -g expo-clinpm i -g firebase-toolsnpm i -g gatsby-clinpm i -g jestnpm i -g lighthousenpm i -g netlify-clinpm i -g newmannpm i -g node-sassnpm i -g parcel-bundlernpm i -g pm2npm i -g prettiernpm i -g servenpm i -g spaceship-promptnpm i -g surgenpm i -g typescriptnpm i -g updatenpm i -g vercel

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 astroidpip3 install autopep8pip3 install certifipip3 install chardet2pip3 install clickpip3 install Flaskpip3 install Flask-Corspip3 install harperdbpip3 install idnapip3 install isortpip3 install itsdangerouspip3 install Jinjapip3 install lazy-object-proxypip3 install MarkupSafepip3 install mccabepip3 install psycopg2pip3 install psycopg2-binarypip3 install pycodestylepip3 install pylintpip3 install python-dotenvpip3 install requestspip3 install setuptoolspip3 install sixpip3 install tomlpip3 install urllib3pip3 install Werkzeugpip3 install wrapt

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

Flutter Setup

https://flutter.dev/docs/get-started/install/macos

Also install the Flutter/Dart and Kotlin plugins and extensions for Visual Studio Code, IntelliJ IDEA CE, and Android Studio.

React Native Setup

https://expo.io/

Setup Terminal App and Code Editors

I am currently using the dracula theme in Visual Studio Code, IntelliJ IDEA CE, Android Studio and the Hyper Terminal.

Typeface

For typefaces I am using Jebrains Mono and FiraCode is currently my second choice.

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

https://github.com/tonsky/FiraCode

Hyper Terminal

Install Plugins and customize

hyper i hypercwdhyper i hyper-snazzyhyper 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 Code

If it is your first time using Visual Studio Code then do a clean install and configure it whicever way you want. Otherwise install the Settings Sync extension by Shan Khan and then do a download to sync your settings.

# UploadSHIFT + OPTION + U# DownloadSHIFT + OPTION + D 

As of January 2021 Visual Studio Code has a Settings Sync Feature which probably works the same but is in Early Release.

Set Visual Studio Code as the default editor for programming files by right clicking on that file, and going to "Open with" then change all.

Configure Visual Studio Code so that you can Launch from the command line

Extensions I have installed with Visual Studio Code

better-comments

bracket-pair-colorizer

code-beautifier

code-settings-sync

dart-code

debugger-for-chrome

dotenv

es7-react-js-snippets

flutter

gc-excelviewer

gitlens

graphql-for-vscode

HTMLHint

javascript-ejs-support

jupyter

Kotlin

LiveServer

material-icon-theme

mdx

mongodb-vscode

mssql

night-owl

npm-intellisense

open-in-browser

prettier-vscode

project-manager

python

quokka-vscode

rainbow-csv

remote-containers

shades-of-purple

theme-dracula

vsc-community-material-theme

vsc-material-theme

vsc-material-theme-icons

vscode-color

vscode-colorize

vscode-docker

vscode-eslint

vscode-graphql

vscode-import-cost

vscode-jest

vscode-markdownlint

vscode-npm-script

vscode-peacock

vscode-pull-request-github

vscode-styled-components

vscode-typescript-tslint-plugin