“Edit This Page” With vscode:// URLs (featuring a Hugo partial)
Updated  by  nm  2023-November-29

Page contents

 

News

2023-May-16  Published this evolving⁠[1] article.

 

About the vscode URLs

You can launch Visual Studio Code with a vscode:// URL like any of the following:

vscode://file/full/path/to/directory/
vscode://file/full/path/to/file
vscode://file/full/path/to/directory/?windowId=_blank
vscode://file/full/path/to/file?windowId=_blank

 

To learn about vscode:// URLs, see code.visualstudio.com’s Opening VS Code with URLs.

To learn about the query parameter ?⁠windowId=_blank, see github.com/microsoft/vscode/issues/141548.

 

💡

The string before the colon, vscode, is called the URI scheme. If you use VSCodium, replace it with vscodium.

 

Hugo partial to “Edit this page”

Inspired by the March-2023 discourse.gohugo.io discussion titled Open content files via link in vscode from server-⁠mode preview, I created the following Hugo partial that I use when I’m developing the Infinite Ink website.

{{- /*
* CREATED: 2023-May
* PATH: layouts/partials/open-with/vscode.html
* USAGE: {{ partial "open-with/vscode" . }}
*/ -}}

{{- with .File -}}

{{- $filepath := .Filename -}}
{{- $dirpath := print hugo.WorkingDir "/content/" .Dir -}}
{{- $sectionpath := print hugo.WorkingDir "/content/" .Section -}}


<pre>
<small>
<a href="vscode://file/{{- $filepath -}}?windowId=_blank">Edit File</a>
<b><a href="vscode://file/{{- $dirpath -}}?windowId=_blank">Edit Dir</a></b>
<a href="vscode://file/{{- $sectionpath -}}?windowId=_blank">Edit Section</a>
</small>
</pre>

{{- end -}}  <!-- END with .File -->

 

When I’m running Hugo in server mode (via hugo server),⁠[2] this partial displays the following three links on each Infinite Ink web page.

Edit File
Edit Dir
Edit Section

 

💡

 

Calling the partial

Because I do not want these Edit links displayed when I publish the Infinite Ink website, I call this partial in my Hugo base template with the following Go template code.⁠[4]

{{- if not hugo.IsProduction -}}
  {{- partial "open-with/vscode" . -}}
{{- end -}}

 

💡

Alternatives to the above condition are:

{{- if eq hugo.Environment "development" -}}
{{- if hugo.IsDevelopment -}}

To learn about hugo.IsDevelopment (new in Hugo v0.120.0), hugo.IsProduction, and hugo.Environment, see gohugo.io/functions/hugo/.

 

Tip: “Edit this partial”

To make it easy to edit the partial itself, I include the following near the bottom of the partial.

{{- $thispartialdir := path.Join hugo.WorkingDir "layouts/partials/open-with/" -}}

<a href="vscode://file/{{- $thispartialdir -}}?windowId=_blank">Edit this open-with partial</a>

With this, the partial displays the following four links on each Infinite Ink page.

Edit File
Edit Dir
Edit Section

Edit this open-with partial

 

To learn about the path.Join function that’s used in this section, see gohugo.io/functions/path.join/.

 

References

To learn more about all this, see the following links.

VS Code
Hugo

 

See also

For more about Hugo, see Infinite Ink’s…

 

Endnotes

1. Many Infinite Ink pages, including this one, are evergreen 🌲 and regularly updated.
2. hugo server and hugo serve are equivalent and both start Hugo in server mode.
3. To ensure that a new VS Code window is launched, append ?windowId=_blank to the vscode:// URL. To learn about this query parameter, see github.com/microsoft/vscode/issues/141548.
4. Go template code is also known as Go HTML. For details, see gohugo.io/categories/templates/, golang.org/pkg/html/template/, and golang.org/pkg/text/template/.

Please share & discuss 📝 👎 👍 📯