Solving ESLint Problems

Introduction to the Problem

Today, I had an extremely challenging day wrestling with a perplexing error message. It threw me off balance and consumed my entire day. Let me walk you through the roller-coaster of emotions and problem-solving that I went through.

The day started with an error message that left me scratching my head:

The error says, that it needs the parserOptions value set in the .eslintrc.json which needs the path to your tsconfig.json file. Ok! Let’s add it…

I diligently added the required line to the .eslintrc.json file, hoping it would resolve the issue. Alas, when I ran ESLint again, to my dismay, I was greeted by the same stubborn error. Frustration crept in.

I had a similar problem like this before and only had to add the lines from above inside the .eslintrc.json files inside the respective packages (folders), and not in the root file itself. But since I already have it that way, it cannot be the problem this time …

Let give Google a shot.

Panic Mode: Trying Everything

After scrolling through the search results, I gained a bit of panic. No one has my issue!? How can this be?!

I tried narrowing down the issue, and it looked like I was not able to resolve typed problems by @typescript-eslint/parser, but why are the other ones working!? I tried following the ESLint installation site. Changing paths. Nothing helped.

The thing was, it was already working on another (but older) project. Are the dependencies the issue? I tried following this hint and used the exact ones as the old project does, but it was still not working.

Panic is rising.

I created a new clean project generated by nx. Another one just like mine. Same thing, doesn’t work.

I created a new, clean standalone project for react.js. This time it worked? I am completely confused. I tried running the linting command in the terminal and this works apparently? I was thinking… if it works in the terminal, then the project itself is correctly configured. I am not seeing the error in VS Code… so it’s the ESLint plug-in?

A Glimpse of Hope: Checking the Extension

I’ve googled about the ESLint plug-in, and found something very interesting. There is a settings file in which I can set the working directories. I was very hopeful and tried that out. There is a new update which allows u to use “auto”. I typed that in and saved.

Nothing happened. My anger grew. I wanted to flip tables. What was going on?!

One LAST brain cell kept holding onto hope and said to me, “try reloading the extension”. I did. And to my upper surprise, it worked!

Conclusion

My emotions were mixed—relieved to have found a solution, yet annoyed that it was a single word and a reload away all along. I felt both elated and exhausted.

As I couldn't find a single solution to this peculiar problem on the internet, I realized I must share my experience and newfound solution to help others save their precious time and sanity.

I'm still uncertain why the extension worked flawlessly before in different projects, but not this time. Perhaps the new project structure played a role, but I'm as perplexed as ever. I will keep a watchful eye on this and update you in a future post if I make any new discoveries. For now, I've learned to approach extensions with a healthy dose of skepticism 🫠

Hope you enjoyed reading my blog post!