Introducing Custom VS Code Tasks

[00:00:00]
>> Mike North: So where we're going next is we're gonna talk about tasks. We're gonna touch on launch configurations and then we'll be done. So one of the cool things about the way task running is handled in visual studio code is it'll look at your package jason. Your gulp file, your grunt file.

[00:00:23]
Anything that has sort of, things that can be run. Your rate file if you're using Ruby and it'll extract those out and make them available for you within the editor. So if we just say run task here. We can see I've got one that TypeScript has provided, so TypeScript to build task is there and then a couple that were pulled out of my package.json as npm scripts.

[00:00:48]
So those are already there and already kind of, just by that file being present, we get those.
>> Mike North: In terms of my advice for deciding whether to put your stuff into Visual Code specific tasks or these files, I would say mostly you wanna keep things in those files.

[00:01:07]
Like in package.json, all right. I've linked here to something called Scripty which works with package.json to allow you to maintain a folder of scripts, rather than letting your npm script to get difficult to maintain in large. And the reason is not everyone on your team may use Visual Studio Code and so it becomes more useful to kind of have that consistency in a way that is editor agnostic.

[00:01:34]
However, code add some interesting things on top of those tasks, on top of things that like NPM could do. So this is what a very basic test looks like, and this would go in the tasks.json file that I've linked to here, right? Currently it's saying it can't open it cuz it doesn't exist yet, but if we were to say,

[00:01:58]
>> Mike North: Configure task runner and say others, it would give us this tasks.json file. Created it for the first time right now we should be able to click into it, yep. And it's just going to say, hello to us when we run it. So if we say run task echo, it's going to say what do you want me to do with the output?

[00:02:23]
Right now we'll say continue without scanning the output and, unfortunately, my color scheme has bitten me here. I'm gonna disable that.
>> Mike North: There's our hello, right there.
>> Mike North: And so this is an example of a shell task. Any shell command you can run you can set up in VS Code to execute in this way.

[00:02:51]
>> Mike North: There is also an arguments property we can add here, this args array. This simply ensures that any arguments you pass are properly quoted. Because we've got single quotes, double quotes, back-ticks and especially, when you're mixing tasks together, when it commence together, it can become difficult to keep all of that straight.

[00:03:11]
You can add a current working directory inside this options object. This would do nothing here simply cuz workspaceRoot is a default. Now, think of that as a blank. It's a placeholder that'll get filled in with the appropriate folder name. There are sort of parameters we can put into any of the strings that we have as values here.

[00:03:32]
All right so here's where things get interesting. If I have a task that is designed like this, it is going to run the command Echo, the arg, it's going to pass echo. It's that long string here and that kind of looks like some of our static analysis tools.

[00:03:48]
You could read this as a problem that we have found online eight and that problem says, this line stinks. And what we want is to be able to extract that out and to see it show up the same way we've been seeing type script errors, and that nice little problems tab.

[00:04:06]
>> Mike North: So if the output of our task looks something like this, we can basically use a regular expression to parse this out into pieces of data that can help us create those clickable links. Which file is this on? What line number? What column number? What's the message? Is this a warning, is this an error?

[00:04:31]
Things like that. So we together are going to create a regular expression that will solve this problem. Here's a cheat sheet if you wanna do this yourself. And this is whole domain in and of itself dealing with regular expressions. Here are two tools that I love to use, this one's probably my favorite these days, regex101.com.

[00:04:53]
And we're gonna figure out a way to extract the data that we're interested in. So here's what we wanna end up creatingaAnd it is called a problem matcher. And we say, who is the owner of this? That lets us say that this is a JavaScript problem, or this is a TS link problem, or whatever.

[00:05:16]
And we've got a pattern which has a regex. And then basically, we can point to what are called capture groups of this regular expression. And say, in the first group, you can find the name of the file. The second group is the line number, the third group is the message.

[00:05:32]
So let's take a look.
>> Mike North: I'm gonna grab this here. And we're gonna open this regex 101 thing and I just wanna paste this down here. This is sort of our test line. So I've used regex's for a while, so this may seem a little like you wouldn't you may not be able to figure this out on your own.

[00:05:58]
But that's okay, you can just look it up. Over time you kind of get get a hand on this thing. So slash w is like any word character and we're going to say, we want one or more word characters or a forward slash or a period. Okay so now we've kind of captured everything leading up to that TSX.

[00:06:18]
All right so this kind of represents the file name. After that, we're going to have a comma, the literal word line. That word is always going to be there, and then, now, we begin something else we want to capture, which is the line number. That's gonna be a digit from 0 to 9.

[00:06:33]
There could be one or more of them. That's what the plus means, one or more characters 0 to 9. We're gonna capture that, another comma. And then, at the end here, last capture group, we're gonna say that just basically means anything, at all.
>> Mike North: And that should do it.

[00:06:55]
So let's see if this works.
>> Mike North: So if we create our tasks, task.json, let me just update it with the beginning,
>> Mike North: This thing here,
>> Mike North: Paste it there, we need the right argument, cuz I didn't include that, there is our args.
>> Mike North: Okay and now we're gonna just paste in that regular expression.

[00:07:31]
Sorry, it's over here, and we will have to escape some things, but we should be done after that.
>> Mike North: So it's complaining that,
>> Mike North: Invalid escape characters and I'm gonna just temporarily adjust my color scheme so I can see a little better.
>> Mike North: That's better. So it has a problem with that and with that, and now we're okay.

[00:08:07]
>> Mike North: Okay, so let's try running this task. It's called echo here. All right, so we saw that there's the output, this line stinks. but note we have a problem down here, and if we click on it, it says this line stinks. And then we click on that, and it's highlighting line 8 of that specific file.

[00:08:27]
So, there's no special magic here, in terms of the ability to pick up on problems that are found in code. It's just a regular expression that can make sense out of a line of text, and can extract out the appropriate things. Right, and then it will end up things will get grouped together by file.

[00:08:44]
If types group found problems with this and this script that we built found problems, we would all be grouped together under the same file. It would all be one set of issues detected by a number of pieces of software there.
>> Mike North: That's basically how we did it. We created a problem matcher.

[00:09:11]
We defined an owner, we said this belongs to type script. And then we defined a pattern that had a regular expression. And then we said group 1 is where you can find the file name, group 2 you can find the line, group 3 you can find the message.

[00:09:23]
And just so it's clear what groups mean. Over here, this is telling us, when the regular expression operated on this line here. This is what it found in group one. This is what it found in group two. This is what it found in group three. So it's really easy.

[00:09:40]
You kind of fiddle with it until you get right. You can paste a bunch of different examples here and you can see like you make sure you catch all of the important cases.
>> Mike North: All right, we ended up seeing problems and the underline which is great. In this case, we didn't specify column numbers, the whole line gets underlined, instead of just one particular symbol at a particular spot.