(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 93digital 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 93digital 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
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!
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 93digital 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:
This may take a while if you don’t have it installed so have a cuppa.
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
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.
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
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:
Add the line:
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!):
We now need to install the WordPress Coding Standards, to do that run the following commands:
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
Once installed, open up the settings.json file for VSCode and add these two lines into the JSON object:
The phpcs.executablePath should be the result of which phpcs.
Restart VSCode and you should be all set.
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
source “$(brew –prefix)/opt/bash-git-prompt/share/gitprompt.sh”
More info here: https://github.com/magicmonty/bash-git-prompt
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
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!
- 30 Seconds of Knowledge
- Ad blocker
- Cache Killer
- Redirect Path
- Tag Assistant (by Google)
- Website IP
- Better Align
- Bracket Pair Colorizer
- Color Highlight
- Editor Config for VS Code
- Excel Viewer
- Highlight Matching Tag
- IntelliSense for CSS class names in HTML
- MySQL Syntax
- npm intellisense
- One Dark Pro
- PHP Debug
- PHP Intelephense
- PostCSS syntax
- Prettier – Code formatter
- Prettify JSON
- Project Manager
- SCSS IntelliSense
- Settings Sync
- Simple React Snippets
- WordPress Snippet
Keep liquids away from precious electronic things!
Stop starting and start finishing: Why managing WIP works
93digital make it to the finals of the UK Digital Experience Awards 2020
Do you have an exciting strategic project coming up that you would like to talk about?