DEV Community

SPeshov
SPeshov

Posted on • Updated on

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.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' //
      }
    }
  ]
};
Enter fullscreen mode Exit fullscreen mode

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",
}
Enter fullscreen mode Exit fullscreen mode

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
    }
  ],
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
attkinsonjakob profile image
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.

Collapse
 
wbali profile image
Balázs

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

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

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

Thread Thread
 
wbali profile image
Balázs • Edited

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

Collapse
 
pcdevil profile image
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!

Collapse
 
speshov profile image
SPeshov

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