1
00:00:00,380 --> 00:00:04,614
Software development processes often involve running external

2
00:00:04,614 --> 00:00:08,637
tools to perform various operations, such as compilations,

3
00:00:08,637 --> 00:00:11,480
linting, and other build-related tasks.

4
00:00:11,480 --> 00:00:15,905
VS Code includes a feature called task that lets you execute many of

5
00:00:15,905 --> 00:00:19,459
these processes and view their results without leaving

6
00:00:19,459 --> 00:00:20,532
the application.

7
00:00:20,532 --> 00:00:24,489
This helps you both automate repetitive operations as well as

8
00:00:24,489 --> 00:00:27,984
reduce context switches when jumping between different

9
00:00:27,984 --> 00:00:28,841
applications.

10
00:00:28,841 --> 00:00:30,895
You can create your own custom task,

11
00:00:30,895 --> 00:00:33,360
but there are several popular task runners

12
00:00:33,360 --> 00:00:37,749
that VS Code will auto-detect and let you execute from inside the

13
00:00:37,749 --> 00:00:41,453
application with little or no additional configuration.

14
00:00:41,453 --> 00:00:44,540
That's what I'm going to show you in this movie.

15
00:00:44,540 --> 00:00:49,171
npm is the Node Package Manager and supports running different

16
00:00:49,171 --> 00:00:52,512
scripts defined in a file named package.json.

17
00:00:52,512 --> 00:00:56,819
I'm going to add one to my project and show you how VS Code uses it.

18
00:00:56,819 --> 00:00:59,792
I'll first open a terminal.

19
00:00:59,792 --> 00:01:03,242
I already have Node.js installed on my computer.

20
00:01:03,242 --> 00:01:08,588
I can create a new package.json file on my project with all the

21
00:01:08,588 --> 00:01:12,640
default values with the command npm init -y.

22
00:01:12,640 --> 00:01:15,963
That only takes a second or two to run.

23
00:01:15,963 --> 00:01:21,649
The result is a new file named package.json in my project.

24
00:01:21,649 --> 00:01:26,153
The script section in the file that begins on Line 6 defines a

25
00:01:26,153 --> 00:01:30,300
list of different scripts or programs you can run with npm.

26
00:01:30,300 --> 00:01:34,800
This default configuration only includes a single script

27
00:01:34,800 --> 00:01:35,700
named test.

28
00:01:35,700 --> 00:01:39,520
When it's run, it will currently just echo to the terminal that

29
00:01:39,520 --> 00:01:42,785
there's an error because no tests have been specified.

30
00:01:42,785 --> 00:01:45,360
It then exits with status code one.

31
00:01:45,360 --> 00:01:49,477
It's common to add more entries here that use different programs

32
00:01:49,477 --> 00:01:52,418
and processes, which are then executed by npm.

33
00:01:52,418 --> 00:01:57,550
However, even this simple one will let you see how VS Code detects

34
00:01:57,550 --> 00:01:58,971
and executes them.

35
00:01:58,971 --> 00:02:04,812
To run it, I'll open the command palette and search for task.

36
00:02:04,812 --> 00:02:10,913
From this list, I'll select "Run Task."

37
00:02:10,913 --> 00:02:15,989
I'm then shown a list of the types of tasks VS Code can auto

38
00:02:15,989 --> 00:02:17,624
detect and execute.

39
00:02:17,624 --> 00:02:22,619
I'm trying to run an npm script, so I'll select "npm."

40
00:02:22,619 --> 00:02:27,806
The first one is the very common npm install command used to

41
00:02:27,806 --> 00:02:30,620
restore referenced npm packages.

42
00:02:30,620 --> 00:02:34,224
There wasn't an entry for that in our package.json file

43
00:02:34,224 --> 00:02:35,600
since it's so common.

44
00:02:35,600 --> 00:02:38,665
Just below that is the sample test script.

45
00:02:38,665 --> 00:02:42,273
I'll select it and press "Enter" to run it.

46
00:02:42,273 --> 00:02:46,218
That opens a new terminal, and we're shown a message that

47
00:02:46,218 --> 00:02:49,952
the task is executing, followed by the output from the

48
00:02:49,952 --> 00:02:54,320
echo command reporting that there are actually no tests to run.

49
00:02:54,320 --> 00:02:58,211
At the end, we're told the terminal will be reused by task,

50
00:02:58,211 --> 00:03:00,476
and I can press any key to close it.

51
00:03:00,476 --> 00:03:03,261
I'll do that.

52
00:03:03,261 --> 00:03:07,259
Even though VS Code can automatically detect

53
00:03:07,259 --> 00:03:08,973
and run that task,

54
00:03:08,973 --> 00:03:12,410
we can still apply some customizations to it if we like.

55
00:03:12,410 --> 00:03:17,386
I'll again open the command palette and execute the

56
00:03:17,386 --> 00:03:19,78
run task command.

57
00:03:19,78 --> 00:03:23,645
The same task is now at the top of my recently used list.

58
00:03:23,645 --> 00:03:28,681
Instead of running it again, I'm going to click the gear icon

59
00:03:28,681 --> 00:03:31,535
to the right of it to customize it.

60
00:03:31,535 --> 00:03:36,932
The file is named tasks.json and was added to the

61
00:03:36,932 --> 00:03:38,942
.vscode folder,

62
00:03:38,942 --> 00:03:41,948
where other VS Code configuration files live,

63
00:03:41,948 --> 00:03:45,638
such as the settings.json file we've used several times

64
00:03:45,638 --> 00:03:46,594
in the course.

65
00:03:46,594 --> 00:03:48,976
This is also a JSON file.

66
00:03:48,976 --> 00:03:54,22
The task property on Line 3 defines an array of task objects.

67
00:03:54,22 --> 00:03:58,143
Right now, the only one in here is the npm test script we executed

68
00:03:58,143 --> 00:03:58,980
a minute ago.

69
00:03:58,980 --> 00:04:02,302
Let's review and adjust a few of these properties.

70
00:04:02,302 --> 00:04:06,169
The detailed property at the end is meant to be a description

71
00:04:06,169 --> 00:04:06,943
of the task.

72
00:04:06,943 --> 00:04:11,279
The actual command to be executed is in the package.json file,

73
00:04:11,279 --> 00:04:14,620
but was just copied to this property by default.

74
00:04:14,620 --> 00:04:21,318
I'll change it to run unit test.

75
00:04:21,318 --> 00:04:26,935
I'll add a comma at the end of the line,

76
00:04:26,935 --> 00:04:32,48
and then press "Ctrl space" to see some of the other options

77
00:04:32,48 --> 00:04:33,35
we can add.

78
00:04:33,35 --> 00:04:39,127
I'll highlight the presentation property.

79
00:04:39,127 --> 00:04:43,448
You can see from the tip on the right that this configures the

80
00:04:43,448 --> 00:04:47,982
panel that is used to present the task output and read its input.

81
00:04:47,982 --> 00:04:51,527
I'll press the tab key to insert that.

82
00:04:51,527 --> 00:04:55,30
We get a few default presentation options added.

83
00:04:55,30 --> 00:04:58,215
You can hover over these to get an idea of what they each do,

84
00:04:58,215 --> 00:05:00,647
but I'll just quickly change a couple of them.

85
00:05:00,647 --> 00:05:07,145
I'll change focus to true so that the terminal window gets focused

86
00:05:07,145 --> 00:05:09,245
when the task is run.

87
00:05:09,245 --> 00:05:20,398
I'll also change the showReuseMessage property to false.

88
00:05:20,398 --> 00:05:28,810
I'll now open the command palette to run the task again.

89
00:05:28,810 --> 00:05:33,426
The task is still at the top of my recently used list,

90
00:05:33,426 --> 00:05:37,13
but notice now the description says, "Run unit tests."

91
00:05:37,13 --> 00:05:39,450
I'll press "Enter" to run it.

92
00:05:39,450 --> 00:05:43,13
The task runs, the terminal gets focused,

93
00:05:43,13 --> 00:05:46,207
and we no longer see the message at the end about reusing

94
00:05:46,207 --> 00:05:46,948
the terminal.

95
00:05:46,948 --> 00:05:52,471
However, I can still just press any key to close the terminal.

96
00:05:52,471 --> 00:05:56,937
If you already have npm scripts in your projects or task configured

97
00:05:56,937 --> 00:05:59,440
with a task runner like Grunt or Gulp,

98
00:05:59,440 --> 00:06:03,365
then VS Code can likely detect them and easily run them for

99
00:06:03,365 --> 00:06:05,192
you inside the application.

100
00:06:05,192 --> 00:06:09,311
Using the tasks.json file, you can further customize how

101
00:06:09,311 --> 00:06:13,659
those tasks run to better meet your needs and preferences.

102
00:06:13,659 --> 00:06:17,140
Up next, we'll continue working in the tasks.json file,

103
00:06:17,140 --> 00:06:21,476
and I'll show you how to add and configure custom tasks to run just

104
00:06:21,476 --> 00:06:25,00
about any script or process on your machine.