search

Shopify / theme-tools

Everything developer experience for Shopify themes
https://shopify.dev/docs/themes
MIT License
71 stars 19 forks source link

Support for prettier plugins #342

Open stijns96 opened 5 months ago

stijns96 commented 5 months ago

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

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

charlespwd commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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](https://github.com/Shopify/theme-tools/blob/main/docs/contributing.md)

Forking is also not possible.
charlespwd commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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.