A snippet for wrapping a selection in HTML comments which include the file name

README.md

Wrapped template fragments

When developing websites, the dev team at Ideas On Purpose has found it very useful to wrap template fragments in named HTML comments. During development and debugging, these waypoints reveal the exact files and structure of how how the page was assembled.

Most files look something like this:

<?php
  // a bunch of logic which populates the $pages variable
?>

<!-- START template-parts/components/pagination.php -->

<nav class="pagination">
    <?= implode("\n", $pages) ?>
</nav>

<!-- END template-parts/components/pagination.php -->

A Visual Studio Code snippet

Generally speaking, I will crawl across broken glass to keep from writing the same thing twice. So there was no way I was going to mentally survive entering snippets again and again, twice for every file. The attached snippet will wrap any VS Code selection inside a pair of HTML comments which include ther shortened path to the file.

vscode-template-wrap.json

// In VS Code, choose "Preferences: Configure User Snippets" from the Command Palette,
// then choose "New Global Snippets file..." and add this. It's preset to trim file
// paths from "template-parts" or "_includes".
//
// To trigger the snippet, first select the text to be wrapped, choose "Insert Snippet"
// from the Command Palette, then select "Template Start/Stop Comments".
{
  "Template Start/Stop Comments": {
    "scope": "php,html",
    "prefix": "Template Comments Wrap",
    "body": [
      "<!-- START ${1:${TM_FILEPATH/.*((?:template-parts|_includes)\\/.*)$/$1/}} -->",
      "",
      "$TM_SELECTED_TEXT",
      "",
      "<!-- END ${1} -->"
    ],
    "description": "Wrap a template in START/END comments"
  }
}