Follow along as I set up a macOS desktop from scratch. Development environments, apps, code editors, all the settings, and some useful shortcuts!
When you get a new machine (or do a fresh OS install), there are always lots of little things to adjust to get things "just right". In this article, I'll attempt to document every step I take. Hopefully it will be helpful to readers (and my future self)!
First, we have some basic OS cleanup stuff. I like to keep things minimal, especially on the dock and desktop. To do this, simply click drag icons off the dock. You'll see them go "poof" when you let go of the click. After decluttering the dock, only running programs will show. Usually I set it to auto hide too. You can set this by right clicking on the dock (not an app, the divider) and going to "Dock Preferences". Now that we've cleaned up the dock, we need a way to easily launch programs so we'll install a launcher.
Personally, I like to use Quicksilver, so we'll install that. Open up safari, download the app and install. Once installed, we'll drag the Quicksilver app to the dock and open it up for the first time. The default settings (and no plugins) usually work great. Once we're through the initial setup steps, open the Quicksilver preferences and check Start at Login
under the Application settings. Now we can open any app or folder by hitting Ctrl + Space
. Quicksilver also allows us to move, copy, and perform other file or system actions too, pretty slick! Next, we'll install some commonly used apps.
This section will surely differ from person to person, here's what I typically install:
From the App Store
This is the bare minimum for me. I'll try to update the list as I install more stuff. If you see an app missing from this list, please let me know in the comments! At this point I will typically copy over my bettertouchtool presets for hotkeys and to fix the behavior of the forward/back buttons on my Logitech mouse.
Next, we'll install Homebrew, so open up iTerm and paste this in:
1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Go through the prompts, allow it to install the XCode command line tools, and we'll be set! We will be using various brew
commands soon to configure our terminal and dev environment.
As developers, we spend tons of time in our terminal. So it makes sense to do some one-time setup to make it more visually pleasing (and informative). To improve the bash prompt, I like to use Powerline. I know this sounds weird but we need python for powerline. On modern systems this is really no big deal. Trust me, it's worth it!
brew install python3
pip3 install powerline-status
pip3 show powerline-status
(copy this)Now we need to configure bash to use powerline, so open up ~/.bash_profile
vim or your text editor of choice.
1vim ~/.bash_profile
1vim ~/.bash_profile
Paste the following lines into the file. Note that you may need to change part of the last line to match your path.
1# Powerline2powerline-daemon -q3POWERLINE_BASH_CONTINUATION=14POWERLINE_BASH_SELECT=15source /usr/local/lib/python3.7/site-packages/powerline/bindings/bash/powerline.sh
1# Powerline2powerline-daemon -q3POWERLINE_BASH_CONTINUATION=14POWERLINE_BASH_SELECT=15source /usr/local/lib/python3.7/site-packages/powerline/bindings/bash/powerline.sh
Now we need to copy in the default powerline config:
1mkdir -p ~/.config/powerline2cp -R /usr/local/lib/python3.7/site-packages/powerline/config_files/ ~/.config/powerline/
1mkdir -p ~/.config/powerline2cp -R /usr/local/lib/python3.7/site-packages/powerline/config_files/ ~/.config/powerline/
Next, we need to choose a powerline font and tell iTerm to use it:
Profiles -> Text
click "Change Font" and select the powerline fontOpen a new iTerm window and you should see a snazzy powerline display! Feel free to customize things from here such as font size or default window behaviors of course.
Powerline is great by default, but we can make it better by adding status display of git repos to the bash prompt. We'll use this powerline segment by Jasper Brouwer.
First, run this command to install the new segment, similar to how we installed Powerline:
1pip3 install powerline-gitstatus
1pip3 install powerline-gitstatus
Then add the following to your ~/.config/powerline/colorschemes/default.json
under the groups
object. For example:
1{2 "groups": {3 "gitstatus": { "fg": "gray8", "bg": "gray2", "attrs": [] },4 "gitstatus_branch": { "fg": "gray8", "bg": "gray2", "attrs": [] },5 "gitstatus_branch_clean": { "fg": "green", "bg": "gray2", "attrs": [] },6 "gitstatus_branch_dirty": { "fg": "gray8", "bg": "gray2", "attrs": [] },7 "gitstatus_branch_detached": {8 "fg": "mediumpurple",9 "bg": "gray2",10 "attrs": []11 },12 "gitstatus_tag": { "fg": "darkcyan", "bg": "gray2", "attrs": [] },13 "gitstatus_behind": { "fg": "gray10", "bg": "gray2", "attrs": [] },14 "gitstatus_ahead": { "fg": "gray10", "bg": "gray2", "attrs": [] },15 "gitstatus_staged": { "fg": "green", "bg": "gray2", "attrs": [] },16 "gitstatus_unmerged": { "fg": "brightred", "bg": "gray2", "attrs": [] },17 "gitstatus_changed": { "fg": "mediumorange", "bg": "gray2", "attrs": [] },18 "gitstatus_untracked": {19 "fg": "brightestorange",20 "bg": "gray2",21 "attrs": []22 },23 "gitstatus_stashed": { "fg": "darkblue", "bg": "gray2", "attrs": [] },24 "gitstatus:divider": { "fg": "gray8", "bg": "gray2", "attrs": [] }25 }26}
1{2 "groups": {3 "gitstatus": { "fg": "gray8", "bg": "gray2", "attrs": [] },4 "gitstatus_branch": { "fg": "gray8", "bg": "gray2", "attrs": [] },5 "gitstatus_branch_clean": { "fg": "green", "bg": "gray2", "attrs": [] },6 "gitstatus_branch_dirty": { "fg": "gray8", "bg": "gray2", "attrs": [] },7 "gitstatus_branch_detached": {8 "fg": "mediumpurple",9 "bg": "gray2",10 "attrs": []11 },12 "gitstatus_tag": { "fg": "darkcyan", "bg": "gray2", "attrs": [] },13 "gitstatus_behind": { "fg": "gray10", "bg": "gray2", "attrs": [] },14 "gitstatus_ahead": { "fg": "gray10", "bg": "gray2", "attrs": [] },15 "gitstatus_staged": { "fg": "green", "bg": "gray2", "attrs": [] },16 "gitstatus_unmerged": { "fg": "brightred", "bg": "gray2", "attrs": [] },17 "gitstatus_changed": { "fg": "mediumorange", "bg": "gray2", "attrs": [] },18 "gitstatus_untracked": {19 "fg": "brightestorange",20 "bg": "gray2",21 "attrs": []22 },23 "gitstatus_stashed": { "fg": "darkblue", "bg": "gray2", "attrs": [] },24 "gitstatus:divider": { "fg": "gray8", "bg": "gray2", "attrs": [] }25 }26}
Finally, add this segment to powerline's config in ~/.config/powerline/themes/shell/default.json
:
1{2 "function": "powerline_gitstatus.gitstatus",3 "priority": 404}
1{2 "function": "powerline_gitstatus.gitstatus",3 "priority": 404}
Add the above config to the
"left"
option in thedefault.json
file. I also ended up removing the"right"
section entirely. Feel free to do that too!
Once we've done that, we just need to run this command to reload powerline
1powerline-daemon --replace
1powerline-daemon --replace
Enjoy your fancy new git-repo-status aware terminal!
Now that we've got the powerline stuff done, we'll add a few bash aliases and shortcuts to make working with git and Laravel easier.
First, install git and bash completion using homebrew:
1brew install git bash-completion
1brew install git bash-completion
Although I'm constantly tweaking things, my .bash_profile is always available here. Use that as a starting point for your own bash config. Feel free to ask me questions in the comments or on twitter if you want to know how anything in there works!
Now we'll just paste in the file from that gist ^.
Really, that's about all we should need to do to set up bash how we like it. From there it all comes down to personal taste for Powerline settings and iTerm stuff.
We've setup bash how we like it, but now we need to set up Vim. Like the .bash_profile
gist, I've always got my .vimrc available on github
Vim config is also a personal thing, but you can at least use my version as a starting point for your own.
If you directly copy my
.vimrc
file, you'll need to install the theme I use: xoria256. You can download this file and place it at~/.vim/colors/xoria256.vim
. Note that you may need to create the~/.vim/colors
directories first.
Finally it's time to set up our development environment. For me, this usually means "web dev" first and foremost. The simplest thing I've found to accomplish this is Laravel Valet. I won't cover everything here, but I'm always happy to answer questions on twitter.
For this section I recommend following the Laravel Valet docs, since they describe it in great detail.
Once valet is installed, we are almost be ready to develop our next great web app! The only thing left to do is to configure the editor, which is Visual Studio Code in my case.
Mysql
After you've installed MySQL (as outlined in the Valet docs), pay attention to the output of thebrew install mysql@5.7
command. We want this to start at login, so make sure to runbrew services start mysql@5.7
.
This part's easy! Head over to https://nodejs.org/ and download the installer. Usually I choose the current version.
Some folks prefer other editors and there's nothing wrong with that... but I love VSCode. It is open source, has an active community, and the intellisense it provides is miles ahead of anything else I've used. We installed it earlier, but now is the time to configure it to our liking.
For First Timers
If you're not used to VSCode, I recommend you start with the vanilla editor and add extensions and settings as you need to. I've been using it for a while, so my needs may differ from yours quite a bit!
Thanks to the Settings Sync extension, this part of the process is fairly automated. All we need to do is install the extension and configure the github gist ID that contains my (previously synced) settings.
Click on the extensions button on the left sidebar (or press Cmd + Shift + X
) and search for "Settings Sync". Once installed, press Shift + Option (Alt) + D
. Now you'll need to create a new personal access token for Github. The only checkbox you should need to enable is the one referring to "Gist" access. Paste your generated access token into the box in VSCode.
If you want to use my settings, paste my gist ID in the next box which pops up asking for a Gist ID, otherwise hit Enter to create a new settings gist of your own
Here's the gist ID:
136dedc27c2c91cf9498e89012fae3e8b
136dedc27c2c91cf9498e89012fae3e8b
VSCode comes with a
code
terminal command. Open the editor, hitCmd + Shift + P
and search forShell Command: Install 'code' command in PATH
-- that's the one you want.
Whew! If you've made it this far, I have to commend you. Thanks for reading, now go create something great!