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:
github.com/jarrodwatts/code-l...
The resources I used in this video:
Prettier: prettier.io/
ESLint: eslint.org/
Husky: www.npmjs.com/package/husky
For the text version of this video, and step by step code snippets:
blog.jarrodwatts.com/nextjs-es...
Other helpful links:
- Text version of this video: blog.jarrodwatts.com/nextjs-e...
Find me:
- Website: jarrodwatts.com
- Twitter: / jarrodwattsdev
- GitHub: github.com/jarrodwatts
- Buy me a coffee: (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.
4 июл 2024
