“Edit This Page” With vscode:// URIs (featuring a Hugo partial)
Updated  2023-May-24

Page contents



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


About the vscode URI scheme

Visual Studio Code can be launched with a vscode:// URI like any of the following:

  • vscode://file/full/path/to/directoy/

  • vscode://file/full/path/to/file

  • vscode://file/full/path/to/directoy/?windowId=_blank

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



Hugo partial to “Edit this page”

Inspired by the March-2023 discourse.gohugo.io discussion about Open content files via link in vscode from server-⁠mode preview, I created the following layouts/partials/open-⁠with/vscode.html Hugo partial:

{{- with .File -}}

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

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

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




Calling the partial

I call this partial near the top of my Hugo base template with the following Go template code.⁠[3]

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



See also


1. Many Infinite Ink articles, including this one, are evergreen and regularly updated.
2. To ensure that a new VS Code window is launched, append ?windowId=_blank to the vscode:// URI. To learn about this query parameter, see github.com/microsoft/vscode/issues/141548.
3. 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/.

Discuss or share this page 📝 🤔 🐘