DEV Community

Cover image for Setting up a GatsbyJS starter with TypeScript, ESLint, Prettier and pre-commit hooks

Setting up a GatsbyJS starter with TypeScript, ESLint, Prettier and pre-commit hooks

Arden de Raaij on February 24, 2019

GatsbyJS, the static site generator on which my own blog is based, must be my favorite gateway technology. It learned me how to get comfortable wit...
Collapse
 
antoinerousseau profile image
Antoine Rousseau • Edited

Thanks for the post!
I was able to use TypeScript in my Gatsby project without the need of a tsconfig.json, is it really necessary and why?
Also, you can even write your Gatsby Node files in TypeScript too: github.com/gatsbyjs/gatsby/issues/...

Collapse
 
nickytonline profile image
Nick Taylor • Edited

You want the tsconfig.json so that you can configure tsc when you run it as just a type checker. At a minimum, you want the compiler option "noEmit" set to true, so it doesn't generate JS files (the default behaviour). We want Babel to do that. Also, for example, in my tsconfig.json, I have it configured for strict mode, github.com/nickytonline/iamdevelop....

Collapse
 
ardennl profile image
Arden de Raaij • Edited

Hi Antoine, thanks for the reply and kind words!

As far as I experienced, I did need a tsconfig.json in the root of my project, even if it only contained {}. But this was only to run the tsc command from an NPM script or the command line. If you are not using any type checking through the command line or NPM scripts, you can still benefit from type checking in your editor if it supports it. I guess in that case, you wouldn't explicitly need a tsconfig.json.

Collapse
 
nickytonline profile image
Nick Taylor

Nice! Here's my repo if you're interested. I was already on Gatsby, but switched to the Netlify CMS starter instead and then basically redesigned most of it and converted the whole codebase to TypeScript.

nickytonline / iamdeveloper.com

Source code for my web site iamdeveloper.com

iamdeveloper.com

Netlify Status

Hey there, I'm Nick and this is my site's source code. This site started off as a clone of the Netlify CMS Gatsby Starter (check it out!). Since then, I've tweaked it a lot and converted the codebase to TypeScript.

Feel free to peruse the code and/or fork it. 😉

Thanks to all the wonderful projects that made it possible to build this blog.

To get up and running:

  • clone the repository by running git clone git@github.com:nickytonline/www.iamdeveloper.com.git or git clone https://github.com/nickytonline/www.iamdeveloper.com.git
  • run npm install
  • run npm run develop to get up and running with the Gatsby development server.
  • Since the project uses Babel and not TypeScript as the compiler, a separate process is required to run type checking. Open another terminal and run npm run type-check:watch
  • If you're curious about why the Netlify CMS admin…

I even added Dank Mono to my prismjs setup so code snippets look more sharp.🔥

I use ESLint as well. Previous projects were always TSLint, but as you mention, tslint is on the way out.

Collapse
 
ardennl profile image
Arden de Raaij

Hey, that's dope! I'll definitely have a look at your site to see what kind of goodness I can steal from there. On that matter I was wondering, have you tried auto-generating type definitions based on GraphQL? I hade a try with graphql-code-generator but barely understood what I was looking at when I saw the output 😅. I'll have a look at it again when starting on the next post!

Collapse
 
nickytonline profile image
Nick Taylor

I don't auto-generate type definitions based on GraphQL. I'm actually still quite new to GraphQL. My Gatsby site is my only exposure to it so far. I'll check out that project though.

For now I explicitly type my data. See the github.com/nickytonline/iamdevelop... folder.

Thread Thread
 
ardennl profile image
Arden de Raaij • Edited

Thanks for your answer. Gatsby was my introduction to GraphQL as well! As I said in my article, it's a gateway-drug :D. I made my own types as well, but I feel that it should be trivial to automate. I just lack some knowledge. Hopefully, I'll have that fixed for the next blog post.

Collapse
 
ooloth profile image
Michael Uloth

Great article!

Are you still planning to write the follow up post you mentioned? I'd love to read it!

Collapse
 
ardennl profile image
Arden de Raaij

Thank you so much Michael! Yes I'm still planning to, I sort of need to get back my writing and experimenting mojo 😬

Collapse
 
ooloth profile image
Michael Uloth

Tell me about it! Other things tend to get in the way.

Here’s hoping the mojo returns. 🤞

Collapse
 
fedebabrauskas profile image
Federico Babrauskas

Thanks for the article!

I've made all the process successfully!

I'd love to see your next post about fixing those errors!