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.

Prerequisites

Mac

$ 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"

Windows

1. Download and install the latest Node.js version from the Node.js website.
2. (Optional) Install Git
3. Install VSCode: If you don’t have it already, you can download VSCode from Visual Studio Code.

Linux

sudo apt update
sudo apt -y upgrade

sudo apt-get install curl

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

nvm install 14
nvm use 14

Setting up a Gatsby Project

npm install -g gatsby-cli

yarn global add gatsby-cli

gatsby new

Setting up TypeScript

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

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

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

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

Installing Prettier

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

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

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

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

Installing ESLint

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

// 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

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

// 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
	},
};