macOS Development Environment Config

I am a Frontend Developer and I use the MacBook Pro as my development computer. So here I just record my development environment for the future if I buy a new Mac.

Editors

I choose these two as my main development editors, both are light and beautify. But you have to install many plugins to make it near an "IDE". For a frontend developer, it's already perfect.

Sublime Text

More details please see sublime-config

Visual Studio Code

More details please see vscode-config

Browser

Google Chrome must be the most recommend browser for develop. As the version upgrade, the UI becomes more beautify and you can see more Material Design in it. Also you can install many plugins as you want to make your development more easily.

Here are my installed plugins:

• ExpressVPN for Chrome
• The Great Suspender
• Adblock Plus
• Vue.js devtools
• Vimium
• EditThisCookie
• Sizzy
• Simple QR Generator
• Blank New Tab Page
• Awesome Autocomplete for GitHub
• Isometric Contributions
• JSONView
• Octotree

Terminal

I use iTerm2 plus tmux. They are prefect partners if you use them well. But I think I am not that guy, just a simple user who use this to show off. Just kidding, I am learning this how to use it better.

You can check my tmux config here.

Productivity

I use Alfred to replace the Spotlight Search, it has a workflows thing, like plugins to make it self stronger more a search tool.

Here are my installed workflows:

• BetterZip
• Can I Use
• Colors
• Emoji
• Encode/Decode
• Express Inquiry
• IP Address
• Kill Process
• Uninstall with CleanMyMac 3
• Wunderlist
• 人民币金额大写

It already provides many useful commands to make search efficiently, but you still can add more and make it stronger.

Other Tools

I also use other tools more than like packages, but really useful.

Homebrew

Install:

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

Daily using commands:

# Check the system if it is OK
brew doctor

# Check the update
brew update

# Upgrade the outdated packages
brew upgrade

# Cleanup the outdated packages
brew cleanup

# Install packages
brew install [package_name]

# Search the package if existed
brew search [package_name]

# List the detail of one package
brew info [package_name]

Using cask to install macOS applications, first of all, you should add this tap:

brew tap caskroom/cask

then you can install with this:

brew cask install [application_name]

nvm

This is Node.js version manager, it is useful when you have multiple versions of Node.js. And the commands are easy, only remember those:

# List local node verion and using detail
nvm ls

# List remote LTS node version
nvm ls-remote [--lts]

# Install LTS version
nvm install v6.11.2

# Use a version
nvm use v6.11.2

# Use system version
nvm default alias system
nvm use system

zsh/oh-my-zsh

Default shell env in Mac is bash, but it is not good at all. When you checkout to zsh and pluse oh-my-zsh, it's really amazing. This is the terminal should suppose to be.

# Change the default shell
chsh -s /bin/zsh

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

# Via wget
sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

Git

As we all know, it is a popular code version control tool. When I install it, my first thing is to config it in global. Then I can think it is mine now.

# Config global user
git config --global user.name "Barry Chen"
git config --global user.email "funnychen@outlook.com"

# Store password when pull and push
# See https://git-scm.com/docs/git-credential-store
git config credential help.store

Nginx

I use this as my local server when developing simple H5 or other things. Just see the details here.

Vim

An acient editor and exists as a legend, I can use it a little. Just see the details here.

System Commands

# Cancel the delay after hover to the edge of dock side
defaults write com.apple.dock autohide-delay -float 0; killall Dock

# Disable chrome two-finger back/forward navigation
defaults write com.google.Chrome AppleEnableSwipeNavigateWithScrolls -bool FALSE