HTML Format and Jekyll Front Matter

[Serhioromano]

I am working on a Jekyll project. There is an HTML in some of the layouts. I have configured to format code on save.

When I save format change this

---
layout: default
---

to this

--- layout: default ---

I have played with this parameters

"html.format.preserveNewLines": true,
"html.format.endWithNewline": true

But nothing seams to change.

And of course Jekyll does not process properly this file until I manually change that Front Matter.

Can we do something about this?

[chrmarti]

@Serhioromano This is in .html files? What extensions do you have installed (code --list-extensions)? What version of VSCode are you using?

[aeschli]

We use http://jsbeautifier.org/ as the underlying formatter.
What you can do is tell it what tags should not be formatted.
That's the setting "html.format.unformatted".
"html.format.preserveNewLines" only applies to new lines before en element tag, not for the content.

If all that isn't good enough I suggest to file a feature request against https://github.com/beautify-web/js-beautify

[Serhioromano]

@chrmarti @aeschli It is not actualy a tags. Here is the example file

--- 
layout: default 
---

<div class="row">
    <div class="large-2 column">
        <ul class="menu vertical">
            {% assign sorted = site.docs | sort:"order" %} {% for post in sorted %}
            <li class="{% if page.url == post.url %}active{% endif %}"><a href={{ post.url }}>{{ post.menu }}</a></li>
            {% endfor %}
        </ul>
    </div>
    <div class="large-10 column">
        <header class="post-header">
            <h1 class="post-title">{{ page.title | escape }}</h1>
        </header>
        {{ content }}
    </div>
</div>

So every time i save it top part is formatted into one line. And there is no possibility to tell what tag it is.

That is why I write here. It should be some adjustment code to detect Jekyll Front Matter and do not format it.

Otherwise i have no other option but turn that awesome feature off and never autoformat my documents or fix Front Matter every time I save document.

@Serhioromano This is in .html files? What extensions do you have installed (code --list-extensions)? What version of VSCode are you using?

AlanWalk.markdown-toc
Andreabbondanza.ignoregit
Kasik96.format-indent
PKief.material-icon-theme
Pivotal.vscode-manifest-yaml
WaTo.MarkdownToHtml
akamud.vscode-theme-onedark
alefragnani.Bookmarks
be5invis.vscode-icontheme-nomo-dark
christian-kohler.path-intellisense
codezombiech.gitignore
emmanuelbeziat.vscode-great-icons
felixfbecker.php-debug
felixfbecker.php-intellisense
ginfuru.vscode-jekyll-snippets
hnw.vscode-auto-open-markdown-preview
humy2833.ftp-simple
josa.markdown-table-formatter
joshbax.mdhelper
lucax88x.codeacejumper
michelemelluso.gitignore
ms-vscode.Theme-1337
ms-vscode.Theme-MarkdownKit
ms-vscode.Theme-MaterialKit
neilding.language-liquid
qinjia.seti-icons
robertohuertasm.vscode-icons
seanmcbreen.MDTools
seanmcbreen.Spell
xabikos.JavaScriptSnippets
yzane.markdown-pdf
zhuangtongfa.Material-theme

And latest VS Code on macOS.

bash-3.2$ code -v
1.11.1
d9484d12b38879b7f4cdd1150efeb2fd2c1fbf39

[aeschli]

CSS has the same problem with the front matter header. All these files are syntactically incorrect. Some features try to ignore it, some break.
I don't know a good solution. Modifying our language service to just ignore the header would be a hack. Jekyll is just one of many template languages. Ideally this would be solved in a Jekyll extension.

[Serhioromano]

would be a hack

Ye, I know. But look even here on Github just one year before front matter was not formatted and --- was interpreted like H1. How Github document view create small table from front matter. Look at this document for example. This is sort of hack also because it semantically incorrect but it is correct reasonably.

Yes it is hack but it is no on the other hand It is sort of adaptation. Without this, VS Code will not be friendly for those who create static sites with Jekyll but this is huge deal for a lot of people.

[edheltzel]

@Serhioromano I can confirm the formatting issues with "editor.formatOnSave": true for HTML files with Front-Matter. But, if I change the grammar of the file from plain HTML to Liquid HTML The formatting issues go away.

[york-xtrem]

@ginfuru how do you do that?

[edheltzel]

@york-xtrem I'm assuming you're asking how you change HTML to HTML Liquid ??
If you install Jekyll Snippets or just install Liquid Languages Support (if you don't need the Jekyll snippets) from there, you'll have the HTML Liquid language/grammer available. After that you have two options can change the grammar manually or setup your workspace config with something similar to the below snippet, so you don't have to remember to change the grammar.

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

[york-xtrem]

Thanks!! El mar., 18 abr. 2017 18:46, Ed Heltzel <[email protected]> escribió:

…

@york-xtrem <https://github.com/york-xtrem> I'm assuming you're asking how you change HTML to HTML Liquid ?? If you install Jekyll Snippets <https://marketplace.visualstudio.com/items?itemName=ginfuru.vscode-jekyll-snippets> or just install Liquid Languages Support <https://marketplace.visualstudio.com/items?itemName=neilding.language-liquid> *(if you don't need the Jekyll snippets)* from there, you'll have the HTML Liquid language/grammer available. After that you have two options can change the grammar manually or setup your workspace config with something similar to the below snippet, so you don't have to remember to change the grammar. } "files.associations": { "*.html": "liquid" }} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#24088 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOJkZo_HgtHAJ-cLHdaxXLRzdAsmcCc1ks5rxOjJgaJpZM4M10s2> .

[Serhioromano]

@ginfuru I can confirm the formatting issues with "editor.formatOnSave": true for HTML files with Front-Matter. But, if I change the grammar of the file from plain HTML to Liquid HTML The formatting issues go away.

That is true. But it disables any formatting on the document. How I cannot format even parts with HTML. It is the same as turn auto-format off.

[Serhioromano]

@chrmarti @aeschli I believe that there should be a parameter for HTML format like preserve new lines. this is very important. Imagine in html I formatted something like this

<p>
    This is miltiline
    text with exact 
    width
<p>

That is readable in MdnightCommander and correct in HTML. If designer open it an change something using VS Code and format it we lose that.

So it is not only about YAML Front Matter. It is in general required feature.

Also there is a thread in Beautifier repository
beautifier/js-beautify#510

[aeschli]

@Serhioromano You can disable formatting of certain tags with the settings "html.format.unformatted".

[will-stone]

The best solution I found was to simply change the file extension to .md

[edheltzel]

@aeschil I can't get this to work for front matter or liquid tags.

[Serhioromano]

@ginfuru I can't get this to work for front matter or liquid tags.

This was not a solution for the problem this was solution for my example

<p>
    This is miltiline
    text with exact 
    width
<p>

@will-stone The best solution I found was to simply change the file extension to .md

This is not a best solution. It is temporary solution. Because in MD mode you do not have HTML formatting.

@aeschli You can disable formatting of certain tags with the settings "html.format.unformatted".

Come on... You are not serious, are you? You know what I mean. This is not exact case this is example of problem. Perhaps your answer addresses this example but not the problem I'm trying to raise. Let's say it is also outside of any html tag. Or let's say it is in a <div> tag. And sometimes there is text sometimes other HTML which should be formatted.

In fact I am very surprised why I should spent so much efforts to put through such an obvious improvement. like I personally do not care. I just think that VS Code is awesome and I use it on a daily basis. All I wanted to make even more awesome by contributing and reporting. Look, after I started this topic I get to know more about this and I have discovered that YAML Front Matter is actually very popular and used not only by Jekyll (although I believe that this should be addressed even f it was used only by Jekyll because this is already huuuuge). So since a lot of developer use it, why do not we do something about it so that VS Code would be more friendly to those huge number of developers?

Really to turn formatting off for HTML documents with Front Matter is not a perfect option.

[will-stone]

This is not a best solution. It is temporary solution. Because in MD mode you do not have HTML formatting.

Agreed. However, if you're looking to keep formatting on (I have mine set to format when I save so this is particularly irritating) and get a small HTML template out the door, setting the file extension to .md is a temporary workaround.

As mentioned by @aeschli, this really is an issue for JS Beautify. If Code were to support this, they'd need to create a wrapper around Beautify and maintain it.

[Serhioromano]

As mentioned by @aeschli, this really is an issue for JS Beautify. If Code were to support this, they'd need to create a wrapper around Beautify and maintain it.

I agree. If they do such a parameter to ignore new lines, then this parameter might transfer to VC Code. But if not? You have read what they say. It is general purpose formatter. It is not actually to format documents but rather create wraps around it. So their answer is "We create basic framework or API and all the rest is on those who use it."

I am almost sure if this is ever done it either Jekyll extension or VS Code.

[edheltzel]

@Serhioromano I think the best option would be to install the prettydiff extension since prettydiff supports formatting for liquid.

edheltzel/vscode-jekyll-snippets#8 (comment)

[phifa]

is this resolved? not really, right? can we open this again? How about vs code adds an option to exclude certain strings/regex so we can add our front matter? you could say "string between --- and --- should be excluded, etc.

--- 
layout: start
---

[cgray24]

ignoring a string or regex would be extremely helpful in solving this issue

[1415926535]

I stopped using front-matter in Foundation's panini flattener because of this reason. I was so bummed I couldn't use it except after I had pages complete. I find myself still cussing when I have to edit one of those pages but I just use a little more discipline when making edits so the formatting is not needed.