Code formatting break Jekyll YAML front matter directives in VS code

To resolve this, you have two options:

1. Turned off formatting of HTML files in settings.json file:

   "html.format.enable": false
   

   This turns off formatting off for HTML files. Not ideal, but gets the job done. There's a GitHub Issue for this, but it looks to have been closed.

2. Consider installing the Liquid Languages Support extension then adding this to your settings.json:

   "files.associations": {
       "*.html": "liquid"
   }
   

This has resolved the issue for me.

The Jekyll Snippets extension causes VS Code to understand front matter on most file types.

The extension doesn't know about SCSS, however. A big-hammer workaround is to turn off SCSS validation in settings.json:

"scss.validate": false