DEV Community: Collins Kesuibai

Understanding Problem Matchers in Visual Studio Code

Collins Kesuibai — Fri, 31 Jan 2025 07:00:45 +0000

Introduction

Visual Studio Code (VS Code) is a powerful and extensible code editor widely used by developers across various domains. One of its essential features is the ability to run tasks, which allows you to automate repetitive workflows such as compiling code, linting, and running development servers. However, when executing tasks that continuously watch for changes—like TypeScript compilation, Webpack bundling, or linting—VS Code needs a way to track and highlight issues effectively. This is where problem matchers come in.

Problem matchers in VS Code act as interpreters that scan terminal output for errors, warnings, and information messages. They extract useful details like filenames, line numbers, and error descriptions, enabling developers to quickly navigate and resolve issues without manually searching the console.

This blog post provides a deep dive into what problem matchers are, how they work, and how you can create and customize them for your specific use cases.

What is a Problem Matcher?

A problem matcher in VS Code is a configuration that allows the editor to recognize patterns in task output and display them as errors, warnings, or informational messages in the "Problems" panel. This means that instead of manually scanning through console logs for issues, VS Code can automatically extract relevant details and make debugging more efficient.

For example, if you run a TypeScript watch mode (tsc --watch), the compiler might output an error like this:

src/index.ts(10,5): error TS2339: Property 'foo' does not exist on type 'Bar'.

Without a problem matcher, you would need to manually locate this error. With a properly configured matcher, VS Code can highlight index.ts at line 10, column 5, displaying the message "Property 'foo' does not exist on type 'Bar'." directly in the "Problems" panel.

How Problem Matchers Work

Problem matchers rely on regular expressions (regex) to extract structured information from unstructured console output. The extracted information typically includes:

File name where the issue occurred
Line number of the issue
Column number (if available)
Error message
Error severity (error, warning, or information)

These matchers are configured inside the .vscode/tasks.json file and can be either built-in or custom.

Built-in Problem Matchers

VS Code provides several built-in problem matchers for common tools. You can use them directly in your tasks without defining complex regular expressions.

Here are some popular built-in problem matchers:

Problem Matcher	Purpose
`$tsc-watch`	TypeScript compiler (watch mode)
`$eslint-stylish`	ESLint (stylish format)
`$gcc`	GCC compiler
`$msCompile`	Microsoft C++ compiler
`$lessCompile`	Less CSS compiler

Example: Running TypeScript compilation with VS Code detecting errors automatically:

{
  "label": "Run TypeScript",
  "type": "shell",
  "command": "tsc -w",
  "problemMatcher": "$tsc-watch"
}

This configuration tells VS Code to use the built-in TypeScript problem matcher to identify compilation errors and warnings.

Creating a Custom Problem Matcher

Sometimes, the default matchers don't work perfectly for your needs, especially if you're using a tool with unique error formatting. In such cases, you can define a custom problem matcher in .vscode/tasks.json.

Example: Custom Problem Matcher for Webpack

Suppose you are using Webpack in watch mode with this command:

"watch": "webpack --watch"

Webpack might output errors like this:

ERROR in ./src/index.js 10:5
Module not found: Error: Can't resolve 'lodash' in '/project/src'

A custom problem matcher for this output could be:

{
  "label": "webpack watch",
  "type": "npm",
  "script": "watch",
  "problemMatcher": {
    "owner": "webpack",
    "pattern": [
      {
        "regexp": "ERROR in (.*) (\d+):(\d+)",
        "file": 1,
        "line": 2,
        "column": 3,
        "message": "Module error detected"
      }
    ]
  }
}

Explanation

regexp: A regex pattern to match Webpack's error message.
file: Captures the file path.
line and column: Extracts the line and column numbers.
message: Displays a generic message for matched errors.

Once configured, VS Code will automatically highlight Webpack errors in the "Problems" panel.

Problem Matcher Fields Explained

A problem matcher can contain multiple fields to fine-tune its behavior. Here’s a breakdown of the most important ones:

Field	Description
`owner`	Defines the system owning the errors (e.g., `typescript`, `webpack`).
`pattern`	Specifies the regex pattern used to detect issues.
`regexp`	The actual regex used to parse error messages.
`file`	Captures the filename where the issue occurred.
`line`	Extracts the line number of the error.
`column`	Extracts the column number.
`severity`	Can be `error`, `warning`, or `info`.
`message`	Extracts the actual error message.

Debugging Problem Matchers

If your problem matcher isn't working correctly:

Check the regex pattern using an online tool like regex101.
Look at the terminal output and ensure it matches the expected format.
Enable task debugging by running Tasks: Run Task in the Command Palette (Ctrl+Shift+P).
Test a simpler problem matcher before adding complex patterns.

Conclusion

Problem matchers in VS Code are a powerful way to enhance your debugging workflow by automatically recognizing errors and warnings from task output. Whether you're working with TypeScript, Webpack, ESLint, or custom tools, problem matchers help surface critical issues without requiring manual inspection of logs.

If you’re using a common tool, try built-in problem matchers like $tsc-watch or $eslint-stylish. If those don't work, define your own custom matcher in .vscode/tasks.json using regex.

By mastering problem matchers, you can streamline your development process, reduce debugging time, and improve overall productivity.

Happy Typing :)

Photo by Jake Walker on Unsplash

Splitting and Serving PDF Files Efficiently with Firebase Storage and Buffer in Node.js(The knight way⚔️)

Collins Kesuibai — Wed, 24 May 2023 14:22:10 +0000

PROLOGUE 🛡️⚜️🛡️

In the land of coding, where clients' wishes reign supreme, I stumbled upon a formidable challenge. The task at hand was to tame a wild PDF, splitting its unruly pages to keep the browser from throwing a fit. With the mighty Firebase Storage and the trusty Buffer by my side, I embarked on an epic quest. Join me as I unravel the secrets of slaying lag times and serving PDFs with finesse!

CHAPTER ONE🤺🤺(The Code)

Once upon a time, in a digital realm not so far away, there was a mischievous PDF named "example.pdf." It was a hefty creature, notorious for causing browser mayhem and frustrating users with its laggy ways. Our brave developer, armed with code and determination, sought to bring order to this unruly document. Let's dive into the enchanted forest of code and witness the magic unfold:

import { RequestHandler } from 'express';
import { Config } from '../../../utils/config';
import { getFilePath } from '../../../utils/helpers/common';
const { Storage } = require('@google-cloud/storage');
import * as mime from 'mime';
const { PDFDocument } = require('pdf-lib');

export const getBookFileWithRange: RequestHandler = async (req: any, res) => {
  const dummyFileURL = 'https://dummy-firebase-storage.com/books/example.pdf';

  // Behold! The filename of our fearless PDF hero!
  const filename = 'example.pdf';

  // Preparing our trusty steed, the Firebase Storage
  const storage = new Storage();

  try {
    const bucket = storage.bucket(Config.storageBucket);
    const fileName = filename;

    // Venturing into Firebase Storage to fetch the mythical file
    const file = await bucket.file(filename);

    // Slaying the PDF dragon, one byte at a time
    const [fileBuffer] = await file.download();

    // Unlocking the ancient secrets of pdf-lib
    const firstDonorPdfDoc = await PDFDocument.load(new Uint8Array(Buffer.from(fileBuffer)));

    // Creating an empty canvas for our newly crafted PDF masterpiece
    const pdfDoc = await PDFDocument.create();
    let start: number = Number(req.query.startPage);
    let pageCount = 0;
    let end: number = Number(req.query.endPage);

    // Carefully selecting and copying the desired pages
    for (start - 1; start - 1 <= end - 1; start++) {
      const [page] = await pdfDoc.copyPages(firstDonorPdfDoc, [start - 1]);
      pdfDoc.insertPage(pageCount, page);
      pageCount++;
    }

    // Polishing our creation, preparing it for the grand reveal
    const pdfBytes = await pdfDoc.save();

    // Identifying the magical essence of our creation (the content type)
    const contentType = mime.getType(fileName);

    // Announcing to the world the type of our creation
    res.set('Content-Type', contentType?.toString());

    // The moment of triumph has arrived! Sending our masterpiece to the waiting world
    return res.status(200).send(Buffer.from(pdfBytes));
  } catch (error) {
    console.error('Oh no! The dragon proved too fierce:', error);
    return res.status(500).send('Error downloading file');
  }
};

CHAPTER TWO🗡️⚔️(The deep dive)

In our whimsical adventure, we rely on several magical artifacts:

Express: The brave and reliable Express framework, guiding us through the treacherous routes of the web.

pdf-lib: A wizardly library that lets us wield the power of PDF manipulation, enabling us to split, copy, and create PDF documents with ease.

Firebase Storage: A mystical cloud storage service, granting us the power to store and retrieve files securely.

mime: A tiny library that helps us unveil the true identity of our PDF, revealing its content type to the awaiting world.

CHAPTER 3🛡🛡(The server side)

In this whimsical tale, we not only embarked on a quest to split and serve PDF files but also discovered the magic of connecting our code to the server. Let's take a closer look at how we can integrate the PDF splitting functionality into our index.js or server.js file:

import cors from 'cors';
import express from 'express';
import { getBookFileWithRange } from './handlers/get/books/getBookFile';

const app = express();
app.use(cors());

// Endpoint for serving PDF files with page range
app.get('/book/file/by/url/:filename', getBookFileWithRange);

// Your other API endpoints can be added here

// Start the server
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

In the above code snippet, we first import the necessary libraries, such as cors and express, to handle server-related functionality. We then import the getBookFileWithRange function from our PDF handling module.

Next, we create an instance of the Express application, configure it to use the cors middleware, and define our API endpoint for serving PDF files with a specific page range. You can add additional endpoints and routes to cater to your specific application needs.

Finally, we start the server by calling the listen method and specifying the port number on which the server should listen. In this case, I set it to port 3000, but you can modify it according to your requirements.

CHAPTER 4⚔️(Making the API Call)

Now that we have our splendid server up and running, it's time to unleash its powers by making an API call to retrieve our perfectly tailored PDF. The API endpoint we'll be hitting is /book/file/by/url/:filename, and it accepts a few query parameters to customize the output. Let's dive in and explore how we can make the most of it!

Endpoint

GET /book/file/by/url/:filename

Query Parameters

startPage (required): Specifies the starting page number from where the PDF should be split. Must be a positive integer.
endPage (required): Specifies the ending page number until where the PDF should be split. Must be a positive integer greater than or equal to the startPage.

CHAPTER 5 ⚜️(The end)

With these enchanting tools in our possession, we embark on our noble quest to slay the dreaded lag times and deliver perfectly tailored PDFs to our users. The code comes alive, executing each step with precision and grace.

In conclusion, by combining the capabilities of Firebase Storage, the pdf-lib library, and the Buffer object, we can efficiently split and serve PDF files in a secure and optimized manner. This solution allows for flexibility in managing large PDF files while ensuring a smooth user experience.

And now, as the sun sets on our coding adventure, I, Knight⚔️ Collins, must bid you farewell. Don't forget to like❤️,🦄 and share😁.

Show/hide android soft keyboard with kotlin - 31 seconds of code.

Collins Kesuibai — Tue, 01 Sep 2020 20:23:37 +0000

What you will need and use.

InputMethodManager - The InputMethodManager is a client side API that exists in each application context and manages interactions.
View - Currently focused view.
Context
windowToken -Get windowToken from the window containing your currently focused view.

Showing the keyboard ⬆

private fun View.showKeyboard() {
        val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.toggleSoftInput(InputMethodManager.SHOW_FORCED, 0)
    }

Hiding the keyboard ⬇

private fun View.hideKeyboard() {
        val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.hideSoftInputFromWindow(windowToken, 0)
    }

Have a question don't hesitate to ask.Have a good day😊or night.`hideKeyboard()// end of post ,share away.`

{Git fun🎭}

Collins Kesuibai — Mon, 13 Jul 2020 15:35:51 +0000

As she walked down the street, he looked at her, there and then felt that spark✴️.
"{git init}" he said for it was a journey he was willing to take.

"{git status}?" He asked, and surprised he was, she had no master, no one she was planning to commit to.

With a little courage "{git config}" with his name he began.

The two branches were perfect for each other no conflict one would say, {git add .} to the many things they had in common.

{git log} over time and they were old enough to {git merge}, with too many moments staged together. A simple wedding was all they needed.

{git push} with the plan they began and the commitment was successful.{git config} was again needed for her name had changed.

{git branch} came soon enough and they now had a family of four. Ten years past and everything was good until {git checkout} happened.

She was tired of having a master and {git diff}, she felt the need to find someone different.{git fork} the new guy did, with no hesitation and soon {git request-pull} as expected a divorce had been filed.

He was devastated. Left alone with his kids but what choice did he have, {git merge} he had to, for all he wanted was to be her origin, but it was no more.

Everyday {git log} into the past never knowing where he went wrong💔.