How do i disable the auto format of liquid code when saving

[Clarahealth]

When saving a liquid file it ends up reformatting the code which can change the overall structure and dispaly on shopify. How do i disable this feature permanently?

[panoply]

Hey @Clarahealth

Are you using the current version vscode-liquid extension here? If so, then I recommend that you upgrade to v4.0 which addresses this issue. Would you like me to show you how to update?

[Clarahealth]

Im using 3.2.2 from installing from MAC VS directly. That would be appreciated if you can show me how to upgrade

[panoply]

No problems. So v4.0 is currently in PR (Pre Release) stage. I have not yet rolled it out to users, just so you are aware. I will notify you once the final release is made available.

Step 1 - Download the VSIX

Visit this link: https://github.com/panoply/vscode-liquid/blob/next/shopify-liquid-4.0.0.vsix and download the VSIX file. Follow what I have done in the below screener:

Screen.Recording.2023-08-01.at.22.44.28.mov

Step 2 - Install the VSIX

Next, you need to install the VSIX file you've just downloaded. You can do this via the extensions tab in vscode. Follow what I have down in the below screener. After you've installed it, restart vscode and move onto step 3.

Screen.Recording.2023-08-01.at.22.40.04.mov

Step 3 - Upgrading to v4.0

As aforementioned, I have not rolled this version out to users, as such in order for you to leverage it you will need to align with the next configuration options and also get familiar with the new features. Let's start with the .liquidrc file configuration. This has changed, so the first step is to update it. Remove all the configuration and add the following.

{
  "engine": "shopify",
  "files": {
    "settings": "", // OPTIONAL - you can provide a path to your settings_schema.json file to get completions
    "locales": "", // OPTIONAL - you can provide a path to your en.default.json file to get locale completions
    "sections": [], // OPTIONAL  - you can provide paths to you sections to get completions in section tags
    "snippets": [] // OPTIONAL  - You can provide paths to your snippet files to get completions in render tags
  },
  "format": {} // You can add formatting rules here if you want, but in your case you don't have too.
}

Secondly, the readme file in the next branch will inform on all the new the features available etc. Start with Workspace Settings portion.

Step 4 - Ensuring Format on Save is disabled

This one is easy in v4. Basically, we simply control formatting via workspace settings as follows.

In you .vscode/settings.json file, add the following:

{
  "[liquid]": {
    "editor.defaultFormatter": "sissel.shopify-liquid",
    "editor.formatOnSave": false // Make sure this is false
  }
}

It is important to note that you can enable/disable formatting by clicking the 💧emoji in your vscode activity bar. Below is a small screener to help which shows steps 3 and 4. In the below video, I show how you can enable and disable formatting. Based on what you need, you can just keep formatting disabled, but if you do wish to enable it, just click the emoji. When you do this, then the extension will change the "editor.formatOnSave": false option to true

Screen.Recording.2023-08-01.at.23.16.12.mov

I hope this helps you. Please let me know how you go.