Javascript Developer Setup for Mac

JS_DEV_SETUP.md

Javascript Developer Setup for Mac

This guide is for those who want to prepare their Mac for javascript developement, I attached here some apps that will surely help you and recommendations that are sure to make your life easier.

Specially thanks to my colleagues at wix.com for bring up most of those ideas

TOC

• Mandatory
• Recommended
• Production Permissions
• Accounts
• Optional

Mandatory

description	command
Xcode command-line tools	xcode-select --install
brew - mac missing package manager	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Warp is the best replacement for macOS built-in Terminal	brew install --cask warp
Install zshell - A better shell	brew install zsh
Install oh-my-zsh - A framework for managing your zsh configuration	sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
Upgrade to latest git	brew install git
Firefox	brew install firefox --cask
VSCode - A lightweight code editor	brew install visual-studio-code --cask
fnm - helps you easily switch between multiple node versions	curl -fsSL https://fnm.vercel.app/install | bash
Latest LTS version of Node	fnm install lts/fermium
Watchman for watching files using Jest test runner	brew install watchman
GnuPG - Signing up commits for GitHub	brew install gnupg
Slack	brew install slack --cask
GitHub CLI	brew install gh --cast
Raycast (Better spotlight)	https://www.raycast.com/
mdview (See markdown files in the terminal)	curl -fsSL https://raw.githubusercontent.com/tzachbon/mdview/main/install.sh | sh

Recommended

git config

git will present the following warning if a pull.rebase strategy isn't specified:

warning: Pulling without specifying how to reconcile divergent branches is
discouraged. You can squelch this message by running one of the following
commands sometime before your next pull:

  git config pull.rebase false  # merge (the default strategy)
  git config pull.rebase true   # rebase
  git config pull.ff only       # fast-forward only
  git config --global remote.pushDefault origin # Always fetch latest origin

We recommend running:

git config --global pull.ff only
git config --global pull.rebase true

git will present the following warning on your first git push provided that you forgot to set an upstream

🤷‍♀️ Confused?! You're not alone with that feeling. Check out this StackOverflow Answer

fatal: The current branch <BRANCH_NAME> has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin <BRANCH_NAME>

Set your git to use current branch by default running (no more annoying upstream message):

git config --global push.default current

Git is not case-sensitive by default, which causes problems when trying to rename files without git mv, configure it so it won't happen to you:

git config --global core.ignorecase true

The command configures Git to automatically convert CRLF line endings to LF on commit, helping avoid line ending issues when collaborating across different operating systems.

git config --global core.autocrlf input

In WSL you want to do the following:

git config --global --get core.filemode

• tells Git to ignore executable-bit changes
• prevents WSL / mounted filesystem permission noise from showing up as modified files

Common git aliases

git config --global alias.aac '!git add . && git commit'
git config --global alias.addc '!git add -A && git commit'
git config --global alias.reset-one '!git reset HEAD~1'
git config --global alias.ac '!git add -A && git commit'
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.set-upstream '!git branch --set-upstream-to=origin/$(git symbolic-ref --short HEAD)'
git config --global alias.h 'log --color --graph --pretty=format:"%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset" --abbrev-commit --'
git config --global alias.cob '!f() { git checkout -b "$1" && git push -u origin "$1"; }; f'

And a nice final touch, you can make git to autocorrect your aliases with this command:

git config --global help.autocorrect 20
git config --global branch.autosetuprebase always
git config --global branch.autosetupmerge always

Accounts

• GitHub - Create an account in GitHub if you don't have one and include your Full name, email and Profile image in account settings

  • Add ssh keys in GitHub as described here
  • Add GPG key in GitHub as described here
  • Config your user name and email with the follow lines:

    git config --global user.name "YOUR-USER-NAME"
    git config --global user.email "YOUR-EMAIL"

  • Sign your commits using this guide - Signing commits

Optional

• VSCode users, install the code command in path
• Optional IDEs:
  • WebStorm - brew install webstorm --cask
  • Cursor
• Recommended Chrome extensions:
  • React Developer Tools
  • AngularJS Batarang
  • Edit This Cookie
  • OctoLinker
  • Octotree
  • Refined GitHub Browser extension that simplifies the GitHub interface and adds useful features - extension highlights
  • GitHub Pull Request Tree - Make GitHub Pull Requests better with a file tree view and other UX improvements
• Robo 3T - to access mongo DB.
• Sequel Pro - to access MySQL DB.
• Mobile Slack App
• Z - A zsh plugin that Tracks your most used directories, based on "frecency", in order to move fast between directories using only a part of the directory name.
• Increase the speed of your keyboard.
• Rectangle - Maximize, minimize and move your windows with keyboard shortcuts. It's lightweight and no license required!
• Github for Mac
• Optional environment setup guide for your convenience can be found here