Visual Studio Code

Challenge 6: Solution

Visual Studio Code

Check out a free preview of the full Visual Studio Code course

The "Challenge 6: Solution" Lesson is part of the full, Visual Studio Code course featured in this preview video. Here's what you'd learn in this lesson:

Mike walks through the solution to Challenge 6.


Transcript from the "Challenge 6: Solution" Lesson

>> Mike North: Welcome back. We're going to be adding TSLint as a task to finding our task JSON. Building a regular expression to kind of take that raw text output and make some sense of it. And then see if we can get the problem that you're looking to the right groups.

Right capture groups of that regular expression, so that these problems start showing up in our problems tab. So I'm just gonna copy this here. Go to our tasks.json here, and I'm gonna add this as a second task on top of what we built there before. And the, I'll just use it as a model actually.

So we'll say the task name is gonna be TSLint.
>> Mike North: The type, is going to be a shell. Why is this? Sorry the task name. One of the great things about this, if you know that like, we got some feedback here saying property name is not allowed. Even JSON is, there is some like type of information for JSON.

There is some domain that hosts a bunch of JSON Schemas, and it knows exactly what properties should be here and what shouldn't be here. So really helps, assists us in building this thing up reasonably. The command, is gonna be this, tslint, args are gonna be those.
>> Mike North: Something like that.

And we can try to run this and see what happens. So I did actually give some additional instructions. No I didn't. We're good. That must be the last exercise we're about to do. So when we run TSLint, we're gonna say run task, TSlint. Don't bother scanning the output, and here we go, we get some errors.

Mostly having to do with alignment and JSdocs and some consecutive blank lines being forbidden. I'm gonna grab this whole thing, this is a nice variety of errors, and we're gonna go back to our little regex helper here, paste those in, and we're gonna kinda start over. So this is pretty much right, it looks like I can just tell by this first result here, I should probably add a dash, as something that can be a valid part of a file name and everything else looks like I'm getting the complete file name pretty well.

Okay, so the next thing is you've got a bracket and then a line number. That's gonna be a zero through nine, and then plus just means one or more of that character.
>> Mike North: See pattern error, zero through nine plus.
>> Mike North: Why am I getting a pattern error?

>> Speaker 2: I knew that.
>> Mike North: Cuz a bracket as a character literally you need to escape it. Cuz it means something in regular expression. So that was the fix there, literally the bracket. So there's one, here is the other comma. Basically another thing here we'll add some number of characters of white-space, and a close.

So now, you can see, we've got group 1 is gonna have a filename there, and then 68, and then group 3 is gonna be this number 1 here. We've got a colon, some space after that, and then everything else.
>> Mike North: We'll call that the message. And I do, I did actually miss this first thing, that that, there's a thing for that and it's called the severity.

So we can add that at the beginning and we'll just say it has to be a capital letter
>> Mike North: It'll be capital letter, one or more of them. So effectively here, if we look at just one of these matches, we've got error as group 1, group 2 is the filename, group 3 is the row number, group 4 is the column number.

And then group 5 is this message consecutive spaces are not allowed. So we'll take this, probably have to switch my color scheme again, so I can tell the difference between like red and off red. We'll go to this one.
>> Mike North: Pattern problem matcher, so we define an owner and let's call this one, maybe it will allow us to do that, let's see.

Pattern is gonna be first the regex. We'll paste that in and then fix all of the things we have to double slash, just cuz it's more special character treatment. You do have to pass a string into this, you cannot pass a regular expression. The reason being, this is JSON, it's not a JavaScript file, and regx is not a valid value in a JSON file.

So there's our regx and then the first thing we have is severity, so that's group 1. Then we have a file name, that's group 2. Then we have a line number, that's group 3. 4 is gonna be the column number and the last one is the message, that's 5.

If we save that and rerun our task.
>> Mike North: We've got six problems. And if we open that up, we've got this line stinks, that's still here. Cuz, typically you'd have something you'd rerun over and over, and it 'll eventually stop saying this line stinks. That's not the way that this piece of software works, it always says this line stinks.

Cart-store, it is, we have an issue here. We couldn't open the file, I do like the way it structured here. One thing is, I see that we got an absolute path here and relative path, there is something we forgot and that is, what is it called?
>> Mike North: It's a.

>> Speaker 2: Well, file location.
>> Mike North: It's inside the problem matter?
>> Speaker 2: Yeah.
>> Mike North: Yep, file location and that's gonna be an absolute path, good catch thank you.
>> Speaker 2: I cheated, I looked at your repo.
>> Mike North: You looked at my solution?
>> Speaker 2: I did.
>> Mike North: All right, so now if we run it one more time, run the task.

Open up our problems tab. Okay, all of our absolute paths fell away. And now if we click on these, it's actually showing us that it was apparently supposed to like, hinting on these apps, it's really important that we do that for some reason. Save that and if we were to run again.

>> Mike North: It should stop complaining about that feature. So any type of thing like this, when it's a task that generates this output, you have to explicitly run it in order to, for it to like basically generate a new set of issues, which no longer have those particular concerns anymore.

So this tells us what? That JSDoc is not formatted correctly on this line.
>> Mike North: Seriously? Could that be it? A space? And that was it. So consecutive blank lines are forbidden. Get rid of that, and we should be back to just having the one error from our echo that always, does its thing.

Here no more TypeScript, no more TSLint errors. Now there's a great extension you can install for TSLint that will not require you to run this task over and over. But this is great if you had some internal tool that maybe scanned for specific issues, that relate to your particular code, or maybe it's like test failures, this, I have not taught you how to capture arbitrary app, put the looks kinda like this and to turn it into problems that the user will see in their, right in their editor.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now