docs / open-reusables

A VS Code extension to open a reusable or variable file from a help article markdown file

Open a reusable

Overview

Open the file corresponding to a Liquid tag for reusable text, a variable, or feature-based versioning, in the markdown file for an article on docs.github.com.

This Visual Studio Code extension works with markdown files in the public and internal repositories for GitHub's public-facing documentation. For example, the public docs repository.

While you're displaying a markdown file for a GitHub help article in Visual Studio Code, you can click the Liquid tag for a variable or a reusable, the opening tag for feature-based versioning, or the feature-based versioning string in the front matter, and then run the extension to open the related file for the variable, reusable, or version in a new Visual Studio Code tab.

You can also quickly copy the tag for a variable or a reusable. This is useful when you need to use the same variable more than once in an article.

Using the extension

• To open a reusable file, a variable file, or a feature-based versioning file:

  Either select some markdown containing a reusable, a variable, or a feature-based versioning tag, or just click inside the tag to place the cursor there, then press:

  Mac: control + command + o

  Windows: Ctrl + Alt + o

• To copy a Liquid tag, such as the reference to a reusable or variable:

  Click inside the tag to place the cursor there, then press:

  Mac: control + command + c

  Windows: Ctrl + Alt + c

  You can also use the copy function to create the Liquid tag for a reusable, a variable, or a feature version, and put this into the clipboard for pasting into a Markdown file:

  • In a variable file, place the cursor within a variable and use the copy function to copy the Liquid tag for that variable to the clipboard. For example, with the cursor on a variable called prodname_docs the tag {% data variables.product.prodname_docs %} is copied into the clipboard.
  • Anywhere in a reusable file, use the copy function and the appropriate Liquid tag is copied to the clipboard. For example, in a reusable file called user-settings.md, the copy function puts the tag {% data reusables.path.to.user-settings %} into the clipboard.
  • Anywhere in a feature version file, use the copy function to create the ifversion tags for that feature version. For example, in a feature version file called copilot.yml the tags {% ifversion copilot %}{% endif %} are copied into the clipboard.

Alternatively run the extension from the command palette by choosing Open reusable file or Copy the reusable at the cursor position.

Installing the extension

The easiest way is to go to the page for this extension in the Visual Studio Code Marketplace and click Install.

Alternatively, you can install this extension manually:

1. Download the lastest .vsix package file from the https://github.com/docs/open-reusables repository.

2. Launch VS Code and display the extensions panel:

   

3. Click the ellipsis button (top right of the panel).

4. Choose Install from VSIX:

   

5. Browse to the .vsix file and click Install.