How To Setup Next.JS with TypeScript, Prettier, ESLint and Husky

Learn how to set up ESLint, Prettier, and Husky to consistently write and style your code. We'll be using a TypeScript and Next.JS project to demonstrate how you can set up Visual Studio to lint and format your code whenever you hit save, as well as setting up pre-commit hooks to check your code for style consistency using Husky. Grab the code used in this video here: https://github.com/jarrodwatts/code-l... The resources I used in this video: Prettier: https://prettier.io/ ESLint: https://eslint.org/ Husky: https://www.npmjs.com/package/husky For the text version of this video, and step by step code snippets: http://blog.jarrodwatts.com/nextjs-es... Other helpful links: Text version of this video: https://blog.jarrodwatts.com/nextjs-e... Find me: Website: https://jarrodwatts.com Twitter:   / jarrodwattsdev   GitHub: https://github.com/jarrodwatts Buy me a coffee: (https://www.buymeacoffee.com/jarrodwatts) Timestamps: 0:00 - Introduction 0:47 - What we're building 1:12 - Creating the Next.JS App 1:39 - TypeScript 2:22 - ESLint 3:57 - Prettier 5:22 - Visual Studio Code 7:04 - Husky 9:09 - Important Note 9:52 - Conclusion In this guide I'm going to run through how you can: Setup your Next.JS projects using Typescript, ESLint, Prettier, and Husky. Lint and format your code to align to the style rules you defined in config. Auto-format and auto-style your code whenever you click save. Check if your code meets all of your style rules before you git commit. Use and extend Google's Typescript style guidelines.