How to setup GatsbyJS starter with Typescript, ESLint, Prettier

Original post Here - with images 😅

In Short

1. Fork, clone and install the Gatsby default starter
2. Install gatsby-plugin-typescript and TypeScript
3. Configure tsconfig.json and type-check script
4. Converting files to TypeScript
5. Setting up ESLint & Prettier
6. Setting up VSC

1. Clone and install the Gatsby default starter

So yes just fork the Gatsby default starter to your own Github account and clone it to your local machine from there.

• Go to https://github.com/gatsbyjs/gatsby-starter-default
• Clone the repository to your local machine with git clone [e-mail]:gatsbyjs/gatsby-starter-default.git
• cd into the folder
• Run npm install
• Run npm run develop

And you are done with setting you your Gatsby starter and it's running , on http://localhost:8000/ and we can start to set-up TypeScript now!

2. Install TypeScript & gatsby-plugin-typescript and

TypeScript can be added to the devDependencies whilst Gatsby plugins should be added as a dependency:

npm install gatsby-plugin-typescript & npm install typescript --save-dev

And we need to enable the plugin gatsby-plugin-typescript in the gatsby-config.js file in the root of your project.

3. Add and configure tsconfig.json

Our config file should look something like this:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noUnusedLocals": false
  },
  "exclude": ["node_modules", "public", ".cache"]
}

4. Converting files to TypeScript

Start renaming  *.js files to *.ts and *.tsx (if they contain JSX).

We will need fixing the current type errors that TypeScript is screaming at us. I’m leaving the actual fixing of these errors for the follow-up blog post. For now, please bear with me as we set-up a linter.

5. Setting up ESLint and Prettier

To set up ESLint with TypeScript, Prettier and some React best practices, we’ll need to add a bunch of devDependencies:

npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react --save-dev

And after all packages are installed, let's add a .eslintrc.js file in the root of the project. Example of ESLint configuration:

module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  settings: {
    react: {
      version: 'detect'
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ['@typescript-eslint', 'react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },
  rules: {
    'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
    '@typescript-eslint/explicit-function-return-type': 'off'
  },
  overrides: [
    // Override some TypeScript rules just for .js files
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off' //
      }
    }
  ]
};

Adding Lint Scripts

To make life easier on ourselves we’ll add two lint scripts to our package.json

"scripts": {
  ...
  "lint": "eslint --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx",
}

Once called it will run on every `.ts,.js,*.tsx and *.jsx` file and shows you the errors.

6. Setting up the editor

Add this

"eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],

To your general settings.json

We also need to install type definitions for our packages but I will leave that for you, just google it and you will get the general idea.

I hope that this post gave you a basic idea on how to do the initial setup of GatsbyJS + Typescript + ESLint + Prettier

Comments

[Jakob Attkinson]

We will need fixing the current type errors that TypeScript is screaming at us. I’m leaving the actual fixing of these errors for the follow-up blog post. For now, please bear with me as we set-up a linter.

Any updates on this?
I feel a bit lost with all Binding element 'siteTitle' implicitly has an 'any' type. with no clear idea on how to fix them.

[Balázs]

Add "noImplicitAny": false to your tsconfig file, inside compilerOptions.

[Jakob Attkinson]

This would just disable the notification, not fix the actual problem. Is this correct?

[Balázs]

Sorry, yes. The TypeScript way is to set a type (or any) for your props like so:
type DataProps = { siteTitle: string }
const SomeComponent: React.FC<DataProps> = ({ siteTitle } => { ... }

Edit: For pages you should also use Gatsby's PageProps:
const SomePage: React.FC<PageProps<DataProps>> = ({ data, path }) => (
<>
<h1>{data.siteTitle}</h1>
<span>current page path {path}</span>
</>
)

[Attila Gonda]

Hello Stojan,

Thanks for the article, it helped how to setup my environment!

One quick note, in the "5. Setting up ESLint and Prettier" section you wrote npm add which is not an actual command. I guess it was due to switching from yarn and got you mixed up :)

Anyway, thorough article, thanks again!

[SPeshov]

Hey Attila! - glad it was helpful - and thanks for the note will update it right away!