In the past months, I set up a MacBook for full stack JavaScript development five times — technical difficulties, 🍾 a new job at Techspire (hiring!), a new computer at a client, you name it. If, like me, you have hobbies, this is not the thing you want to be spending your time on. So the next time I am setting up a machine, I will be copy-pasting from this article. Or, even better, automating the setup. I hope this saves you some time too, and that you pick up a trick or two. This article discusses:
- Homebrew package manager to quickly install what we need
- macOS settings for trackpad, mouse and a customized touchbar
- Terminal settings (zsh) for readability, tab completion, git functionalities
- Visual Studio Code configuration for JavaScript/TypeScript
- Closing thoughts on automation (dotfiles) and good resources
Picture by @barnimages on unsplash |
Before continuing, it is useful to update macOS. Open a terminal and run:
softwareupdate -i -a
This guide was written with MacOS Catalina in mind.
Homebrew: package manager
As Homebrew puts it, Homebrew installs the stuff you need that Apple didn’t. This package manager will make it much faster for us to install whatever we need to start developing, such as Node, Visual Studio Code and Slack. Instead of navigating to different websites, downloading packages and clicking install, it will be as easy as running brew cask install visual-studio-code
. To install Homebrew, run this in your terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Now comes the time-saver, run this in the terminal:
brew install node && brew cask install visual-studio-code postman slack spotify mos google-chrome
As you might notice, brew install
works for node, but not for anything with a GUI. Anything with a GUI requires brew cask install <package-name>
(about cask). If there is anything you need to add, do a brew search <package-name>
(or see formulae.brew.sh/cask) to see if the package can be installed via Homebrew. While Homebrew is working in the background, let us continue 🤓
macOS interaction settings
Essential for how the interaction with your machine feels are the keyboard, mouse and trackpad. And their settings, obviously. I will hold myself back here and not get into the hardware now… Let me simply say that I work with an external keyboard, an external trackpad and a mouse. Below are the settings that boost my productivity.
Trackpad
Open spotlight search (⌘ + space) and go to the trackpad settings. Most important is tap to click, but I simply enable all options here, on all three tabs. Next my favourite hidden setting, in spotlight search for trackpad, then:
Accessibility → Pointer Control → Trackpad Options → Enable dragging → three finger drag
Now, you can drag windows and sliders with three fingers without clicking.
Mouse settings: independent scroll direction for trackpad & mouse
The natural scroll direction from a trackpad works well for me, but with a mouse wheel, I just cannot get used to it. In macOS, there are linked — but there is a solution! Mos. Install: brew cask install mos
. Now for the configuration, launch Mos go to Preferences. Enable Reverse Scroll
, Launch on Login
, and under Advanced, a Toggle Key
for horizontal scrolling. Enjoy!
Independent and horizontal scrolling |
Most of the time, you probably have many windows open at once, such as an IDE, terminal and web browser. Horizontal scrolling is very useful for the windows that do not scale to fit all the content.
Touch bar optimization / customization
Aahhh, that dreaded touch bar, who does not have an opinion about it… This is how to customize it:
(⌘ + space) → touchbar (open: keyboard) → Customise Control Strip
Customizing the touchbar settings |
In the keyboard section, set Touch Bar shows: 'Expanded Control Strip'
. Then click on Customize Control Strip
to start editing the touch bar. This is actually a really nice gimmick, where you can drag the icons you want into the touch bar. I chose to not completely fill my Touch Bar, like so:
Buttons: Media — Brightness Slider — Do Not Disturb — Volume — Screen Lock |
Dock settings: remove unnecessary icons, auto-hide
right click dock → Dock Preferences →Automatically hide and show the Dock
Terminal (zsh): readability, tab completion, git
Now it is time to change the way the terminal looks and behaves, by adding some colour, more explicit git control and tab completion. There are many tutorials for terminal customization, but for now I shamelessly copied the settings from my team lead. The result:
Z Shell after changing the configuration |
Check out the settings in this gist, and copy them from line 5 onwards. Then use nano (the built in command line text editor) to create and edit a text file:
nano ~/.zshrc
Paste in the settings from this gist, then save (⌃+o) and exit (⌃+x). Now apply and finalize the changes:
source ~/.zshrc
compaudit | xargs chmod g-w
Restart your terminal to see the effect.
Visual Studio Code configuration
The fastest way of changing settings in VS Code is through the Command Pallete: ⌘+⇧+P.
VS Code configuration |
Now you can either Open User Settings
and configure your preferences, or open the JSON file to edit your settings. I use these settings (gist) to enable settings such as Word Wrap, Auto Save, Tab Size and hiding the Mini Map on the right hand side.
Keybindings settings
To change the tab-switching behaviour, so what happens when pressing (⌃+⇥). I hate the dropdown menu, I want it to behave like google chrome. Open the Command Pallete again (⌘+⇧+P) and Open Keyboard Shortcuts (JSON)
. Paste in these keybindings settings and enjoy.
VS Code extensions
- Angular Language Service for a better editing experience
- Prettier for opinionated code formatting (and its pre-commit hook)
- Live Server for trying simple local projects
- ESLint for, well, linting
- GitLens for optimal Git experience
Closing thoughts: automation and further reading
While I write, I like to read up on what I am writing about. To correct my thinking and to see if there is a smarter way of doing what I am writing about. This final section is about the next steps of optimizing the setup flow.
Dotfiles
Ideally, all these settings would be saved to some external repository, ready to fully configure your new machine with one or two commands. Well, automation is possible. ‘Dotfiles’ are the hidden configuration files on our computers — like the.zshrc
we used before. So what about them?
Backup, restore, and sync the prefs and settings for your toolbox. Your dotfiles might be the most important files on your machine. [dotfiles.github.io/]
Further reading
- An accessible introduction to dotfiles by Marcus Hammarberg, linking to some examples
- Oh My Zsh, a framework for managing your Zsh configuration
- masOS Setup Guide, a well-structured and detailed guide for setting up
Who am I?
My name is Marc. I’m a junior full stack engineer at Techspire and ride my bike in Amsterdam I have an engineering bachelor’s, an entrepreneurship master’s and when I am not coding, I am probably doing water sports.
Do you think you have what it takes to work with us? At Techspire we’re looking for people who love technology as much as we do, and are looking to push themselves to expand their knowledge. Also, we love a good story, a good laugh, and a few beers.
See all Techspire blogs?
See all Techspire news?
Follow our LinkedIn page: Techspire LinkedIn