Why the terminal is my main tool

Gatsby recipes to add typescript
Photo by micheile

TLDR;
You can check the diff of the commit on GitHub

When you ship a new feature, moving back and forth between the documentation, the terminal, and the codebase is kind of a pain.

We need a better toolchain for that.

And I need a cli tool because I am an automation nerd.

Let me introduce you to gatsby recipes πŸ‘¨β€πŸ³. Open your terminal and run this command on the folder of your website:

gatsby recipes

and πŸ’₯ you just have to follow the steps of the cli to migrate your JavaScript codebase to TypeScript.

Select a recipe to run
Add a custom ESLint config
Add Jest
Add Gatsby Theme Blog
Add persistent layout component with gatsby-plugin-layout
Add Theme UI
Add Emotion
Add support for MDX Pages
Add support for MDX Pages with images
Add Styled Components
Add Tailwind
Add Sass
>>Add Typescript
Add Cypress testing
Add animated page transition support
Add plugins to make site a PWA
Add React Helmet
Add Storybook - JavaScript
Add Storybook - TypeScript

Step 1 / 4

Installs necessary NPM packages.

Proposed changes

NPMPackage:
* Install typescript@latest
* Install gatsby-plugin-typescript@latest
* Install @typescript-eslint/parser@latest
* Install @typescript-eslint/eslint-plugin@latest

Step 2 / 4

Installs the plugin gatsby-plugin-typescript in your gatsby-config.js.

Proposed changes

GatsbyPlugin:
* Install gatsby-plugin-typescript in gatsby-config.js

Step 3 / 4

Adds a tsconfig.json file to control how TypeScript processes your code.

Proposed changes

File:
* Write tsconfig.json

Step 4 / 4

After installing this recipe, you can add TypeScript code, components, and pages in your sites src directory.

Et voila!

We learned how gatsby recipes can improve your workflow with up-to-date and clear instructions.

One more thing.
If you learned something new, let me know andshare this article on Twitter.

Meet the author

David is a freelance developer and trainer specializing in cross-platform application development. He helped dozens of companies to ship their MVP and automate their process.

Gravatar for dleuliette@gmail.com

David Leuliette

Freelance React Developer

twitter
github
Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills across every touch point.