Useful VSCode snippets: anchor with target="__blank" in Markdown and MDX

A good practice to speed up development in VSCode is creating snippets of code that we frequently use.

If you are someone who uses Markdown or MDX, like me for this blog or documentation sites, you’ll definitely benefit from having a snippet for inserting external URLs that automatically open in a new tab.

When we add an external URL with this behavior in a Markdown or MDX file, we need to write the HTML Anchor element with 3 attributes: href, target and rel.

Adding the snippet will prevent you from writing the full markup element every time you need one (which could be quite frequent).

Adding the snippet

"undefined" anchor link

• Open Show and run commands by using the shortcut Ctrl + Shift + P if you are on Windows or Shift + Command + P if you are on macOS, or clicking in this option in the VSCode top search bar dropdown.

• Write Snippets and you will get as first option Snippets: Configure User Snippets.

• Now search markdown for .md files and MDX for .mdx files.

• Add this new object in both resulting JSON files.

{
  // Rest of the JSON
  "Anchor with target blank": {
    "prefix": "anchorBlank",
    "body": ["<a href=\"${1:url}\" target=\"_blank\" rel=\"noreferrer\">${2:text}</a>"],
    "description": "Add anchor with target blank"
  }
}

And now, you can use this snippet writing the starting letters of the prefix, pressing Ctrl + Space for IntelliSense suggestions and selecting the anchorBlank option.

I hope you found this article useful.

Happy coding! 🚀