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

[@JarrodWatts]

Hey everyone! The other day Vercel announced Next.JS 11, which includes built-in support for ESLint. You can still follow this tutorial as it will work 100% - but if you are using Next.JS 11 you can now run "next lint" as a script in your package.json file as well. This next lint command will use your .eslintrc file, and will also include rules specific to Next.JS, (e.g. using tag instead of tag). All you'll need to do is just update to version 11, and add "next-lint": "next lint" as a script in your package.json file. Then run npm run next-lint. Read more here: blog.jarrodwatts.com/whats-new-in-nextjs-11

[@arabsight]

thanks for the content, just a quick tip: you can run create-next-app with "--ts" flag to get a typescript project ready.

[@danielnadar75]

Thanks brother! This is now our config going forward! Keep up the awesome work.

[@danielbennett1192]

Great content, love this style of tutorial. Fast, well explained and no filler.

[@VimalMistry10]

Finally found right video for eslint 😍

[@samuel.nunezm1]

Simple, straight to the point and it worked perfectly for me. Thanks man!!

[@adimaralimuddin96]

seems like a new great high quality channel. worth subscribing! thanks for the content by the way. real great help.!

[@jonathanrees47]

You are a wizard! Thank you for helping me satisfy my OCD and code more efficiently.

[@m.rivaldiirawan2374]

ohh damn, Am I also OCD? 🥲

[@hassaniyouness8024]

the first 30s second of the video made me like and subscribe the way y introduced the need for these tools is nice, keep the good work bro

[@JarrodWatts]

Thank you bro! It takes a bit of time to edit the intros together, so that is really good to hear!

[@hassaniyouness8024]

@@JarrodWatts it's worth it it will make you stand out from the others 😉

[@Xenon77x]

Your video quality has a lot of potential. Keep up the good work

[@JarrodWatts]

Thank you! Putting some decent time into editing them all together so I appreciate it!

[@sanketss84]

Thank you this has been super helpful also your narration and flow is spot on.

[@EagerEggplant]

I am ROFLing at those husky feedbacks xD

[@jasoncprince]

Just a couple things I noticed. - The require-jsdoc rule was deprecated in ESLint v5.10.0 and can be disabled. - The react/react-in-jsx-scope rule will throw an error if a component files not import React. With React 17, which Next.js now ships with, it is no longer necessary to import React and thus this rule can be disabled.

[@JarrodWatts]

Thanks a lot for sharing your wisdom Jason! I've pinned your comment so everyone else can see too

[@Fullflexno]

Nice video. Cheers from Norway!👍👍

[@vitorpereira7606]

Awesome video man! I will surely use you video when I start my Next projects.

[@JarrodWatts]

Thank you Vitor! It's an awesome tool to work with

[@zubairimtiaz4986]

this setup saves a lot of headache.

[@frankbarros4362]

Such an excellent video - subscribed!

[@RoshanKrSoni]

you deserve millions bro :) Thanks for this

[@JarrodWatts]

Thank you so much Roshan! Glad you liked it.

[@jacob8225]

I follow your step, but when I enter npm run test-all, it shows Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

[@andreas_keller]

Awesome! And great editing as well ;-)

[@JarrodWatts]

Thanks Andreas! I've been working hard on improving my editing, so that means a lot!

[@santhosh3374]

I'm the 2000th viewer 🎉 Informative vid too!

[@JarrodWatts]

Wooooo 🥳 thanks for being the 2000th viewer on my first ever 2000 view video! 😂 Really appreciate you watching and for the kind feedback!

[@petarkolev6928]

Thank you for the amazing video!

[@vucaotan9903]

Hope u make more vid like this

[@JohnGreen-qc5xb]

whats the difference in just using the vs code extensions, compared to downlaoding them using npm i and setting up config files?

[@JarrodWatts]

Hey John, Great question - I don't think I've ever actually tried it, honestly. I think there are a few reasons why you'd want the packages and the configuration rather than just the extensions: 1. The configuration will stay consistent across devices (all the devs on the team can have use the same configuration) with the use of config files in the codebase. 2. You can configure each of the packages rules to your choosing, including individual rules and settings for each extension in the config files. 3. You can run the tools on the command line, e.g. (format all of your code at once by running prettier --write .) or (check all of your files match your ESLint config by running eslint .) I think that the extensions are more of a VS Code specific thing as well. They are just there to underline errors in red or warnings in yellow in the IDE, and to sometimes give you the option to fix it automatically. Using the VS Code extensions also offer additional features with the autosave fixes and things like that with the .vscode folder configuration as I displayed - which is awesome. But really, I'd say the difference is that the core tools are the packages themselves, whereas the extensions are just helpers to help visualise problems in the IDE. Hope I answered your question, maybe someone else can add on if they notice anything missing. :-)

[@MaganDesigns]

This is really awesome, Thank you. subbed.

[@JarrodWatts]

Thank you so much Jirkoz!

[@jacob8225]

and one more bug, when I npx husky-init npm install, it shows git can't find out. To solve it, I move all files of project to root of directory

[@drawwithraman3268]

@jacob8225 did you get any solution?

[@sharizart]

great tutorial!

[@leopolddelassence5224]

thank you very much sir

[@CuongNguyen-xw8qu]

thank you so much!

[@JarrodWatts]

No worries! Really glad you found it helpful :)

[@lulungsatrioprayuda9931]

i have some of trouble sir when i try to install "prettier --write ." its throw argument like this "'prettier' is not recognized as an internal or external command, operable program or batch file." i have already path of npm at user but still doesnt work would you like to help me? thank you

[@lulungsatrioprayuda9931]

sad i found it the solution is must run it with"npx prettier --write ." and it will run as well hehe

[@defilogic6726]

These instructions are outdated with Next.JS 12 out. My .eslintrc.js isn't formatted correctly and I can't call prettier from the powershell. I don't know why. any ideas?

[@ashiqdey]

Awesome man

[@bosphoramus]

thank you

[@JarrodWatts]

No worries Tony, glad you found it helpful

[@liam8469]

Hi Thanx. The video is awesome, but I got some issue when config husky: Whenever I change something in pre-commit file (.husky/pre-commit), I will receive when I run git commit : fatal: cannot run .husky/pre-commit: No such file or directory But it works fine if I keep the original pre-commit file. Anyone with the same issue?

[@alexandrn.5943]

cool, thank you bro :)

[@aram5642]

I don't understand why it is needed to install prettier to do the job eslint fixers could, and then shortly after installing Prettier - install yet another config package to avoid conflicts between Prettier and eslint.

[@supa1009]

Good setup, I would only add lint-staged to husky, so that only staged files are linted.

[@paulbrown6792]

Very Helpful :)

[@JarrodWatts]

Thanks Paul! Really good to hear you found it helpful

[@Gohel95]

Thank You So Much, You saved my A**, BTW you have great voice. God Bless You.

[@mrjohn1172]

Thank you for the great content. But I'm confused because on my vscode, I already have linting errors without ESLint and only typescript. From where the linting come from in this case? Is TypeScript have a default linter included by default?

[@JarrodWatts]

Hey mate, thanks for the kind feedback :) I don't know for sure since I can't see your code but maybe you have a VS Code extension installed, like the ESLint Extension for example. Another thing you might be seeing is the problems that the TypeScript compiler points out.

[@mrjohn1172]

​@@JarrodWatts Damn that was a quick answer! Thank you for your response I really appreciate :) I don't have the ESLint Extension, but I have the default Nextjs tsconfig file which come with alot of default settings. And when I hover on a lint error, I see "TS" right next to the error message, so i'm guessing TypeScript really has a linter included but based on the tsconfig file? For example, when I import something that I don't use, it will warn me - exactly like ESLint does, so that's why I was a little bit confused. I'm a beginner also, so maybe I'm just stupid XD

[@bwanamaina]

very nice 👌

[@michaelscofield2469]

please make a new one

[@alexk9836]

Why didn't you show how to use lint-staged? :(

[@JarrodWatts]

Hey Alex, sorry about that - thanks for the feedback though! I personally haven't set up lint-staged in my projects, but I'd imagine that it's pretty similar to the tools I went through in the video. Let me know if I can help in any way!

[@conceptcoder]

Man... your a look like "Fireship"...