Serge van den Oever's weblog

VSCode tasks and parsing your custom output for problems

February 16, 2022 • ☕️ 3 min read

Assume you have a Node.js script that validates your content for problems. It is nice to have some output to indicate these errors. For example as follows:

Error Output

To identify that it is a problem (error or warning) it is nice to do some coloring of the problem type, for example with the chalk library. I use a few simple functions to create these messages which I write to the output using console.log().

createWarningOrErrorString.ts: (note, this is TypeScript)

import * as path from "path";
import chalk from "chalk"; // use version 4 for TypeScript, until TypeScript 4.6 is available

export function createErrorString(message: string, errorType: string, filepath = "", line = 1, column = 1): string {
    const filepathString = filepath === "" ? "<nofile>" : path.join(process.cwd(), filepath);
    const errorMessage = `${chalk.bgRed("ERROR")}: ${filepathString}(${line},${column}): ${errorType} - ${message}`;
    return errorMessage;
}

export function createWarningString(message: string, errorType: string, filepath = "", line = 1, column = 1): string {
    const filepathString = filepath === "" ? "<nofile>" : path.join(process.cwd(), filepath);
    const warningMessage = `${chalk.bgRed("WARNING")}: ${filepathString}(${line},${column}): ${errorType} - ${message}`;
    return warningMessage;
}

Assume we have an npm script validate as follows (where in my case validate.js is transpiled from validate.ts):

   "scripts": {
       "validate": "node validate.js"
   }

If we run npm run validate in a terminal window within VSCode we get the output including the error and warning messages, but they will not end up in the “Problems” panel is Visual Studio Code.

There are two reasons for that:

  1. Visual Studio Code does not parse the output of commands executed in a terminal window
  2. If custom errors and warnings are generated by the validate script, VSCode does not know how to parse these errors and warnings.

The solution to both problems are VSCode tasks.

A VSCode task is executed in a separate terminal task tab, named after the executing task:

terminal task tab

The nice thing is that VSCode parses the output generated in this tab for problems.

But first we need to define a VSCode task for this:

.vscode/tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Validate",
            "detail": "Validate all content and parse errors from output",
            "type": "npm",
            "script": "validate --silent",
            "problemMatcher": [
                {
                    "owner": "content-linter",
                    "fileLocation": ["autoDetect", "${workspaceFolder}"],
                    "pattern": {
                        "regexp": "^(ERROR|WARNING):\\s*(.*)\\((\\d+),(\\d+)\\):\\s+(.*)$",
                        "file": 2,
                        "line": 3,
                        "column": 4,
                        "severity": 1,
                        "message": 5
                    }
                }
            ],
            "options": {
                "statusbar": {
                    "label": "$(check-all) Validate",
                    "color": "#00FF00"
                }
            }
        }
    ]
}

Note that the above task configuration parses the errors/warning in the output, to show them in the “Problems” panel. So the line:

C:\P\competenceframework\packages\content\src\competenceframework-settings.json(1,1): SchemaValidationError - rings is not allowed.

Is parsed using the regular expression ^(ERROR|WARNING):\\s*(.*)\\((\\d+),(\\d+)\\):\\s+(.*)$.

Resulting in the following information in the “Problems” pane:

terminal task tab

To run this task execute the task, press F1, select Tasks: Run Task, and next select the Validate task.

Note that the above task configuration contains some addition information in options. This drives the configuration of a VSCode extension Tasks to add tasks in the VSCode status bar:

tasks in status bar

I the above example I created two tasks in the status: Validate and Build.

Now you can start your tasks with a single click, parse the output, and show the results in the “Problems” pane.

Normally the “Problems” pane only shows problems in open files, but using tasks you can report on all problems that occured during the execution of the task.

VSCode has great documentation on tasks. Check it out!

Discuss on TwitterEdit on GitHub

Serge van den Oever's weblog

Serge van den Oever

Personal blog by Serge van den Oever - als je maar lol hebt...
Twitter: @svdoever
LinkedIn: Serge van den Oever - articles on LinkedIn

Technology Consultant @ Macaw
Competence Team Lead Custom Application Development @ Macaw
2022 Technology Sitecore Most Valuable Professional
2021 Technology Sitecore Most Valuable Professional