DEV Community

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

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.