Install ESLint

[00:00:00]
>> Okay, we're ready to create our little bit of source code here. So going back to your terminal, or you could do this in your editor if you want, we're gonna make a file called source. And we're gonna create a TypeScript file, Index.ts within that folder, here it is.

[00:00:21]
And if you go to the course website, definitely go to the course website for this, I have a bunch of starter code over there. This whole thing, grab this and drop it into that source code file. And we'll look at what these things do but that's your starting point code.

[00:00:44]
We have two things in this file. We have a function and a class. The function appears to take an instance of the error class. And create a string representation of it. Maybe we're printing this out to the console or something. Deferred, you can think of this like an inside out promise where you have access to resolve and reject from the outside.

[00:01:17]
Just like a promise and you also have access to the promise. So this is sometimes useful if you wanna pass a promise around and let someone from the outside say when this work is done as opposed to the work being represented inside the promise. These are two things that I sort of pulled out at random from the chat app or will end up depending on this.

[00:01:44]
It's time for us to try to build so actually you shouldn't have this problem and I currently don't. There is no dist folder here, I would delete any existing dist folder and now I'm gonna run yarn build. Let's see what we get. A dist folder appears, it's dark gray here which to me that means it's git ignored.

[00:02:09]
That's how my face code is set up. We've got an index js. That's interesting, I didn't save this file [LAUGH] or this one. [LAUGH] Not the first time that's happened. Hey, there it is. So, here's our deferred class and there is our stringifyErrorValue function. Note, we've got exports.stringifyErrorValue here.

[00:02:40]
We've got a stringifyErrorValue, stringifyError and then we should have exports.Deferred equals deferred. This is indicating that it's a common JS module, right? We're not seeing any export default here. We said we were spitting out CommonJS right here. And we could have it spit out other types of modules if we wanted to, like AMD.

[00:03:10]
That's interesting, haven't seen those in a while. It's gonna see a lot of requires, yep. There you go, there's an AMD module But we'll stick with CommonJS. So there we go. It's a great time to make a git commit because our build is working and make sure you add everything.

[00:03:41]
You may notice that even though we're within a sub part of our workshop project, the yarn.lock, there's one yarn.lock file, it's at the root of our project. So don't fear in the habit of doing something like this, that's not gonna catch the lock file, just add everything. And we're just sanity checking this to make sure that our dist folder is not in there, it's not there.

[00:04:07]
This is our first time checking in git ignore, so, great. We'll say, Build is working, great. Next up we'll install the linter eslint. So we're gonna go yarn add -D for dev dependency, eslint. Did we do this already? I feel like we might have. Nope, that's new. Look at this, look what happened here.

[00:04:44]
I said to install eslint and I got @types eslint for free. What we're seeing here is a modern version of yarn supporting a plugin that's doing some work for us. So you can install a yarn plugin. It's called their TypeScript plugin. It lives inside your repo. And the purpose of this particular plugin is when you install a package, it will install the @types package too which is kind of nice.

[00:05:21]
And then it also will attempt to match the same version constraint. So if I did this, please actually do this. Latest eslint seven, that's disappointing. I guess it doesn't do that. I guess it just goes for latest. We'll just do that. Eslint making me a liar. All right, we'll run Yarn one more time.

[00:05:56]
Great, we've got eslint @types eslint. Now, we have a need for another config file, right? Linters are tunable, you can decide which rules you want, which rules you don't want, which files should various things apply to and they're big. They have a lot of different options. Thankfully, we have a nice little CLI option, yet again, to create a good starting point for us.

[00:06:24]
So, we're gonna run yarn eslint -- init. And we get a little choose your own adventure CLI thing going on here where I can use my up and down arrow keys to pick different stuff. So, here is what we're going to pick. And if you're still catching up, look on the course website.

[00:06:46]
The option that I'm going to choose is listed very clearly there. So it's asking us how do I want to use eslint? I would say detect syntax and find problems. I tend to not pick this option on the bottom. Code style, I use something like prettier for and I would prefer that to be just like run as something that happens before the build.

[00:07:08]
I don't like when people are getting errors because they didn't add a space before a brace or something like, people can get error fatigue. And this is also part of having useful constraints that aren't overly annoying and confining. So I just wanna use my linter to check syntax and find problems.

[00:07:28]
Code style I wanna handle not by bugging developers, but by running a tool that autoformats all of the code in a consistent way and they don't have to think about it, they don't have to address errors. By the time they open a pull request it's already taken care of.

[00:07:45]
All right, what type of modules are we using for this project? We're using JavaScript modules. Keep in mind, this is about your source code, not your build output. We have CommonJS, build output, but we're linting our source code and that's JavaScript modules. Which framework are we using? So, depending on your choice you make here, ESLint will install a nice React.js plugin that'll lint special React things or a Vue plugin that'll do that like lint for Vue stuff.

[00:08:15]
This is just a library, it's not React or Vue, so we'll choose none of these. Does your project use TypeScript? You bet it does. Where does your code run? Be careful here, there's a little different interaction you have to do. You can go down to node and check that, this is a multi select.

[00:08:34]
So you're gonna want to check both. You can also check neither. If you only checked one or the other, it would affect kind of what you're allowed to do. So for example, if you're only writing code for the browser, ESLint will set it up so you can't access process.env to get environment variables.

[00:08:55]
And if you're only running for node it's gonna say, that window object is not there, you can't reach for window.document, you're running in node JS, there is no window. So I checked both of these which what I'm trying to get to here is something that asked me to play by regular JavaScript rules, something that can work equally well in Node and in the browser.

[00:09:19]
I'd like to start here because I don't know how my module is going to be used. And if I make an assumption one way or the other, I'm limiting what can be done with this thing. Could be both, could be something used for server-side rendering on the server and then in the browser for the client-side code.

[00:09:37]
All right, what format do I want my config file to be in? You could have YAML, you could have JSON or you could have JavaScript. We're gonna choose JavaScript. You'll see why in a moment. So, based on the choices that we made, We're getting a list of plugins that ESLint is saying it wants to install.

[00:10:01]
We've got the typescript-eslint plugin and the typescript-eslint parser. And we would like to install those. Now I remember why ESLint 8 might be nice. It's installing with npm right now. I think if you were using ESLint 8, it would ask you which package manager you wanna install it with.

[00:10:25]
No worries, we can take care of that by running yarn, just to make sure all of that's represented in our lock file. It's gonna find those packages, it's gonna take care of installing them. And we should see, try not to save this file. Interesting, I'm just gonna push past this error.

[00:10:47]
I know exactly what's happening here. Let's actually resolve it. Let's use ESlint 8, I'll explain what's going on here. So we're gonna have to run yarn again. It's gonna get ESlint 8, we're gonna get a different set of questions, you can run yarn eslint -- init again. You're gonna get very, very similar questions.

[00:11:14]
So we're checking syntax, finding problems, JavaScript modules, none of these. Yes, we're using TypeScript. Select both, JavaScript, there we go. Would you like to install them now? Not with npm, but would you like to install them now? Yes, now it's gonna let us pick our package manager. So I'll explain the thing we hit.

[00:11:39]
It's a sneak preview of where we're going with this. In one of our packages in here, it's the chat package. In the package JSON, there's a piece of syntax that npm is unhappy with. Is it here? Here it is, npm doesn't know how to handle that, that is specifically a yarn workspace's thing.

[00:12:14]
So the fact that ESLint was not giving me the option to choose yarn, that's where we ended up with this problem. Another thing we could have done is just manually install those two packages for us.