Awesome Open Source
Awesome Open Source

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


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 from the repository root directory:
$ cd mac-setup
$ ls
Brewfile                   settings.json          spectacle.json
Flat.terminal          script                 snippets.code-snippets
$ bash script/
  • one line installation - open your terminal and enter the following code:
$ curl -L | tar -xvz; cd mac-setup-master; chmod +x script/; script/

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 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 ResetLaunchPad -bool true; killall Dock

Show Hidden Files

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

$ defaults write AppleShowAllFiles YES

Show Path Bar in Finder

$ defaults write ShowPathbar -bool true

Show Status Bar in Finder

$ defaults write 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


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

$ curl -O

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


# 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)

# 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
$ source ~/.bash_profile


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

$ /usr/bin/ruby -e "$(curl -fsSL"

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>


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

To install listed applications type:

$ brew bundle

in a directory that contains Brewfile.


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 "First Last"
$ git config --global "[email protected]"

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

$ cd ~
$ curl -O
$ open .gitconfig
  name = First Last
  email = [email protected]
  editor = editor
  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.


You can also authenticate with GiHub using SSH key:

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

Above command will create a private key (id_rsa) and public key ( 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 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 [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.


For installation of the Node.js I like to use Node Version Manager:

$ curl -o- | 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",
  "": false,
  "workbench.list.openMode": "doubleClick",
  "": 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


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


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.


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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
shell (10,559
macos (1,812
terminal (751
frontend (524
dotfiles (317
apple (287
mac (282
visual-studio (208
guide (199
front-end (193
web-development (121
macosx (115
front-end-development (59
setup (57
settings (55
development-environment (54
webdevelopment (49
preferences (35