Code formatting break Jekyll YAML front matter directives in VS code

Question

Auto code formatting (action editor.action.format) breaks Jekyll (aka Github Pages) pages YAML front matter.

index.html before auto formatting:

--- 
layout: default 
title: Awesome page
bodyClass: homepage 
permalink: /
---
(rest of the content)

index.html after autoformatting:

--- layout: default title: Awesome page bodyClass: homepage permalink: / ---
(rest of the content is formatted ok, regular html syntax)

How can I tune up the VS code formatting rules?

Answer 1

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.