One of the great things about the world of JavaScript is that there are lots of tools out there that make development a smooth process. However, it can sometimes be frustrating getting these tools set up and working with each other. In this post, we’re going to have a look at how to set up a Gatsby project to get it working with TypeScript, ESLint and Prettier.

This is a classic development setup, with Gatsby generating a superfast statically built site and allowing us to use React and GraphQL out of the box, TypeScript giving us strongly typed JavaScript, ESLint enforcing code-quality rules and Prettier handling formatting.

Tools

Gatsby: If you haven’t used Gatsby before, I’d highly recommend it, especially for small to medium-sized projects. Gatsby produces a statically generated site, which means it’s super fast and secure. Check out Gatsby: Fastest Static-Site Generation Web Framework to learn more.

TypeScript: TypeScript is an extension of JavaScript which provides us with static typing. This allows us to catch errors before our code is compiled to JavaScript and run in a browser. Take a look at The TypeScript Handbook for more info.

Prettier: Prettier is a code formatter that is used to ensure our code is written in a clear and consistent manner. This allows individuals and teams alike to write in the same code style without thinking about it. Check out What is Prettier? · Prettier to learn more.

ESLint: ESLint is a linter which statically analyzes our code to find and fix bugs as we’re writing it (and without executing it). Have a look at ESLint - Pluggable JavaScript linter for more info.

NB - ESLint can also enforce code style, however we’ll be using Prettier to handle this so we’ll need to get Prettier and ESLint playing nicely together. If you’d like to know more about the difference between code formatters and linters, check out Prettier vs. Linters · Prettier.

Once we have all these things set up and working nicely together, we’ll have a great base for starting any project. TypeScript provides us with strongly typed JavaScript, ESLint analyses our code to find any problems (with the option of fixing them automatically) and Prettier ensures our code is written in a clear and consistent manner.

This post assumes no prior knowledge of setting up any of these things, we’ll cover everything you need to get started!

Prerequisites

Before we start installing and setting up the tools we’ve mentioned, we need to ensure we have the following things installed: NodeJS, Git and VSCode.

Mac

1. Install Homebrew: To install Node on Mac, you’ll need to install Homebrew. Open up terminal and type the following commands:

$ mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
$ eval "$(homebrew/bin/brew shellenv)"
$ brew update --force --quiet
$ chmod -R go-w "$(brew --prefix)/share/zsh"

To verify installation, type the command brew -v, which should output the version of Homebrew you have installed.

1. Install XCode: Next, we’ll need to install Xcode’s Command Line Tools as they are used by NodeJS. Type the command xcode-select --install. 2. Install NodeJS: We can now install NodeJS using Homebrew via the command brew install node. 3. (Optional) Install Yarn: The default package manager for NodeJS is NPM. If you’d like to use Yarn instead, you can install it using NPM via the command npm install --global yarn. 4. (Optional) Install Git: Git is highly recommended for version control and can be installed using the command brew install git if it is not already installed. 5. Install VSCode: If you don’t have it already, you can download VSCode from Visual Studio Code.

Windows

Download and install the latest Node.js version from the Node.js website.

(Optional) Install Git

Install VSCode: If you don’t have it already, you can download VSCode from Visual Studio Code.

Linux

The following instructions are for Ubuntu. For or other Linux distros see the Gatsby site Gatsby Site.

1. First, ensure your distribution is up to date using

sudo apt update
sudo apt -y upgrade

2. Next, install Curl

sudo apt-get install curl

3. Now we can install Node Version Manager (NVM) using Curl

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

4. Now verify that you have NVM installed using the command below. It should output the version of NVM you have installed with nvm --version 5. Install and set the default of node that you’re going to use

nvm install 14
nvm use 14

Setting up a Gatsby Project

Now that we have Node installed, we can go ahead and install the Gatsby CLI using NPM or Yarn

npm install -g gatsby-cli

or

yarn global add gatsby-cli

We can now go ahead and create a new Gatsby project via

gatsby new

Enter the required information that the Gatsby CLI asks you. Select ‘No’ when it asks you if you’ll be using a CMS or a styling system (unless you want to add these now). Then select ‘Done’ when it asks you “Would you like to install additional features with other plugins?”. Finally, select “Yes” and your new Gatsby site will be built.

You can run your site by navigating to your site directory via cd your-gatsby-site-name and typing gatsby develop. Open your browser and go to the address localhost:8000 to see your site up and running.

Setting up TypeScript

Luckily for us, Gatsby supports TypeScript straight out of the box! We just need to make a few minor additions to get it working. First, we need to add gatsby-plugin-typescript to the plugins array in our gatsby-config.js file

// gatsby-config.js
module.exports = {
	siteMetadata: {
	siteUrl: "https://www.yourdomain.tld",
	title: "TestSite",
	},
	plugins: [`gatsby-plugin-typescript`],
};

Next we need to install our type definitions for React and React DOM. This is done using the command line via

npm install --save-dev @types/react @types/react-dom @types/node

or

yarn add --dev @types/react @types/react-dom @types/node

Now we need to add a tsconfig.json file, which will contain our TypeScript rules

// tsconfig.json
{
	"include": ["src/*"],
	"compilerOptions": {
		"target": "es5",
		"jsx": "react",
		"allowSyntheticDefaultImports": true
	},
	"exclude": ["node_modules", "public", ".cache"]
}

Lastly, we just need to change our .js files to .tsx files and we are good to go!

Installing Prettier

The next thing we need to do is install Prettier.

1. Install Prettier

npm install --save-dev --save-exact prettier or yarn add --dev --exact prettier

2. Create a .prettierrc.json file and a .prettierignore file in the root directory of your project (where the gatsby-config.js file is)

// .prettierrc.json
{
	"semi": true,
	"tabWidth": 2,
	"printWidth": 100,
	"singleQuote": true
}

# .prettier.ignore
.cache
package.json
package-lock.json
public

3. Now we’ll get Prettier to work with VSCode. Install Prettier - Code formatter from the extensions marketplace in VSCode

4. (Optional) Format on save - if you want your editor to fix problems every time you save,

go to VSCode Settings, navigate to Text Editor > Formatting and enable Format On Save. Now click the Open Settings (JSON) icon in the top right hand corner and add the following

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}

Installing ESLint

The last thing we need to do is install ESLint and get it working nicely with TypeScript and Prettier.

1. First we’ll install ESLint dependencies and the things it needs to work with TypeScript

npm install --save-dev eslint-config-react-app gatsby-plugin-eslint eslint eslint-webpack-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin or yarn add --dev eslint-config-react-app gatsby-plugin-eslint eslint eslint-webpack-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Now we need to create an eslintrc.js file and a .eslintignore file

// eslintrc.js
module.exports = {
	parser: '@typescript-eslint/parser',
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended',
	],
	plugins: ['@typescript-eslint', 'react'],
	rules: {
		'react/prop-types': 'off',
		'@typescript-eslint/explicit-function-return-type': 'off',
	},
};

// .eslintignore
node_modules

Getting ESLint with to work Prettier

1. To get ESLint and Prettier playing nicely together, we’ll need to first install some dev dependencies

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

2. Then we need to add the following to our eslintrc.js

// eslintrc.js
module.exports = {
	parser: '@typescript-eslint/parser',
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended',
		'plugin:prettier/recommended',
	],
	plugins: ['@typescript-eslint', 'react', 'prettier'],
	rules: {
		'react/prop-types': 'off',
		'@typescript-eslint/explicit-function-return-type': 'off',
		'prettier/prettier': 2, // This will cause Prettier problems to error
	},
};

And that’s it! Prettier and ESLint should now behave nicely together. We hope that this post has been useful and it allows you to get cracking on some super awesome projects!