Jump-starting a fresh MacBook for Front End JavaScript development

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:

1. Homebrew package manager to quickly install what we need
2. macOS settings for trackpad, mouse and a customized touchbar
3. Terminal settings (zsh) for readability, tab completion, git functionalities
4. Visual Studio Code configuration for JavaScript / TypeScript
5. Closing thoughts on automation (dotfiles) and good resources

Picture by @barnimages on https://unsplash.com/photos/t5YUoHW6zRo

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 firefox

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

Enabling three finger drag from the Accessibility settings.

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!

L: Independent scroll direction for mouse and trackpad / R: horizontal scrolling with a mouse wheel by holding down shift.

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 touch bar 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 Palette: ⌘+⇧+P.

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 Palette 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?

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.

This blog was originally published on https://techspire.nl/blogs/