/mac-setup

🛠️ Front end web development setup for macOS.

Primary LanguageShell

Mac Setup

Front End Web Development Setup for macOS

Stars Last Commit


This document describes how I set up front end web development environment on my MacBook Air with macOS Mojave 10.14.3.

Table of Contents

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 the repository 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 enter the following code:
$ curl -L https://github.com/appalaszynski/mac-setup/archive/master.tar.gz | tar -xvz; cd mac-setup-master; chmod +x script/install.sh; script/install.sh

System Preferences

After a clean install of the 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 > Appearance > Dark
  • 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 via 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 back on 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/appalaszynski/mac-setup/master/Flat.terminal

To use it as the 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 cask upgrade; 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 the 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:

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

Homebrew

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

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

Now, to install Homebrew package you can use use brew install <package>, for example:

$ brew install git

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.

Below are the entire contents of my Brewfile.

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

# Install applications via Homebrew Cask
cask 'appcleaner'
cask 'background-music'
cask 'cyberduck'
cask 'drawio'
cask 'firefox'
cask 'flux'
cask 'google-chrome'
cask 'gpg-suite'
cask 'keepingyouawake'
cask 'keka'
cask 'mamp'
cask 'opera'
cask 'postman'
cask 'sequel-pro'
cask 'skype'
cask 'slack'
cask 'sourcetree'
cask 'spectacle'
cask 'spotify'
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 mac search <app name>, for example:

$ mas search pages

My Brewfile file can be downloaded using:

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

To install listed applications type:

$ brew bundle

in a 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@email.com"

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

$ cd ~
$ curl -O https://raw.githubusercontent.com/appalaszynski/mac-setup/master/.gitconfig
$ open .gitconfig
[user]
  name = First Last
  email = email@email.com
[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:

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

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 enter the following code:

$ ssh -T git@github.com

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 the Node.js I like to use Node Version Manager:

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

Now, you can list all available Node.js versions:

$ nvm list-remote

To install specific Node.js version:

$ nvm install <version>

Node Package Manager

Packages which I use globally at the moment are:

To install npm packages globally use npm install with -g flag:

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

Web Browsers

I have installed all major web browsers:

For development I use Chrome. To see how your site renders on Microsoft browsers like Edge or Internet Explorer you can use Microsoft Developer Tools to generate screenshots for each of them.

Chrome Extensions

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,
  "workbench.enableExperiments": false,
  "workbench.editor.tabSizing": "shrink",
  "editor.fontSize": 12,
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.detectIndentation": false,
  "editor.dragAndDrop": false,
  "editor.renderLineHighlight": "all",
  "editor.formatOnSave": true,
  "problems.decorations.enabled": false,
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "explorer.openEditors.visible": 0,
  "explorer.decorations.colors": false,
  "explorer.autoReveal": false,
  "breadcrumbs.enabled": true,
  "breadcrumbs.symbolPath": "off",
  "terminal.integrated.rendererType": "dom",
  "extensions.showRecommendationsOnlyOnDemand": true,
  "extensions.ignoreRecommendations": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/node_modules/": true,
    "**/.localized": true
  },
  "html.autoClosingTags": false,
  "npm.enableScriptExplorer": true,
  "material-icon-theme.folders.theme": "classic",
  "material-icon-theme.hidesExplorerArrows": true,
  "material-icon-theme.folders.color": "#90a4ae",
  "material-icon-theme.opacity": 0.8,
  "bracketPairColorizer.activeScopeCSS": [
    "borderColor : {color}; opacity: 0.5",
    "backgroundColor : {color}"
  ],
  "eslint.autoFixOnSave": true,
  "bracketPairColorizer.highlightActiveScope": true,
  "prettier.eslintIntegration": true
}

You can copy and paste them or just download my settings.json file:

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

Extensions

To install all extensions by one command:

$ code --install-extension CoenraadS.bracket-pair-colorizer --install-extension msjsdiag.debugger-for-chrome --install-extension dbaeumer.vscode-eslint --install-extension eamodio.gitlens --install-extension esbenp.prettier-vscode --install-extension jpoissonnier.vscode-styled-components --install-extension PKief.material-icon-theme --install-extension techer.open-in-browser

Snippets

I created my own global snippets instead of installing an 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.

Keybindings

Custom Visual Studio Code keybindings are located in /Users/<your username>/Library/Application Support/Code/User as keybindings.json file. To manage them go to Code > Preferences > Keyboard Shortcuts.

My keybindingsa are listed in keybindings.json.