bsliu17/mac-dev-setup

A macOS setup guide specific to front-end development.

Mac dev setup

A macOS setup guide specific to front-end development.

Getting Started

Open up Terminal.app and follow this guide from top down.

Turn on invisible files:

defaults write com.apple.finder AppleShowAllFiles TRUE && killall Finder

Install Xcode command line tools

xcode-select --install

Homebrew

Install Homebrew:

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

Check if its working:

brew update && brew doctor

Oh My Zsh

Install Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Node/Yarn

Install both Node/npm & Yarn:

brew install yarn

Install global packages:

npm i -g @storybook/cli create-react-app eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-json eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react gulp-cli prettier serve

Apps

Install Cask:

brew tap caskroom/cask

Install apps:

brew cask install adobe-creative-cloud browserstacklocal diffmerge dropbox google-chrome insomnia iterm2 mamp sketch slack sourcetree spectacle spotify sublime-text transmit visual-studio-code

iTerm

Download the base16 Ocean Dark theme colors then follow these installation instructions.

Install Powerline Fonts, use "Source Code Pro", then check if they’re working via:

echo "\ue0b0 \u00b1 \ue0a0 \u27a6 \u2718 \u26a1 \u2699"

Install Powerlevel9k theme:

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k

Install zsh-autosuggestions & zsh-syntax-highlighting plugins:

brew install zsh-autosuggestions zsh-syntax-highlighting

Open ~/.zshrc, paste in this zsh config file, then save. If you have iTerm open, restart it.

Sublime Text

Install Package Control then quit.

Open ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User with Finder, replace the contents of User/ with these files.

Restart ST3 to let Package Control auto-install missing packages. When Package Control finishes, restart again to resolve any lingering UI problems.

Extra - Syncing with Dropbox

Visual Studio Code

Install extensions:

code --install-extension dbaeumer.vscode-eslint zhuangtongfa.material-theme esbenp.prettier-vscode ms-vscode.sublime-keybindings robertohuertasm.vscode-icons

Open ~/Library/Application\ Support/Code/User with Finder, replace the contents of User/ with these files.