Dheeraj

Posted on Aug 6, 2020 • Originally published at Medium

Setting up your Mac for web development

#setup #macbook #vscode #developer

I’m just putting this here so that I can follow it as a checklist when setting up mine and it might help you guys too. I’m a web developer, focusing on javascript and node.

Getting Started

Once you are done booting up and going through the usual set up, make sure your mac is running the latest macOS version and you have Xcode downloaded from app store.

Tools

Homebrew

Homebrew is a package manager for mac, which helps you install your apps via comand line.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

once installed, give it an update.

brew update

Node.js

Download node.js form their website or install it through nvm. It’s better not to use homebrew for just this one. So you can easily switch between node versions.

Download nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

Ensure that nvm was installed correctly with nvm --version, which should return the version of nvm installed.

Install the latest LTS version with

nvm install --lts

Git

You should probably get git when you install Xcode, or you could simply run git from the Terminal the very first time.

git --version

If it is not already installed, it will prompt you to install it. You can also get a macOS installer from the git website.

or with Homebrew

brew install git

Additionally, you can download the GUI for GitHub from here. If thats your thing.

Window management tool

MacOS never had a built in window management solution as good has windows does, but you can get away with it with 3rd party apps like Rectangle, download from their website or with brew.

brew cask rectangle

Applications

Visual Studio code

It is my got to text editor for all things web, it got plenty of features, and you can always find an extension for almost anything.

Download it from here or

brew cask install visual-studio-code

Browsers

You’ve got Safari pre installed, and since its web development, you’d probably need to check you website in different browsers. So, lets get the rest of them...

Chrome — https://www.google.com/chrome/
Firefox — https://www.mozilla.org/en-US/firefox/new/
Opera — https://www.opera.com/hi

with brew;

brew cask install google-chrome firefox opera

Yarn

An alternative to npm.

brew install yarn

Spotify

Well, what is life without some music.

brew cask install spotify

ImageOptim

ImageOptim helps you optimise an compress images for your website, download it form here, or

brew cask install imageoptim

For messaging and communications

Microsoft Teams for work and WhatsApp for friends and family.

brew cask install microsoft-teams whatsapp

Settings and configurations

General

Try dark mode

Dock

Enable automatically hide and show doc.
Enable Show indicators for open applications
Disable show resent application in doc (it gets really messed up soon)

Users & Groups

Add “Rectangle” to Login items

Security and Privacy

Enable Require password immediately after sleep
Turn on FireVault for ssd encryption
Turn on Firewall

Keyboard

Disable “Correct spelling automatically”
Disable “Capitalize words automatically”
Disable “Add period with double-space”

Display

Make sure Night Shift is off

Sharing

Change computer name
Make sure all file sharing is disabled

Setting up the apps

VSCode

Install the extensions and themes

lastly,

To add code . command to open VSCode from mac Terminal. Press CMD + SHIFT + P and click "Install code command in PATH".

Thats pretty much it for now, hope it helped your process.
Let me know what are your go to apps and tools..

DEV Community