Mac Setup

Front End Web Development Setup for macOS

This document describes how I set up front end web development environment on my MacBook Air with macOS High Sierra 10.13.3.

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

After clean install of operating system, there are a couple tweaks I like to make to the System Preferences. Some of them are not strictly related to web development enviroment - 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)

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

$ defaults write NSGlobalDomain ApplePressAndHoldEnabled -bool false

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

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

$ defaults write com.apple.finder AppleShowAllFiles YES

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

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

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

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

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

# Aliases
alias brewup='brew update; brew upgrade; brew prune; brew cleanup; brew doctor; brew cask cleanup'
alias rmhis='rm .bash_history; history -c; logout'

# Colors for `ls` command output
export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced

# Colors 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 used in prompt, displaying current Git branch
parse_git_branch() {
     git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

# Prompt
export PS1="${RED}\u ${GRAY}• ${GREEN}\h ${GRAY}• ${YELLOW}\w${GRAY}\$([[ -n \$(git branch 2> /dev/null) ]] && echo \" •\")${PURPLE}\$(parse_git_branch)\n${GRAY}\$ ${DEFAULT}"

In my .bash_profile file I create a brewup alias to keep Homebrew (which we are going to install in a second) up to date and rmhis to remove bash history. I also set color scheme for ls command output and for custom prompt which contains username, computer name, working directory and current Git branch.

To download .bash_profile and execute its content, use:

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

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

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

To install specific package use brew install <package> e.g.

$ brew install git

Installing each package separately may take some time. That's why I use Homebrew Bundle, which allows to automatically install all packages and applications listed in the Brewfile file.

Here are all the programs I install with a brief description.

• Cask - an extension to Homebrew which allows to install almost any program that exists for a Mac
• Git - version control system
• mas-cli - Mac App Store command line interface
• AppCleaner - apps uninstaller
• Filezilla - FTP client
• Firefox - web browser
• Flux - screen color temperature adjusting app
• Fork - Git GUI client
• Google Chrome - web browser
• 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
• Visual Studio Code - code editor
• VLC - media player
• iMovie - video editor
• Pages - text editor
• Numbers - spreadsheet editor

Below are the entire contents of my Brewfile, which will install all the above programs with a single command.

tap 'caskroom/cask'

brew 'git'
brew 'mas'

cask 'appcleaner'
cask 'filezilla'
cask 'firefox'
cask 'flux'
cask 'fork'
cask 'google-chrome'
cask 'keepingyouawake'
cask 'keka'
cask 'mamp'
cask 'opera'
cask 'postman'
cask 'sequel-pro'
cask 'skype'
cask 'slack'
cask 'spectacle'
cask 'transmission'
cask 'visual-studio-code'
cask 'vlc'

mas "iMovie", id: 408981434
mas "Numbers", id: 409203825
mas "Pages", id: 409201541

To check App Store application's IDs use:

$ mas search <app name>

To download my Brewfile file type:

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

To install listed applications use:

$ brew bundle

in directory that contains Brewfile file.

You can set Git global configuration two ways. The first is to run 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 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 protected]
[github]
  user = username
[core]
  editor = editor
[credential]
  helper = osxkeychain

Here I set my name, email, GitHub username, 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.

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.8/install.sh | bash

You can check all available Node.js versions by:

$ nvm list-remote

To install specific version type:

$ nvm install <version>

Packages which I use globally at the moment are:

• Gulp
• Webpack
• npm-upgrade

To install them use:

$ npm install -g gulp-cli webpack npm-upgrade

Currently I have installed all major web browsers:

• Chrome
• Safari
• Opera
• Firefox

For main development I use Google Chrome.

• uBlock Origin - block ads
• JSONView - validate and view JSON documents
• React Developer Tools - inspect component hierarchies and states
• Redux DevTools - debug state changes

All default settings changes are stored in settings.json file. You can open it by pressing Command ⌘ + , going to Code > Preferences > Settings. 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,
  "editor.fontSize": 12,
  "editor.tabSize": 2,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.minimap.enabled": false,
  "editor.formatOnPaste": true,
  "editor.detectIndentation": false,
  "problems.decorations.enabled": false,
  "explorer.openEditors.visible": 0,
  "explorer.decorations.colors": false,
  "files.insertFinalNewline": true,
  "html.autoClosingTags": false,
  "files.exclude": {
    "**/node_modules/": true,
    "**/.vscode/": true,
  },
  "material-icon-theme.folders.theme": "none",
  "material-icon-theme.hidesExplorerArrows": true,
  "html-css-class-completion.enableEmmetSupport": true,
  "eslint.autoFixOnSave": true,
  "todohighlight.isEnable": true,
  "todohighlight.keywords": [
    {
      "text": "TODO:",
      "color": "black",
      "backgroundColor": "yellow",
      "overviewRulerColor": "yellow"
    },
    {
      "text": "FIXME:",
      "color": "white",
      "backgroundColor": "red",
      "overviewRulerColor": "red"
    }
  ],
  "todohighlight.exclude": [
    "**/public/"
  ],
}

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

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

• Auto Rename Tag - automatically rename paired HTML tag
• Debugger for Chrome - debug JavaScript code running in Google Chrome from VS Code
• ESLint - integrate ESLint into VS Code
• IntelliSense for CSS class names in HTML - autocomplete HTML class attributes
• Material Icon Theme - icons based on Material Design
• 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
• Reactjs code snippets - code snippets for React development
• SCSS IntelliSense - autocomplete variables, mixins, functions etc.
• TODO Highlight - highlight and list TODO, FIXME or any annotations within code