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

Jarrod Watts
Jarrod Watts
40.2 هزار بار بازدید - 3 سال پیش - Learn how to set up
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:   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.
3 سال پیش در تاریخ 1400/02/13 منتشر شده است.
40,219 بـار بازدید شده
... بیشتر