Not respecting prettier config

[james-prado]

Describe the bug
The Shopify.theme-check-vscode formatter indents with spaces even when "prettier.useTabs": true specified.

Unformatted source

{%- assign foo = 'foo' -%}

<div
  class='test'
  {% if foo != blank %}
    id='{{ foo }}'
  {% endif %}
></div>

Expected output

{%- assign foo = 'foo' -%}

<div
	class='test'
	{% if foo != blank %}
		id='{{ foo }}'
	{% endif %}
></div>

Actual output

{%- assign foo = 'foo' -%}

<div
  class='test'
  {% if foo != blank %}
    id='{{ foo }}'
  {% endif %}
></div>

Debugging information

• OS: Mac
• Version: Shopify Liquid (VSCode marketplace) v1.10.0

[charlespwd]

We have integration tests that says otherwise. Mind sharing your config?

(Its path also)

https://github.com/Shopify/prettier-plugin-liquid/blob/main/test/config-use-tabs/fixed.liquid#L8-L14

[charlespwd]

We're also using prettier's resolveConfig function to figure out which config to use, so am wondering what isn't working.

https://github.com/Shopify/theme-check-vscode/blob/main/src/formatter.ts#L57

[charlespwd]

Here's a PR that shows your scenario works as expected too. So something is up with how your config is being read.

#193

[anders-christiansen]

I have the same issue.

I have created a .prettierrc.json file with printWidth: 800, which does not work in liquid files.

{ "printWidth": 800 }

my settings.json file looks like this:

{
  "editor.largeFileOptimizations": false,
  "workbench.iconTheme": "material-icon-theme",
  "tabnine.experimentalAutoImports": true,
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": false,
    "scminput": false,
    "yaml": true,
    "xml": true,
    "javascript": true,
    "typescript": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "cssPeek.peekFromLanguages": [
    "html",
    "django-html",
    "laravel-blade",
    "razor",
    "vue",
    "blade",
    "pug",
    "jade",
    "handlebars",
    "php",
    "twig",
    "md",
    "nunjucks",
    "javascript",
    "javascriptreact",
    "erb",
    "typescript",
    "typescriptreact",
    "HTML (Eex)",
    "html-eex",
    "ejs",
    "liquid"
  ],
  "editor.unicodeHighlight.nonBasicASCII": false,
  "editor.unicodeHighlight.invisibleCharacters": false,
  "editor.linkedEditing": true,
  "editor.fontSize": 14,
  "workbench.colorTheme": "Dracula",
  "tailwindCSS.includeLanguages": {
    "html": "liquid"
  },
  "editor.detectIndentation": false,
  "prettier.tabWidth": 2,
  "themeCheck.checkOnChange": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  },
  "themeCheck.checkOnOpen": false,
  "files.autoSave": "onFocusChange",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "npm.keybindingsChangedWarningShown": true,
  "editor.tabSize": 2,
  "shopifyLiquid.shopifyCLIPath": "",
  "shopifyLiquid.disableWindowsWarning": false,
  
}

If i change the editor.defaultFormatter from Shopify.theme-check-vscode to esbenp.prettier-vscode everything works as expected. But the Shopify.theme-check-vscode is not working

[james-prado]

Hey @charlespwd, sorry for the delayed response and thx for looking into this.

I use a .prettierrc file in the root directory of my project.

.prettierrc

{
  "bracketSpacing": true,
  "printWidth": 100,
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}

I've also tried formatting the document without a local .prettierrc file by setting these values explicitly through the prettier vscode extension, but that hasn't worked either.

settings.json (my vscode settings)

{
  ...
  "prettier.bracketSpacing": true,
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.singleQuote": false,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "es5",
  "prettier.useTabs": false,
  "prettier.resolveGlobalModules": true,
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode"
  },
  ...
 }

In case it's relevant, here's the file structure of the project.

.
├── .prettierrc
└── foo.liquid

[charlespwd]

Thing is... While we don't "watch for changes." It seems to be working for me?

29-50-umk8b-ipgrr.mp4

[james-prado]

This is weird 😕

CleanShot.2023-06-29.at.14.55.08.mp4

Could it maybe be that some globally installed npm packages are interfering? I'm not really using anything unusual, just some basic prettier plugins.

[charlespwd]

The shape of the icons on the sidebar tells me you're using another VS Code extension for Liquid. Are you sure that's not conflicting with Shopify.theme-check-vscode?

https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode

Note that we respect the config files as recognized by the prettier CLI. So cosmiconfig .prettierrc/.json/etc is what we'll uphold.

And like I said, you do need to reload the window. It appears that we cache the result of the config internally.

[james-prado]

I use an extension called Material Icon Theme that lets me customize the file icons. It shouldn't conflict with Prettier or Shopify Liquid at all.

Just to be sure - I removed all my vscode settings, disabled all extensions except Prettier and Shopify Liquid, uninstalled all my global npm packages, and made sure to reload vscode. Unfortunately the issue still persists.

CleanShot.2023-06-29.at.19.30.18.mp4

[thagxt]

Yep, I'm facing the same problem. All the files inside a Shopify theme project are formatted without taking into consideration the Global settings nor.prettierrc inside the root of the project. It just ignores everything and goes to these defaults: https://github.com/Shopify/prettier-plugin-liquid#configuration