Support for prettier plugins

[stijns96]

Is your feature request related to a problem? Please describe.
Previously we had to format our liquid files with prettier, but with the v2 of the Shopify Liquid extension, we use theme-check to format our liquid files. This will make it impossible to use prettier-plugin-tailwindcss to automatically order our tailwind classes.

Describe the solution you'd like
Make sure we can use prettier plugins, so we can easily extend the theme-check formatter.

Describe alternatives you've considered
Give the option to either use a prettier plugin or the extension (with plugins).

Checklist

• [ x] I have checked and made sure that the proposal adheres to this plugin's principles

I also opened an issue on the repo of the Shopify Liquid extension.

[charlespwd]

Haa... yeah it seems like we hardcode ours here.

There's probably a clever way to use something from prettier's API to load plugins that are discovered from resolveConfig?

IIRC there's also an issue w.r.t. .prettierignore being ignored, so might lump both those things together.

Unfortunately, we have higher priority stuff to deal with right now. Would accept PRs :)

[stijns96]

Hi @charlespwd,

Thanks for answering.

If I understand (and see) it correctly, you actually already get the .prettierrc, but it is ignored?

Not sure, but it could be that this line is maybe overwriting all other prettier plugins that has been added.

When I have time, I'll check it out.

[stijns96]

Hi @charlespwd,

I'm trying to clone the project, but I'm running into some issues.

1. I can not clone it through Github Desktop. I think because of some rights.
2. I can not execute yarn (when I clone it through the terminal). I'm getting the following error.

yarn install v1.22.22
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
warning theme-check-vscode@2.3.0: The engine "vscode" appears to be invalid.
warning vscode-languageclient@8.1.0: The engine "vscode" appears to be invalid.
[3/4] 🔗  Linking dependencies...
warning " > ts-node@10.9.1" has unmet peer dependency "@types/node@*".
warning " > @shopify/codemirror-language-client@0.5.1" has unmet peer dependency "@codemirror/autocomplete@^6.0.0".
warning " > @shopify/codemirror-language-client@0.5.1" has unmet peer dependency "@codemirror/lint@^6.2.0".
warning " > @shopify/codemirror-language-client@0.5.1" has unmet peer dependency "@codemirror/state@^6.3.0".
warning " > @shopify/codemirror-language-client@0.5.1" has unmet peer dependency "@codemirror/view@^6.9.2".
warning "workspace-aggregator-87f4772f-392d-4a30-87ce-dcec0000a86a > @shopify/codemirror-language-client > @codemirror/autocomplete@6.10.2" has unmet peer dependency "@codemirror/language@^6.0.0".
warning "workspace-aggregator-87f4772f-392d-4a30-87ce-dcec0000a86a > @shopify/codemirror-language-client > @codemirror/autocomplete@6.10.2" has unmet peer dependency "@lezer/common@^1.0.0".
[4/4] 🔨  Building fresh packages...
[-/3] ⠄ waiting...
[3/3] ⠄ theme-check-vscode
error /Users/stijn/Sites/contributions/theme-tools/node_modules/theme-check-vscode: Command failed.
Exit code: 1
Command: sh scripts/fetch-syntaxes.sh
Arguments: 
Directory: /Users/stijn/Sites/contributions/theme-tools/node_modules/theme-check-vscode
Output:
Submodule directory is empty, fetching...
Submodule 'syntaxes' (git@github.com:Shopify/liquid-tm-grammar.git) registered for path 'syntaxes'
Cloning into '/Users/stijn/Sites/contributions/theme-tools/packages/vscode-extension/syntaxes'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of 'git@github.com:Shopify/liquid-tm-grammar.git' into submodule path '/Users/stijn/Sites/contributions/theme-tools/packages/vscode-extension/syntaxes' failed
Failed to clone 'packages/vscode-extension/syntaxes'. Retry scheduled
Cloning into '/Users/stijn/Sites/contributions/theme-tools/packages/vscode-extension/syntaxes'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of 'git@github.com:Shopify/liquid-tm-grammar.git' into submodule path '/Users/stijn/Sites/contributions/theme-tools/packages/vscode-extension/syntaxes' failed

I followed the contributing.md

Forking is also not possible.

[charlespwd]

Ah. We have a git submodule for the syntax highlighting that lives in the packages/vscode-extension/syntaxes folder.

packages/vscode-extension/scripts/fetch-syntaxes.sh seems to be using a SSH clone URL for the submodule and it seems you haven't setup your git client with an SSH auth method.

(I came to this conclusion from this error message in the logs: git@github.com: Permission denied (publickey).)

Try editing .gitmodules at the top of the repo to this instead

[submodule "syntaxes"]
	path = packages/vscode-extension/syntaxes
	url = https://github.com/Shopify/liquid-tm-grammar.git

This should unblock you. That or go through the SSH auth steps on GitHub

[stijns96]

Hi @charlespwd,

That worked!

Put a couple of hours in it now and figured out that the plugins will indeed be overwritten by the hardcoded plugins provided by this extension.

I tried to spread the option.plugins into the format {plugins}, but can not figure out how to resolve node_modules from the open directory of the user...

I also tried to use the pluginSearchDirs from prettier

async function toTextEdit(textDocument: TextDocument): Promise<TextEdit> {
  prettier.clearConfigCache();
  const options = await prettier.resolveConfig(textDocument.uri.fsPath);
  const text = textDocument.getText();
  const workspaceFolder = workspace.getWorkspaceFolder(textDocument.uri)?.uri.fsPath || '';
  const formatted = prettier.format(text, {
    ...options,
    parser: 'liquid-html',
    pluginSearchDirs: [`${workspaceFolder}\\node_modules`],
    plugins: [...(options?.plugins || []), LiquidPrettierPlugin as any],
  });
  const start = textDocument.positionAt(0);
  const end = textDocument.positionAt(text.length);
  return TextEdit.replace(new Range(start, end), formatted);
}

[fleps]

IIRC there's also an issue w.r.t. .prettierignore being ignored, so might lump both those things together.

Hi @charlespwd
I came here on the repo searching about .prettierignore as I noted the extension is basically just not using it (it only respects file ignores comments like <!-- prettier-ignore -->), and found this message.

So are you guys aware / working on this already, or should I open a dedicated bug?

Thanks

[charlespwd]

So are you guys aware / working on this already, or should I open a dedicated bug?

We are aware, but not currently working on the .prettierignore issue. Would also accept PRs for this.