Weird formatting behaviour

timothy-kodes commented 1 year ago

So I have this weird behavior where on formatting code, it just keeps switching back and forth between these;

<html
  lang={{ site.lang | default: "en-US" }}>

<html lang={{ site.lang | default: "en-US" }}>

panoply commented 1 year ago

Wrap in quotations, eg: " or choose an explicit format rule, ie: forceAttribute

panoply commented 1 year ago

@dancingmonkey Sorry I was short in that response, I was in a meeting. You can also jump into the discord if you need any additional help. I'll run some testing tomorrow and see if this is a bug in Prettify, but setting the rulesets should suffice here.

Let me know how you go fam.

timothy-kodes commented 1 year ago

So something is very wrong either with my configuration of .liquidrc or my settings.json in vscode or both. This is causing very unpredictable behavior when formatting.

So for solving the original problem, setting "preserveAttributes": true, did the trick. However now (not always) I'm having another issue that everytime I format it creates a closing </html> tag ending up my code with plus one tag like so;

</html>
 </html>
 </html>
 </html>
 </html>
 </html>

This is my vscode settings:

  "workbench.colorTheme": "Material Theme High Contrast",
  "workbench.iconTheme": "material-icon-theme",
  "editor.bracketPairColorization.enabled": true,
  "editor.semanticHighlighting.enabled": "configuredByTheme",
  "editor.guides.bracketPairs": "active",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.minimap.enabled": false,
  "editor.fontFamily": "JetBrains Mono",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontLigatures": false,
  "editor.fontSize": 13,
  "editor.wordWrapColumn": 80,
  "editor.cursorSurroundingLines": 1,
  "editor.cursorWidth": 2,
  "editor.selectionHighlight": false,
  "editor.accessibilitySupport": "off",
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.tabCompletion": "on",
  "editor.suggest.localityBonus": true,
  "editor.suggestSelection": "recentlyUsed",
  "editor.stickyScroll.enabled": true,
  "eslint.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  },
  "eslint.validate": ["javascript", "typescript"],
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[toml]": {
    "editor.defaultFormatter": "tamasfe.even-better-toml"
  },
  "[dotenv]": {
    "editor.defaultFormatter": null
  },
  "[yaml]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[shellscript]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml"
  },
  "[liquid]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.bracketPairColorization.enabled": true,
    "editor.formatOnSave": false
  },
  "liquid.format.enable": false,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontWeightBold": "normal",
  "html.validate.scripts": false, // Let Op! gebruik alleen voor liquid in javascript html files
  "yaml.format.singleQuote": true,
  "explorer.confirmDragAndDrop": false,
  "explorer.compactFolders": false,
  "emmet.triggerExpansionOnTab": true,
  "window.restoreWindows": "none",
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "redhat.telemetry.enabled": false,
  "css.validate": false, // set false for tailwindcss projects
  "security.workspace.trust.untrustedFiles": "open",
  "solidity.compileUsingRemoteVersion": "v0.7.3+commit.9bfce1f6",
  "security.workspace.trust.banner": "always",
  "liveServer.settings.donotVerifyTags": true,
  "gitlens.hovers.currentLine.over": "line",
  "workbench.startupEditor": "none",
  "window.zoomLevel": 1,
  "gitlens.plusFeatures.enabled": false,
  "files.associations": {
    "*.liquid": "liquid"
  }
}

and this is my .liquidrc file

{
  "ignore": [],
  "wrap": 80,
  "commentIndent": true,
  "crlf": false,
  "indentSize": 2,
  "preserveComment": false,
  "preserveLine": 2,
  "endNewline": true,
  "markup": {
    "correct": false,
    "quoteConvert": "single",
    "delimiterSpacing": true,
    "selfCloseSpace": true,
    "commentNewline": true,
    "forceIndent": false,
    "delimiterTrims": "tags",
    "attributeSort": false,
    "attributeSortList": [],
    "attributeCasing": "preserve",
    "forceAttribute": 3,
    "forceLeadAttribute": true,
    "preserveAttributes": true,
    "preserveText": true
  },
  "json": {
    "bracePadding": false,
    "braceAllman": true,
    "arrayFormat": "indent",
    "objectIndent": "indent",
    "objectSort": false
  },
  "style": {
    "correct": false,
    "sortProperties": false,
    "sortSelectors": false,
    "noLeadZero": true,
    "quoteConvert": "single",
    "classPadding": true
  },
  "script": {
    "correct": true,
    "arrayFormat": "indent",
    "braceAllman": false,
    "braceNewline": false,
    "bracePadding": false,
    "braceStyle": "none",
    "objectIndent": "indent",
    "caseSpace": true,
    "endComma": "never",
    "quoteConvert": "single",
    "elseNewline": true,
    "functionNameSpace": true,
    "functionSpace": true,
    "ternaryLine": true,
    "methodChain": 3,
    "neverFlatten": false,
    "noCaseIndent": true,
    "noSemicolon": false,
    "objectSort": false,
    "vertical": false
  }
}

I hope you can help me because it really messes with my commits :P

panoply commented 1 year ago

Hey, try these in markup

{
    "correct": false,
    "forceIndent": false,
    "preserveText": true,
    "forceAttribute": 3,
    "attributeSort": false,
    "forceLeadAttribute": true,
    "selfCloseSpace": true,
    "delimiterSpacing": false,
    "preserveAttributes": false,
}

Can you send me a copy of the file you are trying to format? The generated nodes of </html> are likely occurring due to invalid syntax. I will have a look for you.

panoply commented 1 year ago

Also, maybe disable wrap (set it 0)

timothy-kodes commented 1 year ago

I tried you all your suggestions and suddenly I am back with the first issue again. The switching of these;

<html
  lang={{ site.lang | default: "en-US" }}>

<html lang={{ site.lang | default: "en-US" }}>

You might be right on the node thingy. I had a closing "/>" in the first script tag;

<script src='https://identity.netlify.com/v1/netlify-identity-widget.js' /></script>

This is now the code I'm working with

---
layout: compress
---

<!DOCTYPE html>
<html lang={{ site.lang | default: "en-US" }}>
  <head>
    {%- if jekyll.environment == 'production' -%}
      {%- include gtm-head.liquid gtm=site.google.GTM -%}
    {%- endif -%}
    <meta charset='utf-8' />
    <meta content='width=device-width, initial-scale=1, shrink-to-fit=no user-scalable=no' name='viewport' />
    <link href={{ "assets/css/vendor/video-js.min.css" | prepend: "/" }} rel='stylesheet' />
    <link href={{ "assets/css/styles.css" | prepend: "/" }} rel='stylesheet' />
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css' rel='stylesheet' />
    <script src='https://identity.netlify.com/v1/netlify-identity-widget.js'></script>
    {%- include favicons.liquid -%}
    {%- seo -%}
  </head>
  <body>
    {%- if jekyll.environment == 'production' -%}
      {%- include gtm-body.liquid gtm=site.google.GTM -%}
    {%- endif -%}

    <button id='totop' title='Go to top'>
      <i class='fas fa-angle-double-up'></i>
    </button>
    {%- include header.liquid -%}
    {{ content }}
    {%- include footer.liquid -%}
    {%- include js.liquid -%}
  </body>
</html>

panoply commented 1 year ago

@dancingmonkey So you are telling Prettify to preserve attributes during the formatting cycle. You shouldn't do that, this is what is causing that issue. Prettify will handle beautification of HTML attributes, you don't need to preserve, it is really only for XML - Realistically, you'll always want Prettify handling your attribute beautification.

Essentially, just set preserveAttribute to false and the issue won't occur (as per the example I wrote above):

{
    "correct": false,
    "forceIndent": false,
    "preserveText": true,
    "forceAttribute": 3,
    "attributeSort": false,
    "forceLeadAttribute": true,
    "selfCloseSpace": true,
    "delimiterSpacing": false,
    "preserveAttributes": false // KEEP THIS SET TO false.
}

timothy-kodes commented 1 year ago

It's not working...I chose to use the"around the html tag.

<html lang="{{ site.lang | default: "en-US" }}">

timothy-kodes commented 1 year ago

Thanks for the quick response! 👍🏻

panoply commented 1 year ago

I cannot recreate the issues. Beautification succeeds each time my end. You should consider wrapping "" quotations (ie: "quoteConvert": "double" when working with HTML)

panoply commented 1 year ago

I'm going to close this as I am unable to recreate. Jump on the Discord if you need further assistance.

panoply / vscode-liquid

Weird formatting behaviour #127