Supercharging Frontend Development with VS Code

These past few days, I dove into Visual Studio Code and TypeScript in an attempt to get a better workflow going with GraphQL / React apps. It's been a few months since evaluating the tools I use for developing every day apps, and I've found some amazing stuff. If you implement all these things and switch to VS Code, you're going to be shocked at how many bugs you catch even before saving a file!

ESLint + GraphQL!

This is the biggest developer life hack I've ever come across. Using GraphQL is the gift that never stops giving. Thanks to apollo-codegen you can generate types on the client side from your GraphQL schema! It looks like this:

//  This file was automatically generated and should not be edited.

export type announcementsQuery = {
  // Daily announcements
  announcements: Array<{
    title: string;
  } | null> | null;
};
/* tslint:enable */

It will only generate types for queries you're actually using, instead of adding types for things not in use on the frontend.

As if that wasn'…