Software development processes often involve running external
tools to perform various operations, such as compilations,
linting, and other build-related tasks.
VS Code includes a feature called task that lets you execute many of
these processes and view their results without leaving
the application.
This helps you both automate repetitive operations as well as
reduce context switches when jumping between different
applications.
You can create your own custom task,
but there are several popular task runners
that VS Code will auto-detect and let you execute from inside the
application with little or no additional configuration.
That's what I'm going to show you in this movie.
npm is the Node Package Manager and supports running different
scripts defined in a file named package.json.
I'm going to add one to my project and show you how VS Code uses it.
I'll first open a terminal.
I already have Node.js installed on my computer.
I can create a new package.json file on my project with all the
default values with the command npm init -y.
That only takes a second or two to run.
The result is a new file named package.json in my project.
The script section in the file that begins on Line 6 defines a
list of different scripts or programs you can run with npm.
This default configuration only includes a single script
named test.
When it's run, it will currently just echo to the terminal that
there's an error because no tests have been specified.
It then exits with status code one.
It's common to add more entries here that use different programs
and processes, which are then executed by npm.
However, even this simple one will let you see how VS Code detects
and executes them.
To run it, I'll open the command palette and search for task.
From this list, I'll select "Run Task."
I'm then shown a list of the types of tasks VS Code can auto
detect and execute.
I'm trying to run an npm script, so I'll select "npm."
The first one is the very common npm install command used to
restore referenced npm packages.
There wasn't an entry for that in our package.json file
since it's so common.
Just below that is the sample test script.
I'll select it and press "Enter" to run it.
That opens a new terminal, and we're shown a message that
the task is executing, followed by the output from the
echo command reporting that there are actually no tests to run.
At the end, we're told the terminal will be reused by task,
and I can press any key to close it.
I'll do that.
Even though VS Code can automatically detect
and run that task,
we can still apply some customizations to it if we like.
I'll again open the command palette and execute the
run task command.
The same task is now at the top of my recently used list.
Instead of running it again, I'm going to click the gear icon
to the right of it to customize it.
The file is named tasks.json and was added to the
.vscode folder,
where other VS Code configuration files live,
such as the settings.json file we've used several times
in the course.
This is also a JSON file.
The task property on Line 3 defines an array of task objects.
Right now, the only one in here is the npm test script we executed
a minute ago.
Let's review and adjust a few of these properties.
The detailed property at the end is meant to be a description
of the task.
The actual command to be executed is in the package.json file,
but was just copied to this property by default.
I'll change it to run unit test.
I'll add a comma at the end of the line,
and then press "Ctrl space" to see some of the other options
we can add.
I'll highlight the presentation property.
You can see from the tip on the right that this configures the
panel that is used to present the task output and read its input.
I'll press the tab key to insert that.
We get a few default presentation options added.
You can hover over these to get an idea of what they each do,
but I'll just quickly change a couple of them.
I'll change focus to true so that the terminal window gets focused
when the task is run.
I'll also change the showReuseMessage property to false.
I'll now open the command palette to run the task again.
The task is still at the top of my recently used list,
but notice now the description says, "Run unit tests."
I'll press "Enter" to run it.
The task runs, the terminal gets focused,
and we no longer see the message at the end about reusing
the terminal.
However, I can still just press any key to close the terminal.
If you already have npm scripts in your projects or task configured
with a task runner like Grunt or Gulp,
then VS Code can likely detect them and easily run them for
you inside the application.
Using the tasks.json file, you can further customize how
those tasks run to better meet your needs and preferences.
Up next, we'll continue working in the tasks.json file,
and I'll show you how to add and configure custom tasks to run just
about any script or process on your machine.