The basics

Your development environment

Having an ergonomic physical working environment is important and we’ll provide guides on how to achieve this whether you are working from home or in the office. However, this guide is geared toward your virtual space and how you can excel there.

It’s not all about tools, but they certainly help. Having your computer set up in a way that compliments your workflow is crucial.

This guide assumes you are running macOS, but many of the concepts and suggestions still apply no matter what OS you are running.

Code editor

It’s recommended that you use Visual Studio Code, it’s a full featured IDE with IntelliSense and a built-in command line.

We understand that some developers may wish to use other code editors and that’s okay, but the content that follows will be specific to VS Code. Having said that, many of the suggested extensions are available for other editors.

JOKE: I’ve been using Vim for two years now, mostly because I can’t figure out how to exit it.

Once you have your IDE installed you’ll probably want to make it your own by adding themes and extensions. While we’ll leave the theming up to you, here are a few suggested extensions.

Suggested extensions

Extensions are a way to supercharge your IDE. There are thousands of extensions available for VS Code and it can be overwhelming. Here are a few that we recommend.

ESLint - Integrates ESLint JavaScript into VS Code.
Prettier - Code formatter.
Code spell checker - Spell checker.

Suggested settings

Your IDE has a bunch of settings you can configure to make it your own.

VS Code settings

Formatting on save is a great way to keep your code consistent and clean, this works especially well with Prettier. You can enable this by adding the following to your settings, Code > Preferences > Settings.

Git - version control

Next up, you will need Git installed on your computer. Below is from the Git website:

There are several ways to install Git on macOS. The easiest is probably to install the Xcode Command Line Tools. On Mavericks (10.9) or above you can do this simply by trying to run git from the Terminal the very first time.

git --version

If you don’t have it installed already, it will prompt you to install it.

If you want a more up to date version, you can also install it via a binary installer.

Set up SSH keys

To interact with code repositories you will need to set up SSH keys. You can follow the instructions below to do this.

Adding SSH keys to GitLab

Node and npm

At Squiz, we use npm to manage our packages.

You will need Node and NPM installed globally on your computer. You can download the latest version of Node, which includes NPM below.

While we acknowledge other package managers exist and may be superior in some ways, we have chosen to use NPM as it is the most widely used and has the most support. Additionally, our CI scripts rely on NPM and we have a lot of projects that use NPM.

Node version management

Now that you have Node and NPM installed, you’ll need a way to keep the versions consistent across projects. This can be a headache when jumping between projects. Legacy projects may use an old version of Node and this can cause all sort of issues.

The best way to do this is to use Volta. You’ll need to install Volta globally on your computer. Now, when you jump between projects your Node and NPM versions will automatically change to the correct version provided you have the config in the package.json.

"volta": {
    "node": "18.15.0"
}

Many legacy projects might not have Volta config or use Node Version Manager NVM. While you’re in there please apply the necessary Volta config.