Tasks in CodeMix with tasks.json

Tools, like compilers, linters, and build systems, are used to automate processes like building, running tests, and deployment. While these tools are typically executed from the command line outside the IDE, with Tasks support, it is possible to run these processes from within the IDE. For tools that perform builds and validation, issues reported by these tools are picked up by CodeMix and displayed in the IDE.

Note: Using tasks is not mandatory—you may not need to create tasks, or manually modify your tasks.json file. For instance, CodeMix automatically creates tasks in Angular and TypeScript projects, and integrates them with the build pipeline. We strongly recommend reading Build Pipelines and Validation in CodeMix before proceeding.

Download CodeMix

Creating a tasks.json File

The tasks.json file must exist in the <project_root>/.vscode directory. You can create this file manually, and then use content assist to help add or edit tasks.

Sample tasks.json for an Angular Project

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "${workspaceFolder}/tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "codemix": {
                "lifecycle": "build",
                "validatedExtensions": [
                    "ts"
                ],
                "readyChecks": [
                    "node_modules_ready"
                ]
            }
        },
        {
            "type": "typescript",
            "tsconfig": "${workspaceFolder}/tsconfig.json",
            "option": "watch",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "codemix": {
                "lifecycle": "watch",
                "validatedExtensions": [
                    "ts"
                ],
                "readyChecks": [
                    "node_modules_ready"
                ]
            }
        }
    ]
}

Sample tasks.json for a JavaScript Project using Gulp

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "command": "gulp",
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "codemix": {
                "lifecycle": "watch",
                "readyChecks": [
                    "node_modules_ready"
                ]
            }
        },
        {
            "label": "CSS Build",
            "type": "shell",
            "command": "gulp",
            "args": [
                "less"
            ],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "codemix": {
                "lifecycle": "build"
            }
        }
    ]
}

Integrating with the CodeMix Build Pipeline

The codemix/lifecycle property determines how CodeMix integrates a task with the build pipeline—for details, see the table below. There is additional intelligence that automatically integrates certain TypeScript or shell tasks into the build pipeline even without the lifecycle property, but we recommend adding this value for clarity.

Common task.json properties

type—There are several types of tasks that are inbuilt with CodeMix, and additional types can be made available by extensions. Common types include angularcli, typescript, gulp, grunt, npm, and shell, or process for custom tasks.
label—How the task is represented in the UI
problemMatcher—This identifies the matcher that’s used to parse the task output, to ascertain the file/line # of the error, and report this back to the IDE. Read this section for for more details.
command—For custom tasks, the actual command to be executed
args—Arguments to be used with your command
options/cwd, options/env, options/shell—Used to set the working directory, environment and shell respectively
codemix/lifecycle—The lifecycle property can have one of three values – build, watch, and for Angular projects, serve. The value of this property determines whether the task is run during a watch, one-time build, or serve request, from the IDE.
codemix/readyChecks—Can currently have only one value, node_modules_ready, ensures you have a node_modules folder before launching any watch or build tasks.
codemix/validatedExtensions—A list of extensions which specify file types that will trigger build/watch when saved, and to which markers will be added from issues identified by the external tasks.

Angular & TypeScript task.json properties

In addition to the above properties, Angular & TypeScript projects do use additional properties.

angular—Used to specify directory containing your angular.json or angular-cli.json files, typically set to ${workspaceFolder}
tsconfig—Path to tsconfig.json file, for TypeScript tasks
bin—Use to override the path to the ng executable
option—For angularcli tasks, option to be passed to ng – could be serve, build, build-watch, etc. For typescript tasks, it’s the option passed to tsc

Running Tasks

To run a task from the command palette, press Ctrl/Cmd+Shift+P, choose the Tasks: Run Task command, and selecting the desired task from the presented list. Tasks that are integrated with the build pipeline are often executed automatically. Refer to Build Pipelines and Validation in CodeMix for more details.

For more on tasks, please read the VS Code documentation.