First VSCode Tasks in less than 5 minutes

Labels: , , , , ,
I'm working on solution to automating the generation of my weekly post: Reading Notes. While this work is finished, I still need to do many steps manually. I introduced in a previous post VSCode, that already supports markdown. In fact, from any markdown file, you can press Ctrl+Shift+V to preview the oupput. However, today, it's not possible to do anything with this preview. This post explains how we can use VSCode task to fix this problem.

Goal

Create a task that will quickly transform my current open markdown file in HTML.

Step 1 - Get a Markdown parser

First, we need Markdown parser. I'm sure many different are available, but in this post, I will use markdown-js, a Node.js parser that is available on github. To install it, just execute the following command: 
npm install -g markdown

Step 2 - Create a Task

Secondly, we need to create our task. Open Visual Studio Code, and type Ctrl+Shift+P to open the Command Palette and then start typing Configure Task. Press Enter or select “Configure Task Runner”. This will create a new file tasks.jon, with many different samples of tasks. Before you replace the content of the page by the following code, take a look at the comment block at the top of the page. You will see different context variables that are available.

// Simple Task to transform MarkDown to Html
{
    "version": "0.1.0",
    "command": "md2html",
    "isShellCommand": true,
    "args": ["${file}"]
}

This defines our task using the json format. The command name in this case is md2html and we pass the name of the current open file as parameter using the variable ${file}. Finally, the "isShellCommand" is set to true so the task will be triggered by pressing Ctrl+Shift+B.

Step 3 - Try it

To try it, open a markdown page, hit Ctrl+Shift+B, and voilà! You should see in the output the HTML code generated.




References



~Frank