Fixing Our ESLint Integration

In This Lesson

I Ran into a ReferenceError and realized our ESLint wasn't working. In this lesson, we'll take a brief aside to fix the linting within our project so it works with ESLint v9

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

>> Okay. So I ran into this issue in the next lesson as I was recording it. So I thought I'd just stop and record this to put before
this next lesson so that we can capture it before it becomes an actual issue. So I ran into this reference error, cannot access with organization before initialization,
and that's coming from the difficulty model where we extend and compose in our base model, and then the with organization mixin that we have on that model. Now, as you can see,
we have this import of with organization, so it is actually initialized. I think the underlying issue that we're running into here though is
a dependency loop as it was introduced whenever I imported one of the controllers that we were working with. So I think the controller imports a model that imports
the organization before the with organization actually exists, or something of the sort like that.
But all of that would be a non-issue if our linting was actually in place. So something I just noticed is that this file here,
our version one route definition file actually has not been linted and has not been getting our lint rules applied to it. For example, the AdonisJS default lint rules
prefer single quote instead of the double quotes, and also prefers lazy loading controllers for a couple of reasons. First and foremost, if you have a lot of controllers,
lazily loading them as needed can be a performance boost for your server, especially during boot,
but lazily loading them also is needed for hot hook, which is the hot module reloading mechanism AdonisJS uses underneath
the hood for our dev server to hot swap changes as we make them to our files. There's also a couple of formatting issues here that
lint would change as opposed to how I have it currently as well. Now, the reason I believe our lint rules aren't working at present is
because AdonisJS switched over to version 9 and version 9 had a breaking change that I did not pick up when as I was updating this project and its versionings.
So within our package.json file, we have this eslint config that previously worked. It worked throughout our building with AdonisJS on Inertia series as we were working on that,
but it's currently not doing anything as we've just seen inside of our version one route file. So what we need to do instead is apply an eslint.config.js file,
which is what eslint version 9 now prefers and looks for by default. So within the root of our project, let's do eslint.config.js,
and let's go ahead and import config app from
@adonisjs/eslintconfig and then export default and call config app as a function.
This is included by default now within the web starter kit for AdonisJS version 6, and so now we have it inside of this project here too. If with just a simple inclusion,
we jump back into our version one file, we might not see anything take place here quite yet. Let's go ahead and do a command shift P, search for reload window,
and just go ahead and have everything reload there. With that set, we now see a bunch of red squigglies taking over our route definitions,
and that's the eslint now complaining about all of the things that we have going on within this file. Now, on save, I have my Visual Studio Code set up to fix
these eslint issues that it can fix on its own. So if I hit "Command S" to save, we'll see that all of these red squigglies magically go away,
and we have some formatting changes. Our controllers change from just direct imports to now lazy imports, our quotes change from double quotes to single quotes,
and then obviously we have some additional line breaks that plopped onto the screen here as well. If that did not happen for you,
what you want to do is head into your Visual Studio Code extensions, search for eslint, make sure that you have the one from
Microsoft here installed within your Visual Studio Code. Once you do and you have it enabled within your workspace as well,
then we can hit "Command Shift P" again and open up our user settings JSON preferences, and you want to make sure that you have this section right here
added to your JSON preferences, editor.codeactions on save, and then set the source.fixall.eslint to explicit.
With that, whenever you save now, anything that eslint can fix on its own, it will fix on its own, as we've just seen within my version 1 route definition file here. I want to apologize,
I did not notice until just as I was recording this next lesson, that this was not happening by default for us.
It's easy to just not notice it until it actually causes some issue for you. Now that we have that in place, ready to go, all should be good.
Now that we have that fixed up, let's go ahead and jump back into our terminal, make sure that our server booted up a-okay, and it did indeed.
You can see that our watch mode is set to HMR, which is hot module reloading, which is what our lazily imported controllers are perfect for. So great. Now we're ready to move on to the next lesson.
Apologies again about my miss there and for this brief aside.

Adding an API to an AdonisJS Web App

43 Lessons

5h 31m

Introduction

API Authentication

Getting Started with APIs

Organization Resources

Courses

Searching

Rate Limiting

Rate Limiting an Organization's HTTP Requests

13m 59s

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.