New Visual Studio Code Extension – Markdown Links

Markdown Reference Links in Visual Studio Code

This VS Code extension let’s you find a reference link already in the file being edited. Many times a second link to a URL is needed you linked to earlier in the document.

How it works:

  1. Scan the document and collect all the reference links in it
  2. Present the list of links, allows you to choose the one you want
  3. Add the Markdown code that refers to the chosen link

In Action

Two ways to get to make this work. First , select the text you want to become the link. Then:

  • Open the palette, find the extension and press enter.
    • Press F1, type xref, press Enter
  • Or: Press ctrl+shift+L

image

VS Code Gallery

The extension is up on the gallery. In VS Code, press F1, type ext install press Enter. This gets a list of extensions, then type xref to search for this markdown one. From there you can install it.

Thanks to this post for a great idea to make editing even simpler More Markdown reference links in BBEdit

3 Ways to Speed up Visual Studio Code Extension Development

I published my first Microsoft Visual Studio Code Extension to the gallery. Select text in the editor, press Ctrl+Shift+F1 and it will search Stack Overflow, and specifically entries tagged with PowerShell.

While creating an extension in Visual Studio Code, I found myself interacting with three command line tools and I wanted a more efficient way to work with them from PowerShell.

The Command Line

The three tools are npm, tsd and vsce.

  • npm – is the default Package manager for the JavaScript runtime environment Node.js
  • tsd – is the TypeScript Definition manager for DefinitelyTyped
  • vsce – is tool you use to publish Visual Studio Code extensions to the Extension Gallery

For example, if you want to open a URL in the users browser from your extension, you can leverage the node open package. I used TypeScript to create my extension so I needed to install both the the node package and TypeScript definition to make this work.

npm install open –-save
tsd install open –-save

After installing the packages you need and you finished developing your extension, publishing to the gallery is next. That’s a whole other command line tool, vsce. It too has several parameters and switches to setup a publisher, do the packaging or publishing and more.

Enter PowerShell

You’ve got enough things to remember. Plus, we’re polyglots. I prefer to let the computer augment my recall capacity, because it’s so much more efficient.

At the command line, if you type npm <space> and then <TAB>, PowerShell will complete it with file names in the current directory. I could type npm and press <Enter>, scroll around looking for the parameter/switch I need and then type install. Lots of typing, lots of chances for spelling mistakes, very inefficient.

Another scenario, lets say you wanted to run a script in your package.json. You can use npm run, press <Enter>, list the available scripts, bring up that up again and type the script you want to run.

Compare that to the quick and easy tab completion in PowerShell.

Note: If you don’t have the npm completion module, then from a PowerShell v5 prompt install it with:

Install-Module -Name NPMTabCompletion. After it is installed, do an Import-Module NPMTabCompletion

The Microsoft TabExpansion Module lets you dynamically interact with the environment as you type. When you type npm run, the NPM Completion module cracks open the package.json, converts it to PowerShell objects (ConverFrom-JSON), enumerates the scripts property to construct the drop down list. Lastly, each script entry has a name and it’s associated code. This is transformed into the list item and tooltip.

The Other Tab Completion Modules

All of the tab completion modules are on the PowerShell Gallery and can be installed using Install-Module.

Note: You also need the Microsoft TabExpansion Module

Install-Module -Name NPMTabCompletion
Install-Module -Name TSDTabCompletion
Install-Module -Name VSCETabCompletion

If you want do see how these were built, check it out on my GitHub repos: NPM TabCompletion, TSD TabCompletion, VSCE TabCompletion

Summary

These tab completions help you power through what you need to get done when using the command line tools. The added bonus, you can install each separately. So if you’re working with just TypeScript or NPM, this will make you more productive.

Visual Studio Code and the PowerShell Extension Hack Week

Starting Sunday, December 6 from 11am to 12pm PST. Microsoft’s David Wilson will host a Crowdcast Event giving an overview of the PowerShell Editor Services, the PowerShell extension for VS Code, and other general ideas for contributions that people can make.

Microsoft Visual Studio Code is the new modern editor, it’s open sourced, up on GitHub and it has an extension model. Plus the PowerShell team has dedicated resources to create and open source a PowerShell extension. This extension provides PowerShell intellisense, debugging and more.

Hope to see you at the Hack Week!

I’m a contributor to the PowerShell Extension, Editor Services and VSCode-PowerShell.

Here are a couple of items going into the core offering.

Launch Online PowerShell Help

image

Expanding Aliases

image