How to Set Up ESLint in 2024 (For Beginners)

[@thecommoncoder]

What else would you like to learn about ESLint? Let me know! 👇

[@olabanjoolakunori5151]

Formatting imports and using the plugins that helop do that. Great video btw

[@thecommoncoder]

@olabanjoolakunori5151 I'm working on a video about prettier right now, and then I'll follow that one up with a video about using ESLint and Prettier together to do some auto formatting. Thanks for watching!

[@olabanjoolakunori5151]

@@thecommoncoder That's superb, thank you🙏🏾

[@minitext1]

eslint watch

[@whathuh6965]

Now this is how you make a tutorial. Simplistic, to the point, and accurately informative.

[@thecommoncoder]

Thanks! Glad you enjoyed it. 🙏

[@sarah-z8j6o]

Thank you for creating such an excellent tutorial on ESLint!!

[@thecommoncoder]

You're welcome! Glad it was helpful. 🙏

[@theVegan47]

Great video! Thank you for this straight to the point video with useful tips. I was confused by older videos and even chatGPT trying to help me set this up as they refer to older versions and file types. Subbed!

[@thecommoncoder]

Thank you! Glad it was helpful. 😊

[@yahyamohamoud2954]

Thank you Josh, it was great video

[@thecommoncoder]

You're welcome! Hope it was helpful. 😊

[@tuki.lopeza]

clear and concise!! thank you very much

[@thecommoncoder]

@@tuki.lopeza You’re welcome! Glad it was helpful. 😊

[@sergiocely10-dev]

Thank you for the video, it was very helpful.

[@thecommoncoder]

Happy to help!

[@Ahmed.Hadjou]

Awesome tutorial! keep up the great work!

[@thecommoncoder]

Thanks! Glad it was helpful. 🙏

[@SenthilkumarS-v5v]

Its really awesome

[@thecommoncoder]

Thanks for watching! 🙏

[@ArifaNadia-n2l]

thank you so much! this video helped me lot

[@thecommoncoder]

You’re very welcome! ☺️

[@naveendharni3534]

How do I see linting issues directly on VSCode instead of running the eslint command in the terminal every time? For example, in React, we have a rule that shows err/warning for missing dependencies in hooks.

[@thecommoncoder]

Great question! To see the ESLint errors directly in VS Code, you'll need to install the official ESLint extension. Here's a video I made on how to set that up: kzbin.info/www/bejne/r5SznWWEiqueqck

[@developermohib]

really helpful tutorial. thanks a lot

[@thecommoncoder]

Thanks! Happy to help. 🎉

[@LemmaGetiye]

Thanks a lot u saved the day. Thank you sir.

[@thecommoncoder]

Glad it was helpful! Thank you for watching. 🙏

[@LemmaGetiye]

can u show us how to configure it using .eslintrc.json. Thank you

[@Flamebamboo]

THANK YOU SO MUCH!!!!

[@thecommoncoder]

You're welcome! Glad it helped. 😊

[@MmM17000]

I have a project running Node 14.15 and I couldn't find any video that helped me, do you have any guide on how to install older releases of eslint? I tried specifing the version in npm, but then it broke other peer deps. Now I'm using tslint which works despite being deprecated...

[@thecommoncoder]

You should be able to use ESLint at version 8 which supports node 14.x. As far as the peer dependencies, installed packages shouldn’t have a peerDependency on ESLint since that is more of a devDependency (development concern). If it’s complaining about peers from another package, you’ll want to make sure that those are installed in your project, and listed in your “package.json since peers aren’t installed automatically in older versions of node.

[@user-iq334]

Great video, since most recourses are for older versions of eslint.

[@thecommoncoder]

Thank you! 🙏

[@AndreiGeorgescu-j9p]

Thank you for the video but in practice it is significant more complicated. First of all you have to enable flat config in vscode to prevent issues (many many things are broken in general in the ecosystem because of this), you need to combine it with typescript since most people use that as well as a number of other extremely common plugins and it leads to 10+ dependencies installed an a very different looking config file. That's not even mentioning framework integrations like astro or mega linters like Trunk

[@thecommoncoder]

@@AndreiGeorgescu-j9p Definitely agree that most setups are usually more complicated than this. A lot of the JavaScript ecosystem is needlessly complicated IMO, so I’m mainly trying to break down some of the individual pieces in simple ways to help people understand the fundamentals. Thanks for the feedback! 🙏

[@AndreiGeorgescu-j9p]

@@thecommoncoder it is because js isn't an intelligently designed language and is very imperative so it needs all of its faults made up for. In haskell or purescript you barely need any tooling because the language is inherently solid. With that being said a video on typescript integration with eslint would be fairly helpful. Particularly strict typing

[@KeshiNguyen0611]

how to use eslint to config path module with esm js with nodejs?

[@thecommoncoder]

The path module is built into Node, so if you run the eslint configuration wizard and select Node as the environment and JavaScript modules instead of CommonJS, I think you should be good to go. Hope that helps!

[@thydevdom]

Good Lord i was lost doing this on my own.

[@thecommoncoder]

Hope the video helped! Thanks for watching. 🙏

[@francischampagne6469]

How to install Eslint: 1. Don’t 2. Install Biome

[@thecommoncoder]

@@francischampagne6469 😂

[@thecommoncoder]

@@francischampagne6469 I’m going to make a video on Biome soon.

[@StephenRayner]

Biome………………………….

[@thecommoncoder]

I haven’t had a chance to use Biome yet, but I’m going to check it out and will probably make a video on it. StandardJS is another good option too if you want something that’s just plug and play. Thanks for the comment! 🙏