b4nn3r / mac-setup

🛠️ Front end web development setup for macOS.

Mac Setup

Front End Web Development Setup for macOS

This document describes how I set up Full Stack development environment on my MacBook Pro with macOS Mojave 10.15.

---

Table of Contents

• Installation
• System Preferences
• Terminal
• Bash
• Homebrew
• Git
• Node.js
• Node Package Manager
• Web Browsers
• Visual Studio Code

---

Installation

You can follow the instructions below or use shell script to configure settings automatically. If you decided on the second option there are two ways:

• clone/download the repository into your computer and execute install.sh from repo root directory:

$ cd mac-setup
$ ls
Brewfile               README.md              settings.json          spectacle.json
Flat.terminal          script                 snippets.code-snippets
$ bash script/install.sh

• one line installation - open your terminal and paste the following code:

$ curl -L https://github.com/B4nn3R/mac-setup/archive/master.tar.gz | tar -xvz; cd mac-setup-master; chmod +x script/install.sh; script/install.sh

---

System Preferences

After clean install of operating system there are a couple of tweaks I like to make to the System Preferences. Some of them are not strictly related to web development environment - I use them because of my personal habits.

• General > User dark menu bar and Dock
• General > Ask to keep changes when closing documents
• General > Close windows when quitting an app
• Dock > Automatically hide and show the Dock
• Keyboard > Key Repeat > Fast (all the way to the right)
• Keyboard > Delay Until Repeat > Short (all the way to the right)

Much more settings can be configured by macOS defaults - command line utility that manipulates system configuration files. The system stores user preferences in a .plist files located in ~/Library/Preferences directory.

Set Dock Size

In my opinion, the best size of the dock is 35. Remember that this is due to the size and resolution of my MacBook screen.

$ defaults write com.apple.dock tilesize -int 35; killall Dock

Disable "Press and hold"

"Press and Hold" function is used to create accents or diacritical marks. I don't need it, so I turn it off. You can always turn it on back by changing false to true.

$ defaults write NSGlobalDomain ApplePressAndHoldEnabled -bool false

Reset Icons in Launchpad

I usually use this command after installing every application that I need - it keeps Apple applications on the first page and moves the rest to the next pages.

$ defaults write com.apple.dock ResetLaunchPad -bool true; killall Dock

Show Hidden Files

This can also be done by pressing Command ⌘ + Shift ⇧ + ..

$ defaults write com.apple.finder AppleShowAllFiles YES

Show Path Bar in Finder

$ defaults write com.apple.finder ShowPathbar -bool true

Show Status Bar in Finder

$ defaults write com.apple.finder ShowStatusBar -bool true

Set Firmware Password

Setting a firmware password prevents your Mac from starting up from any device other than your startup disk. It may also be set to be required on each boot.

$ firmwarepasswd -setpasswd -setmode command

You can find a lot more settings in defaults.sh.

---

Terminal

I use my custom Terminal profile which I called Flat. You can download it by typing:

$ curl -O https://raw.githubusercontent.com/B4nn3R/mac-setup/master/Flat.terminal

To use it as default profile, open downloaded Flat.terminal file and click Shell > Use settings as default option.

---

Bash

# Update Homebrew itself, upgrade all packages, remove dead symlinks, remove old versions
# of installed formulas, clean old downloads from cache, remove versions of formulas, which
# are downloaded, but not installed, check system for potential problems
alias brewup='brew update; brew upgrade; brew prune; brew cleanup; brew doctor'

# Easier navigation
alias ..="cd .."
alias ....="cd ../.."

# Shortcuts
alias p="cd ~/Projects"
alias d="cd ~/Desktop"

# Configure ls command
export CLICOLOR=1 # Enable ANSI colors sequences to distinguish file types
export LSCOLORS=GxFxCxDxBxegedabagaced # Value of this variable describes what color to use for which file type

# Color definitions (used in prompt)
RED='\[\033[1;31m\]'
GREEN='\[\033[1;32m\]'
YELLOW='\[\033[1;33m\]'
PURPLE='\[\033[1;35m\]'
GRAY='\[\033[1;30m\]'
DEFAULT='\[\033[0m\]'

# Function which prints current Git branch name (used in prompt)
parse_git_branch() {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

# Configure prompt
PS1="${RED}\u" # Username
PS1+=" ${GRAY}• " # Separator
PS1+="${GREEN}\h" # Hostname
PS1+=" ${GRAY}• " # Separator
PS1+="${YELLOW}\w" # Working directory
PS1+=" ${GRAY}\$([[ -n \$(git branch 2> /dev/null) ]] && echo \"•\") " # Separator (if there is a Git repository)
PS1+="${PURPLE}\$(parse_git_branch)" # Git branch
PS1+="\n" # New line
PS1+="${GRAY}\$ " # Dollar sign
PS1+="${DEFAULT}" # Get back default color

export PS1;

When bash is invoked it looks for ~/.bash_profile, reads it and executes commands from it. In my .bash_profile file I create, among others, a brewup alias (keyboard shortcut to avoiding typing a long command sequence) to keep Homebrew (which we are going to install in a second) up to date. I also set color scheme for ls command output and configure custom prompt which contains username, computer name, working directory and current Git branch.

To download my .bash_profile and execute its content use:

$ cd ~
$ curl -O https://raw.githubusercontent.com/B4nn3R/mac-setup/master/.bash_profile
$ source ~/.bash_profile

---

Homebrew

Homebrew package manager allows to install almost any application right from the command line.

Installation

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Usage

To install Homebrew package use brew install <package>:

$ brew install <package name>

To install GUI macOS applications use Homebrew Cask:

$ brew cask install <application name>

Brewfile

Installing each application and package separately may take some time. Homebrew Bundle allows to automatically install everything listed in the Brewfile file.

Here are all applications I usually install with a brief description.

• Git - version control system
• mas-cli - Mac App Store command line interface
• AppCleaner - apps uninstaller
• Background Music - audio utility
• Cyberduck - FTP client
• draw.io - diagramming tool
• Firefox - web browser
• Flux - screen color temperature adjusting app
• Fork - Git GUI client
• Google Chrome - web browser
• GPG Suite - communication and files encryption tools
• KeepingYouAwake - app which prevents Mac from entering sleep mode
• Keka - file archiver
• MAMP - Apache, MySQL and PHP package
• Opera - web browser
• Postman - API testing tool
• Sequel Pro - MySQL GUI tool
• Skype - voice and video chat
• Slack - team collaboration tools
• Spectacle - window manager
• Transmission - BitTorrent client
• Tunnelblick - GUI for OpenVPN
• Visual Studio Code - code editor
• VLC - media player
• iMovie - video editor
• Numbers - spreadsheet editor
• Pages - text editor
• Xcode - IDE for developing software for Apple products

Below are the entire contents of my Brewfile.

# Install Git and mas-cli via Homebrew
brew 'git' 
brew 'mas'

# Install applications via Homebrew Cask
cask 'appcleaner'
cask 'background-music'
cask 'cyberduck'
cask 'drawio'
cask 'firefox'
cask 'flux'
cask 'fork'
cask 'google-chrome'
cask 'gpg-suite'
cask 'keepingyouawake'
cask 'keka'
cask 'mamp'
cask 'opera'
cask 'postman'
cask 'sequel-pro'
cask 'skype'
cask 'slack'
cask 'spectacle'
cask 'transmission'
cask 'tunnelblick'
cask 'visual-studio-code'
cask 'vlc'

# Install applications from App Store via mas-cli
mas "iMovie", id: 408981434
mas "Numbers", id: 409203825
mas "Pages", id: 409201541
mas "Xcode", id: 497799835

To check App Store application ID you must install mas-cli first. Then use:

$ mas search <app name>

My Brewfile file can be downloaded using:

$ curl -O https://raw.githubusercontent.com/B4nn3R/mac-setup/master/Brewfile

To install listed applications type:

$ brew bundle

in directory that contains Brewfile.

---

Git

You can set Git global configuration two ways. The first is to run a bunch of commands which will update the Git configuration file, e.g.

$ git config --global user.name "First Last"
$ git config --global user.email "[email protected]"

The other and faster way is creating the Git configuration file (~/.gitconfig) and input it all ourselves.

$ cd ~
$ curl -O https://raw.githubusercontent.com/B4nn3R/mac-setup/master/.gitconfig
$ open .gitconfig

[user]
  name = First Last
  email = [email protected]
[core]
  editor = editor
[credential]
  helper = osxkeychain

Here I set my name, email, core editor and connect Git to the macOS Keychain so I don’t have to type my username and password every time I want to push to GitHub.

SSH

You can also authenticate with GiHub using SSH key. To generate it use following code:

$ ssh-keygen -t rsa -b 4096 -C "[email protected]"

Above command will create a private key (id_rsa) and public key (id_rsa.pub) in ~/.ssh directory. Next, add your newly created SSH key to the ssh-agent to be able to manage your keys.

$ ssh-add <path to private key>

Now just login into your Github account and paste content of id_rsa.pub file in Settings > SSH and GPG keys > New SSH key.

After you've set up your SSH key and added it to your GitHub account, you can test your connection. Open terminal and paste following code:

$ ssh -T [email protected]

After verifying fingerprint by typing yes you should see the following message:

Hi <your username>! You've successfully authenticated, but GitHub does not provide shell access.

---

Node.js

For installation of Node.js I like to use Node Version Manager (nvm). To download it type:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

You can check all available Node.js versions by typing:

$ nvm list-remote

To install specific version type:

$ nvm install <version>

---

Node Package Manager

Packages which I use globally at the moment are:

• gulp-cli
• jest
• live-server
• create-react-app

To install them use:

$ npm install -g gulp-cli jest live-server create-react-app

---

Web Browsers

Currently, I have installed all major web browsers:

• Chrome
• Safari
• Opera
• Firefox

For main development I use Google Chrome.

Chrome Extensions

• uBlock Origin - block ads
• Privacy Badger - block spying ads and invisible trackers
• Nano Defender - anti-adblock defuser
• HTTPS Everywhere - automatically switch from "http" to "https"
• JSONView - validate and view JSON documents
• React Developer Tools - inspect component hierarchies and states
• Redux DevTools - inspect and debug state changes
• Pesticide - toggle different colored outlines on every element for quick CSS layout debug

---

Visual Studio Code

All default settings changes are stored in settings.json file located in /Users/<your username>/Library/Application Support/Code/User. You can open it by pressing Command ⌘ + Shift ⇧ + p and choosing Preferences: Open Settings (JSON). Here are my settings.json contents:

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "Monokai",
  "workbench.activityBar.visible": false,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.statusBar.feedback.visible": false,
  "workbench.list.openMode": "doubleClick",
  "workbench.tips.enabled": false,
  "editor.fontSize": 12,
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.formatOnPaste": true,
  "editor.detectIndentation": false,
  "editor.dragAndDrop": false,
  "editor.snippetSuggestions": "top",
  "problems.decorations.enabled": false,
  "explorer.openEditors.visible": 0,
  "explorer.decorations.colors": false,
  "extensions.showRecommendationsOnlyOnDemand": true,
  "extensions.ignoreRecommendations": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/node_modules/": true,
    "**/.localized": true
  },
  "html.autoClosingTags": false,
  "material-icon-theme.folders.theme": "classic",
  "material-icon-theme.hidesExplorerArrows": true,
  "material-icon-theme.folders.color": "#90a4ae",
  "material-icon-theme.opacity": 0.8,
  "eslint.autoFixOnSave": true,
  "npm.enableScriptExplorer": true,
  "bracketPairColorizer.activeScopeCSS": [
    "borderColor : {color}; opacity: 0.5",
    "backgroundColor : {color}"
  ],
  "bracketPairColorizer.highlightActiveScope": true,
  "colorize.languages": [
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "javascript",
    "javascriptreact"
  ],
  "colorize.colorized_variables": [
    "CSS",
    "SASS"
  ],
}

You can copy and paste them or just download whole file by typing:

$ cd /Users/<your username>/Library/Application Support/Code/User
$ curl -O https://raw.githubusercontent.com/B4nn3R/mac-setup/master/settings.json

Extensions

• Auto Rename Tag - automatically rename paired HTML tag
• Better Comments - create more human-friendly comments by highlighting annotations within code
• Bracket Pair Colorizer - match brackets to be identified with colours
• colorize - visualize CSS colors in CSS/Sass/Less/PostCSS/Stylus/XML files (works also with variables)
• Debugger for Chrome - debug JavaScript code running in Google Chrome from VS Code
• ESLint - integrate ESLint into VS Code
• Material Icon Theme - icons based on Material Design
• npm Intellisense - autocomplete npm modules in import statements
• open in browser - open any file in browser right from VS Code explorer
• Path Intellisense - autocomplete filenames
• Project Manager - manage projects right inside VS Code
• SCSS IntelliSense - autocomplete variables, mixins, functions etc.

To install all extensions by one command use:

$ code --install-extension CoenraadS.bracket-pair-colorizer --install-extension PKief.material-icon-theme --install-extension alefragnani.project-manager --install-extension christian-kohler.path-intellisense --install-extension dbaeumer.vscode-eslint --install-extension formulahendry.auto-rename-tag --install-extension mrmlnc.vscode-scss --install-extension msjsdiag.debugger-for-chrome --install-extension techer.open-in-browser --install-extension aaron-bond.better-comments --install-extension kamikillerto.vscode-colorize --install-extension christian-kohler.npm-intellisense

Snippets

I use my own global snippets instead of installing snippets extensions. User custom global snippets are located in /Users/<your username>/Library/Application Support/Code/User/snippets as files with code-snippets extension. You can easily create or edit them by going to Code > Preferences > User Snippets.

You can find all my snippets in snippets.code-snippets.