GatsbyJS

GatsbyJS is a framework based on React for static frontend development. It's very useful to use it when you want to create a website or an app and you care about SEO (Search Engine Optimisation). Gatsby is using SSR (Server Side Rendering) on the build process. The output files are ready to deploy to your web server or to your cloud and are easy to index for Google bots and other search engine bots. 
Even if bots are capable of waiting for async requests for loading your web page content, by using a static website already rendered server side, all your content is available on the first request. It's make page view way more faster than other frontend frameworks and that's a really good point for SEO ranking.

Gatsby come with plenty of really cool plugins that make increase your dev speed and is based on a GraphQL data layer for manage your content. All this functionalities make Gatsby a really good tool to put in your dev toolbox.

Typescript & ESLint

By default, the Gatsby toolchain support JS and Typescript and use Prettier for code formatting. 
When I'm working on frontend project, I like to use the power of Typescript for type checking and ESLint for code formatting and linting. So, let's see how to configure this tool on a new Gatsby project.

Create and configure new project

First of all, install Gasby-CLI with NPM

npm i -g gatsby-cli

Use it for create the new project 

gatsby new [project name]

For avoiding conflicts between Prettier and ESLint, you can delete all files related to Prettier. It should be two files on the root of the project .prettierrc and .prettierignore. On package.json, remove prettier from devDependencies and the "format" script. You can delete the node_modules folder for cleanup.

Add Typescript and ESLint to your devDependencies

npm i -D typescript eslint

Let's create the tsconfig.json file with tsc command

./node_modules/.bin/tsc --init

For initialize ESLint, type the following command

./node_modules/.bin/eslint --init

You should select some options on the console for the initlialization. 

• How would you like to use ESLint? > To check syntax, find problems and enforce code style
• What type of modules does your project use? > JavaScript modules (import/export)
• Which framework does your project use? > React
• Does your project use TypeScript? > Yes
• Where does your code run? > Browser
• How would you like to define a style for your project? > Airbnb (Choose what you want)
• What format do you want your config file to be in? > JSON
• Would you like to install them now with npm? > Yes

If you don't want to turn crazy on each compilation, you can turn off the Strict Type-Checking option on the tsconfig.json.
If you're using VS Code, you can add the following json on your settings.json for format and fix linting problem on save:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

Your project is now configured and your files are now linted by ESLint. You just have to custom your rules in .eslintrc.json. If you choose the airbnb rules in the eslint CLI, you will see that the rules are really strict. So you can deactivate what you want.