How to create Custom Tasks in VSCode

hello everyone welcome back to my youtube channel if this is your very first time here my name is delia and i'm a software engineer and i create content around web around javascript around everything tech so you're welcome kindly subscribe if you haven't so in today's video i'll be talking about custom tasks in vs code i'll start by explaining what tasks are and how they work in vs code then i also talk about auto detection like task auto detection and then lastly we look at how to create custom tags just like this one we have here dileon's custom task so let's get started firstly what is a task in vs code a task in vs code is a series of actions a series of commands that you have assigned to a particular task name or a command name such that when you trigger that command that command name vs code will execute every of the actions that you have assigned to that command so think of it as aliases you are assigning aliases to a set of commands that you want to run and such commands can range from running test scripts to build scripts to terminal commands many things you may just want to automate so instead of opening a different terminal or opening a different environment to run every of those things you can do all of them directly in vs code next auto detection of task in vs code by default vs code has task definitions that can be applicable to different kind of applications if it's if it's a node.js application there are some tags that are already predefined if it's a python application for various kinds of applications vs code has task definitions and also when you install some extensions they also provide some helpful tax definitions that you may want to use for such kind of application that data extension is used for so for example this is a node.js project it's a react project actually built on node so once you open this command block which is ctrl shift p or command shift p and you type task with this with a space you can see a set of tasks here so when i open show all tasks vs code auto detects this application and suggests tax definition that will be applicable to rates so since it's a node.js project and then vs code has detected package.json you can see here that vs code has suggested some tax definitions like npm build for gatsby build npm develop npm test and also below here you see a ts config which means this application also has some elements of typescript inside of it so vs code also suggested the tsc build and csc watch commands that can be used for typescript applications oh this is a very nice feature of vs code and with this feature you don't have to specify your own task you can just use some of the tax definitions that already exist now let's learn how to create our own custom tasks so for some for some cases you may need some task definitions and vs code may not have existing ones you may want to have you may want to automate something and you may want to create your own custom task for that instead of having to always type that in a terminal so for that case you can create your own custom task and this is how i created mine here this is dillian's custom task and this is how i created is here so to create custom task in vs code you need to have a tax.json file inside of the dot vs code directory and then inside of here you specify your type definitions this task array can contain as many tasks as you want so the first task here is the dillion's custom task this is the label the label specifies what you see on the command ui command interface and then this type describes the type of the command that you're about to run is it a shell command is it a process command you can run you can specify that here and then you have the command option which specifies the command that is to be executed so what this command here does now is that it runs echo delion in echo hello in a shell and we can test that when you open the command interface task billions custom task continue without scanning the tax output this is in case you want to specify a a compiler a linked to that you want to scan the output that that command produces for this case we don't need it so let's continue without it and in the terminal here you can see this hello just as we expected echo hello now this is not very practical so let's look at the more practical example so say in this in this gatsby in this react project there is a script to run the tests and there is a script to run the build command so i may want to go to package.json and then add a script and call it and we want to come over here and then add a script and call it uh tests and views and then i may run mpm run test and mpm run viewed but every other benefit every other contributor to this project may not need this command test and build so instead of doing that in package.json i can just create a task for it and here i can call this tests and butte and then i can run npm run tests and npm run build additional properties that i can add to this task is the presentation option and this presentation option defines how the shell interface would be would appear so for this echo i don't need this this is already default echo true reveal always is also a default what this means is whenever i run this task i want the shell interface to be reviewed focus false if i add if i change this to true it means whenever the terminal opens the focus should be the the terminal should be automatically focused on but i don't need that panel shed i don't need this to be shared i want this to be new and what this means is whenever i run this task i want a new panel to be open even if i'm running the task again i want a new panel to be open show reuse message i don't need that clear i don't need that i have okay i have a task i have a test here a minor test here which is expect one plus one to be okay i'll have that to be true because if that is false then the npm run build will not be run so let that be true and then task test and build continue without scanning the task output and the build is done so just above here we can see just npm run test and then we can see gatsby build and this is our very first custom script of course it's very small it's very minor but this is a basic example of how to create your own custom task when you need to automate a set of commands now another beautiful thing you can do with task and vs code is you can create a task that depends on another task which means that other task would be run before the current task and here's what i mean so in our package.json we have npm run we have got to be self and what gatsby sap does is it serves an application based on what you have already done in m in gatsby build so in our text.json here we can create a new task that's called that shell and the label is save built application and we can give it a command that says npm run serve now we can also do this if we want or we can use the default and then the last option we can pass is depends on so what this depends on does is you're specifying the tax that this particular tax depend on and this particular tax depends on tests and build now if you stop here what the vs code will do is it will run test and build and it will run mpm run serve at the same time so since we want npm since we want test and view to be run first then we would need to specify a depends order and we can call this sequence and we can also try this task task and then save build application continue without and this is it it runs npm run test first and then npm run viewed it runs these two first and over here we can see that the application has got to be self has been run now because over here we said this should appear in a new panel gatsby's have appeared in a new panel and in the previous panel we can see just where npm run test and npm wrong built npm run build was run and that's it for this video so if you want to learn more about that you can come to this page it has a very good guide and documentation of how to work with stacks creating custom tasks and many other things i wasn't able to cover in my video so if you enjoyed this kindly subscribe and thanks for watching

Channel: Dillion Megida

Views: 1,940

Keywords:

Id: IdhvvlZkS9g

Length: 10min 7sec (607 seconds)

Published: Sun Apr 18 2021