Logo

dev-resources.site

for different kinds of informations.

VSCode tasks and parsing your custom output for problems

Published at
2/16/2022
Categories
vscode
tasks
Author
svdoever
Categories
2 categories in total
vscode
open
tasks
open
Author
8 person written this
svdoever
open
VSCode tasks and parsing your custom output for problems

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 there is a problem (error or warning) it is possible to color 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.bgYellow("WARNING")}: ${filepathString}(${line},${column}): ${errorType} - ${message}`;
    return warningMessage;
}
Enter fullscreen mode Exit fullscreen mode

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"
   }
Enter fullscreen mode Exit fullscreen mode

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"
                }
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

Resulting in the following information in the "Problems" pane:

Problems pane

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!

tasks Article's
30 articles in total
Favicon
Diving into the Use of Use Cases in JIRA🌟
Favicon
Python Day- 14 Looping-Exercises and tasks
Favicon
Python - Level : 2 Tasks
Favicon
Python - Level : 1 Tasks
Favicon
Operators, Conditionals& Inputs Tasks
Favicon
Track your Google Tasks to-do list in Google Sheets with webMethods.io Integration
Favicon
Streamlining Asynchronous Tasks in Django with Django Tasks Scheduler
Favicon
Navigating the Landscape of Tasks APIs and Integration Challenges
Favicon
Task scheduler interval in the rust
Favicon
Scheduling tasks in Golang with atomicgo
Favicon
Priority and Severity of tasks and bugs
Favicon
Command Prompt - Dealing with Tasks
Favicon
Cron Jobs - Automating tasks on Linux
Favicon
Celery & Redis : exécution de tâches en différé / asynchrones
Favicon
How to Practice Root Cause Analysis in tech problems
Favicon
Prioritizing Tasks - Time Management
Favicon
How I make myself productive with Google
Favicon
VSCode tasks and parsing your custom output for problems
Favicon
Creating containers for Django apps with periodical tasks
Favicon
Top 5 Work Habits to Boost Productivity
Favicon
Calendar Heroes: Michele Wiedemer, Manager of Customer Education at Snyk
Favicon
Calendar Heroes: Rohini Pandhi, Product @ Square
Favicon
A way to not lose track of what you've done at work
Favicon
C# - The For Loop Paradox
Favicon
Plan like a Pro with Automatic Scheduling in Taskjuggler
Favicon
Brief intro on Celery
Favicon
My approach to planning personal projects, tasks, and goals with examples
Favicon
Rails Tasks: exporting database models to a CSV.
Favicon
VSCode Tasks - Specifying custom PATH
Favicon
Using a text editor for task tracking

Featured ones: