Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

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.

Git - version control system
Ruby - programming language
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
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
Sourcetree - Git GUI client
Spectacle - window manager
Spotify - digital music service
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, 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 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/appalaszynski/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:

$ 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 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.

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

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
JSON Viewer - 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,
  "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

Bracket Pair Colorizer - match brackets to be identified with colours
Debugger for Chrome - debug JavaScript code running in Google Chrome from VS Code
ESLint - integrate ESLint into VS Code
GitLens - supercharge the Git capabilities built into VS Code
Material Icon Theme - icons based on Material Design
open in browser - open any file in browser right from VS Code explorer
Prettier - Code formatter - VS Code package to format files using Prettier.
vscode-styled-components - syntax highlighting and IntelliSense for styled-components

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 265

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (2) 🔗