Home » News & Blog » Guide: How to set up a MacBook ready for a WordPress developer?

Guide: How to set up a MacBook ready for a WordPress developer?

(Or.. Why you shouldn’t spill liquids on your laptop)

Below is a list, direct links & a step by step guide of apps, tools and extensions we (or most of us) use at ClarityDX to develop our WordPress sites. The guide is divided into three parts:

Part one: Apps
Part two: Tools
Part three: Extensions

This guide assumes you’re running macOS Mojave or later, which comes packaged with PHP 7+. If that’s not the case you may have to upgrade your OS or your PHP version!

A couple of weeks ago in the midst of lockdown, while working tirelessly on an email reply to a client I managed to knock over an entire glass of orange squash on my work laptop, effectively drowning it. Panic ensued as I tried to blow dry it. I frantically ran around the flat looking for rice but unfortunately we missed out on all the panic buying.

I let it dry out upside down until the next morning and I was still quietly optimistic, until the power button did nothing. It was done for. We organised a collection for repair (or most likely replacement) and a loan laptop while that took place, however it would be a number of days until they could get a driver out to collect it so I borrowed my partners laptop – assuming I’ll just be able to crack on with the work.

Naturally, I found that none of the tools we at ClarityDX use for development were installed and this would also be the case for the loan laptop and the replacement laptop! So after having done the setup on clean laptops three or four times I decided to create a guide in case any future WordPress developer is as clumsy as I am…

How to set up a MacBook for a developer?

Part One: Apps

First things first, download Chrome. Some of you might prefer Firefox but this my personal preference. It just works, it renders and runs scripts with the most accuracy in my opinion. It might sometimes be costly on your RAM, but also comes with a host of very helpful Developer Tools such as the element inspector, JavaScript console, Lighthouse auditing, and more. There are also hundreds of great extensions, which we’ll get to later. I still recommend you download Firefox because you’ll more than likely need it for testing!

For our IDE we use Visual Studio Code – I can’t recommend it enough. Customisable, intuitive and easy to get started with, also comes with a tonne of extensions some of which we’ll cover later.

The first time you open up VSCode you will need to enable shell command, to do that press F1 then type ‘shell command’ and hit enter.

We also use MAMP, it’s the Harrison Ford of local development – it may be a little old but works incredibly well!

You’ll need an FTP client, most of us at 93d use FileZilla, but I believe CyberDuck is also a good free option.

That covers the basic development apps, but there’s a few productivity apps I’d like to mention.

Slack is the messaging app we use, you can create loads of channels, have audio and video calls, connect it to services like GitHub and Harvest, create custom emojis, and perhaps most importantly search and add GIFs using Giphy!

We use 1Password to manage credentials for internal and client websites. Very handy and very secure, also comes with browser extensions so you can save and autofill passwords on the go.

I think I may be one of the few developers at ClarityDX using this, but Alfred is a massive time saver for me. It’s similar to Mac OS Spotlight Search but I find it’s more intuitive and way more customisable.

Part 2: Tools

This part covers all the coding and formatting tools we use, the majority of which will need to be installed via Terminal.

As of macOS Catalina the default Unix shell in Terminal is Z Shell (or zsh), I still prefer to use Bash so this is what the guide was written for. You can change the default Shell by running the following command in Terminal:

chsh -s /bin/bash

Or if you want zsh again:

chsh -s /bin/zsh

First thing you’ll need is:

Xcode

xcode-select –install

This may take a while if you don’t have it installed so have a cuppa.

Git

Git is a version-control system for tracking changes, get very familiar with it if you aren’t already. It should be installed along with Xcode, if not there’s a guide here: https://www.atlassian.com/git/tutorials/install-git#mac-os-x

Homebrew

This is a package installed for macOS: https://brew.sh/

After installing run:

sudo chown -R $(whoami) ~/.config

This just makes sure the account you’re logged in on has ownership of the folder and prevents permissions errors later on.

Node/npm

Node.js is a JavaScript runtime environment and npm is a package manager, a lot of our tools and build processes with the theme rely on these so get the downloaded here: https://nodejs.org/en/ (npm should be packaged with Node.js).

After installation, run these two commands:

sudo chown -R $(whoami) ~/.npm

sudo chown -R $(whoami) /usr/local/lib/node_modules

This again is to prevent permissions errors. In fact keep a note of these on hand as you may have to re-run them after installing other tools.

The following two commands are needed to install Gulp and the PostCss plugin for Gulp, these are for some of our legacy projects, not necessary as we don’t use Gulp anymore but could come in handy:

sudo npm install gulp-cli -g

sudo npm i -g gulp postcss

Node Version Manager

Some older projects are built with earlier versions of Node/npm so it’s handy to have a version manager installed for this, more info here: https://github.com/tj/n

To install run:

npm install -g n

sudo chown -R $(whoami) /usr/local/n

sudo chown -R $(whoami) /usr/local/lib/node_modules

Composer

This is a package manager for PHP, to install run:

brew install composer

PHP Coding Sniffer (phpcs)

We consider coding standards very important when we develop so in order to help and guide the team and keep our code consistent we use phpcs, this tool detects PHP errors and violations within a defined set of rules/standards. It points out the violations within an IDE (much like spellcheck) and gives you alternatives or reasons for the violation. We use the WordPress Coding Standards as a base for our ruleset.

To install phpcs run:

composer global require squizlabs/php_codesniffer

You will now need to add your global composer bin directory to the PATH variable in ~/.bash_profile. I use nano as my preferred command line editor but feel free to use whatever you want:

nano ~/.bash_profile

Add the line:

export PATH=”$HOME/.composer/vendor/bin:$PATH”

Save and exit.

To check if you have phpcs properly installed run: which phpcs

If nothing is returned you may need to do a quick restart. This command should return the path to your phpcs install, something that looks like this (make a note of this line as we’ll need it later!):

/Users/current_user/.composer/vendor/bin/phpcs

We now need to install the WordPress Coding Standards, to do that run the following commands:

cd ~

git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs

phpcs –config-set installed_paths ~/wpcs

phpcs –config-set default_standard WordPress

You can check if everything is installed by running: phpcs -i

We now need to set up VSCode to make sure the extension is running properly, so open up VSCode and install phpcs and phpcbf extensions.

Once installed, open up the settings.json file for VSCode and add these two lines into the JSON object:

“phpcs.executablePath”: “/Users/current_user/.composer/vendor/bin/phpcs”,

“phpcs.standard”: “WordPress”,

The phpcs.executablePath should be the result of which phpcs.

Restart VSCode and you should be all set.

Bash Prompt

This tool displays information about the current git repository, not essential but very handy to have as it tells you what branch you’re on and colourises stuff. To install run:

brew install bash-git-prompt

Then open up ~/.bash_profile again and add:

if [ -f “$(brew –prefix)/opt/bash-git-prompt/share/gitprompt.sh” ]; then

__GIT_PROMPT_DIR=$(brew –prefix)/opt/bash-git-prompt/share

GIT_PROMPT_ONLY_IN_REPO=1

source “$(brew –prefix)/opt/bash-git-prompt/share/gitprompt.sh”

More info here: https://github.com/magicmonty/bash-git-prompt

Bitbucket/Github/Gitlab

Whatever repository service you use you will need an SSH key generated and added before you can effectively use it. To generate one run: ssh-keygen

More info here: https://confluence.atlassian.com/bitbucketserver052/creating-ssh-keys-935362650.html

Part 3: Extensions

This is a list of helpful Chrome and VSCode extensions the team have compiled over the years, some are essential, like phpcs and others very much depend on personal preference!

Chrome Extensions

VSCode Extensions

Final note

Keep liquids away from precious electronic things!

Let's Talk

Do you have a web design and build project coming up that you would like to talk about?